Ngx Magic Table

screenshot of Ngx Magic Table
bootstrap
scss

Angular 6 smart DataGrid based on bootstrap and font-awesome, provides sort, arrange columns, custom header, cell templates and grouping columns

Overview

The Magic Table is an Angular 6 smart DataGrid that combines the power of Bootstrap and Font Awesome to create a seamless and interactive table experience. This component is designed for developers looking for a customizable and efficient way to display and manage data within their applications. With its focus on maintainability and flexibility, it aims to simplify the management of complex data sets while ensuring a clean and attractive user interface.

Features

  • Server-side or Client-side Sorting: Easily sort data on the server or client side based on your application’s requirements.
  • Custom Pagination Options: Choose between server-side or client-side pagination to efficiently manage how much data is displayed at once.
  • Drag-and-Drop Column Management: Users can freely arrange column placements by dragging them, enhancing usability and personal preference.
  • Customizable Headers and Cells: Tailor headers and cell templates to fit your design needs, offering greater control over the appearance of your data.
  • Grouping Functionality: Organize data with the ability to group headers and rows, making complex data sets easier to navigate.
  • Dynamic Filtering Options: While still under development, the filtering rows feature will empower users to sift through data effortlessly.
  • Responsive Column Sizing: Effortlessly set columns to auto-size and customize visibility according to the needs of your layout.
  • User-friendly Style Management: Save and load table styles, reset to defaults, and even include class rendering for specific rows.
bootstrap
Bootstrap

Bootstrap is the most popular CSS Framework for developing responsive and mobile-first websites.

scss
SCSS

SCSS is a preprocessor scripting language that extends the capabilities of CSS by adding features such as variables, nesting, and mixins. It allows developers to write more efficient and maintainable CSS code, and helps to streamline the development process by reducing repetition and increasing reusability.

typescript
Typescript

TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.