explaingit

swimlane/ngx-datatable

★ 4,672TypeScriptAudience · developerComplexity · 2/5Setup · easy

TLDR

A feature-rich Angular table component for displaying large datasets with sorting, pagination, virtual scrolling, column pinning, and row expansion, no external dependencies beyond Angular itself.

Mindmap

mindmap
  root((ngx-datatable))
    What it does
      Angular table component
      Large dataset support
      No extra dependencies
    Key Features
      Virtual scrolling
      Sort and paginate
      Column pin and resize
    Selection
      Single and multi row
      Checkbox select
      Keyboard navigation
    Customization
      Material theme included
      Custom themes
      Row expansion
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Add a high-performance sortable and paginated data table to your Angular app with a single npm install.

USE CASE 2

Display thousands of rows smoothly using virtual scrolling that only renders the rows currently visible on screen.

USE CASE 3

Build a table with pinned columns, row expansion, and multi-select checkboxes for a data management UI.

USE CASE 4

Replace an existing Angular table with ngx-datatable to get column resizing and reordering out of the box.

Tech stack

TypeScriptAngular

Getting it running

Difficulty · easy Time to first run · 30min

In plain English

ngx-datatable is an Angular component for displaying tables of data in web applications. Angular is a popular framework for building web apps, and components like this one give developers a ready-made table with advanced features so they do not need to build one from scratch. The library has no external dependencies beyond Angular itself, keeping the bundle size small. The component is designed to handle large datasets by using a virtual DOM approach, meaning it only renders the rows currently visible on screen rather than loading everything at once. This keeps the interface fast when working with thousands of rows. Feature-wise, it covers the standard needs for a data table: sorting, pagination, column resizing, and column reordering. Rows and cells can be selected individually, in multiple groups, via keyboard, or via checkboxes. Columns can be pinned to the left or right so they stay visible while scrolling horizontally. Rows can be expanded to show a detail view. Both fixed-height and fluid-height layouts are supported. The table separates its visual style from its logic. It ships with a Google Material theme included, but the theming is designed to be replaced if you want a different look. Installation is through npm with a single command. The project includes a documentation site and a live demos page. It is maintained by Swimlane, a company that builds security operations software, and was released as open source as part of their policy of sharing internal tooling with the broader development community. The README includes a step-by-step release process checklist for contributors.

Copy-paste prompts

Prompt 1
Add ngx-datatable to my Angular project and set up a table with sorting, pagination, and multi-row checkbox selection from a sample dataset.
Prompt 2
How do I configure ngx-datatable to pin the first two columns on the left while allowing horizontal scrolling through the rest of the table?
Prompt 3
Help me implement row expansion in ngx-datatable so clicking a row reveals a detail view panel with additional data beneath it.
Prompt 4
Write the code to replace the default ngx-datatable Material theme with a custom CSS theme matching my app's color palette.
Prompt 5
How do I set up virtual scrolling in ngx-datatable to display 50,000 rows without the browser slowing down?
Open on GitHub → Explain another repo

← swimlane on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.