# swimlane/ngx-datatable

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/swimlane-ngx-datatable).**

4,671 stars · 1,673 forks · TypeScript · MIT

## Links

- GitHub: https://github.com/swimlane/ngx-datatable
- Homepage: http://swimlane.github.io/ngx-datatable/
- awesome-repositories: https://awesome-repositories.com/repository/swimlane-ngx-datatable.md

## Topics

`angular` `angular-components` `angular2` `angular4` `datagrid` `datatable` `grid` `hacktoberfest` `table` `typescript`

## Description

ngx-datatable is a feature-rich data table component for Angular applications designed to display and manage large datasets. It functions as a customizable data grid that supports sorting, pagination, and the use of custom Angular templates for styling data cells.

The component is distinguished by its high-performance virtual scrolling grid, which renders only visible rows to optimize memory and CPU usage. It provides an interactive interface for managing data through row selection, column reordering, and expandable detail views.

The project covers a broad set of capabilities including column management for pinning and resizing, multi-column sorting, and server-side integration for remote data fetching. It also includes row-level customizations such as dynamic styling, custom row components, and flexible selection modes. Additional utility features include table message localization and custom theme application via CSS.

## Tags

### Software Engineering & Architecture

- [List Virtualization](https://awesome-repositories.com/f/software-engineering-architecture/performance-reliability/performance-optimization/data-handling-throughput/large-dataset-optimizations/list-virtualization.md) — Implements a high-performance virtual scrolling grid that renders only visible rows to optimize memory and CPU usage.
- [Flexible Grid Layouts](https://awesome-repositories.com/f/software-engineering-architecture/performance-reliability/performance-optimization/data-handling-throughput/large-dataset-optimizations/large-dataset-explorers/flexible-grid-layouts.md) — Renders complex, large-scale datasets in a flexible grid format tailored for Angular applications. ([source](https://siemens-com.gitbook.io/ngx-datatable/))

### User Interface & Experience

- [Virtual Scrolling Utilities](https://awesome-repositories.com/f/user-interface-experience/virtual-scrolling-utilities.md) — Renders only the visible portion of large datasets to optimize memory and CPU usage.
- [Data Table Customizations](https://awesome-repositories.com/f/user-interface-experience/data-display-components/data-table-customizations.md) — Provides comprehensive tools for defining custom cell templates, expandable row details, and dynamic styling to tailor data displays.
- [Custom Column Templates](https://awesome-repositories.com/f/user-interface-experience/data-display-components/data-table-customizations/custom-column-templates.md) — Provides a framework for defining custom markup and templates for headers and cells within the grid. ([source](https://siemens-com.gitbook.io/ngx-datatable/readme/features.md))
- [Table Selection Interfaces](https://awesome-repositories.com/f/user-interface-experience/data-display-components/data-table-customizations/table-selection-interfaces.md) — Implements a user interface for managing data through row selection, column reordering, and expandable detail views.
- [Data Grid Customization](https://awesome-repositories.com/f/user-interface-experience/data-grid-customization.md) — Provides a flexible UI element for sorting, paginating, and styling data cells via custom Angular templates.
- [Custom Cell Styling](https://awesome-repositories.com/f/user-interface-experience/editor-customization-tools/custom-cell-editors/custom-cell-styling.md) — Allows developers to define custom HTML and logic within individual cells using Angular templates.
- [Template-Based Markup](https://awesome-repositories.com/f/user-interface-experience/editor-customization-tools/custom-cell-editors/custom-cell-styling/template-based-markup.md) — Renders custom markup within body and header cells using templates or transformation pipes. ([source](https://siemens-com.gitbook.io/ngx-datatable/api/column/inputs.md))
- [Table Scrolling Controls](https://awesome-repositories.com/f/user-interface-experience/horizontal-scrolling-utilities/editor-horizontal-scrolling/content-scrolling-controls/table-scrolling-controls.md) — Provides native vertical and horizontal scrolling controls to navigate datasets that exceed the screen dimensions. ([source](https://siemens-com.gitbook.io/ngx-datatable/readme/features.md))
- [Interactive Data Grid Manipulations](https://awesome-repositories.com/f/user-interface-experience/interactive-data-grid-manipulations.md) — Enables users to interactively manipulate the data view through column resizing, reordering, and selection workflows.
- [Virtualized Variable-Height Items](https://awesome-repositories.com/f/user-interface-experience/measurement-tools/dynamic-size-calculators/runtime-height-calculators/dynamic-height-implementations/virtualized-variable-height-items.md) — Sets fixed or dynamic row heights to enable accurate position calculations for virtual scrolling. ([source](https://siemens-com.gitbook.io/ngx-datatable/api/table/inputs.md))
- [Scroll-Offset Tracking](https://awesome-repositories.com/f/user-interface-experience/scroll-event-handlers/scroll-synchronization/scroll-offset-tracking.md) — Tracks scroll offset coordinates to synchronize the visible viewport with the data source during virtualization. ([source](https://siemens-com.gitbook.io/ngx-datatable/api/table/outputs.md))
- [Row Selection Interfaces](https://awesome-repositories.com/f/user-interface-experience/table-row-management/row-selection-interfaces.md) — Provides the UI mechanisms for identifying one or more rows for bulk actions via checkboxes or clicks. ([source](https://siemens-com.gitbook.io/ngx-datatable/readme/features.md))
- [Virtualized Data Grids](https://awesome-repositories.com/f/user-interface-experience/virtualized-data-grids.md) — Provides a high-performance virtualized grid that renders only visible rows to optimize memory and CPU usage.
- [Table Column Sizing](https://awesome-repositories.com/f/user-interface-experience/column-layout-configurations/predefined-column-layouts/table-column-sizing.md) — Provides configurable sizing modes to distribute column widths dynamically across the grid.
- [Custom Row Wrappers](https://awesome-repositories.com/f/user-interface-experience/data-display-components/data-table-customizations/custom-column-templates/dynamic-row-content-injectors/custom-row-wrappers.md) — Allows wrapping row content in custom Angular components to change the visual display of data. ([source](https://siemens-com.gitbook.io/ngx-datatable/api/row.md))
- [Column Pinning](https://awesome-repositories.com/f/user-interface-experience/data-tables/column-pinning.md) — Allows pinning specific columns to keep them visible during horizontal scrolling. ([source](https://siemens-com.gitbook.io/ngx-datatable/readme/features.md))
- [Column Reordering](https://awesome-repositories.com/f/user-interface-experience/data-tables/column-reordering.md) — Enables users to drag and drop columns to change their horizontal sequence. ([source](https://siemens-com.gitbook.io/ngx-datatable/api/table/inputs.md))
- [Grid Column Management](https://awesome-repositories.com/f/user-interface-experience/data-tables/grid-column-management.md) — Provides comprehensive controls for manual resizing, dragging for reordering, and freezing columns. ([source](https://siemens-com.gitbook.io/ngx-datatable/api/column/inputs.md))
- [Row Detail Expansion](https://awesome-repositories.com/f/user-interface-experience/expanding-content-cells/row-detail-expansion.md) — Provides the ability for rows to unfold and reveal additional nested content with adjustable heights. ([source](https://siemens-com.gitbook.io/ngx-datatable/api/row-detail/inputs.md))
- [Manual Column Resizing](https://awesome-repositories.com/f/user-interface-experience/grid-column-sizing/manual-column-resizing.md) — Tracks and applies changes to column widths as users manually adjust grid borders. ([source](https://siemens-com.gitbook.io/ngx-datatable/api/table/outputs.md))
- [Interaction Detection](https://awesome-repositories.com/f/user-interface-experience/interaction-detection.md) — Detects and responds to user input events such as clicks and focus on cells and rows. ([source](https://siemens-com.gitbook.io/ngx-datatable/api/table/outputs.md))
- [Custom Sort Comparators](https://awesome-repositories.com/f/user-interface-experience/interactive-element-sorting/custom-sort-comparators.md) — Supports pluggable comparison functions to order data based on complex or non-standard data types.
- [Multi-Select Inputs](https://awesome-repositories.com/f/user-interface-experience/multi-select-inputs.md) — Supports highlighting multiple entries using checkboxes, keyboard shortcuts, and mouse interactions. ([source](https://cdn.jsdelivr.net/gh/swimlane/ngx-datatable@master/README.md))
- [Pagination State Providers](https://awesome-repositories.com/f/user-interface-experience/pagination-components/pagination-state-providers.md) — Handles the transition between data pages using internal logic or external paging controllers. ([source](https://siemens-com.gitbook.io/ngx-datatable/api/table/inputs.md))
- [Selection Mode Configurations](https://awesome-repositories.com/f/user-interface-experience/selection-mode-configurations.md) — Provides configurable selection modes including single, multiple, cell, and checkbox selection for data rows. ([source](https://siemens-com.gitbook.io/ngx-datatable/api/table/inputs.md))
- [Render Optimization](https://awesome-repositories.com/f/user-interface-experience/state-to-html-rendering/render-optimization.md) — Reduces computational overhead by updating the user interface only when data object references change. ([source](https://siemens-com.gitbook.io/ngx-datatable/readme/cd.md))
- [Server-Side Data Processing](https://awesome-repositories.com/f/user-interface-experience/tables/column-reorderers/table-sorting-logic/data-driven-table-views/server-side-data-processing.md) — Supports offloading pagination, sorting, and data fetching to remote server APIs for efficient large-scale data management.
- [Multi-Column Sorting](https://awesome-repositories.com/f/user-interface-experience/tables/column-reorderers/table-sorting-logic/multi-column-sorting.md) — Supports ordering data using sequences of multiple fields and directions. ([source](https://siemens-com.gitbook.io/ngx-datatable/api/table/inputs.md))

### Data & Databases

- [Row Index Identification](https://awesome-repositories.com/f/data-databases/row-index-identification.md) — Assigns unique identifiers to rows to maintain their correct position and state during virtual rendering. ([source](https://siemens-com.gitbook.io/ngx-datatable/api/table/internals.md))
- [Hybrid Pagination Strategies](https://awesome-repositories.com/f/data-databases/data-pagination/hybrid-pagination-strategies.md) — Implements logic that toggles between client-side data slicing and server-side API requests.
- [Hybrid Sorting and Pagination Logic](https://awesome-repositories.com/f/data-databases/hybrid-sorting-and-pagination-logic.md) — Processes data ordering and page breaks using either client-side logic or server-side requests. ([source](https://siemens-com.gitbook.io/ngx-datatable/readme/features.md))
- [Row Styling](https://awesome-repositories.com/f/data-databases/table-data-processing/row-styling.md) — Allows applying conditional CSS classes and custom directives to rows based on their data values. ([source](https://siemens-com.gitbook.io/ngx-datatable/api/row/row-def.md))

### Web Development

- [Angular Grid Components](https://awesome-repositories.com/f/web-development/angular-grid-components.md) — Provides a feature-rich tabular data component specifically built for the Angular framework.

### Part of an Awesome List

- [Component Libraries](https://awesome-repositories.com/f/awesome-lists/devtools/component-libraries.md) — Lightweight and feature-rich data table component.