ngx-datatableSimple Table for Angular

Migrate from ngx-datatable to Simple Table for Angular

A practical migration guide from ngx-datatable to Simple Table for Angular. Move off an unmaintained legacy grid and onto a modern signals-friendly Angular table without giving up virtualization, pinning, or grouping.

@swimlane/ngx-datatable was a popular Angular data grid for years. Active maintenance has slowed and the API leans on NgModule patterns that feel awkward in standalone-component apps.

Simple Table for Angular is an MIT-licensed alternative built around standalone components and signals. It ships virtualization, pinning, grouping with aggregations, and inline editing in the box.

This guide walks an existing Angular app from ngx-datatable to @simple-table/angular without touching your data layer.

Why migrate

  • Active maintenance and Angular 17/18/19 standalone-components support.
  • Built-in column pinning, grouping with aggregations, and inline editing.
  • Smaller bundle and no NgModule boilerplate.
  • Same engine across React/Vue/Svelte/Solid/Vanilla if your stack expands.

Prerequisites

  • Angular 17 or newer (standalone components recommended).
  • Simple Table for Angular installed: npm install @simple-table/angular.
  • TypeScript ≥ 5.2.

Install

npm install @simple-table/angular

API mapping cheat sheet

ngx-datatableSimple Table for AngularNotes
[rows][rows]See the Simple Table docs for the row shape.
[columns][defaultHeaders]prop → accessor; name → label.
[columnMode]='force'Width-based layoutSet explicit widths or use 'minmax' helpers on Simple Table headers.
[scrollbarV]='true'height + virtualization (built-in)Set a height; row virtualization kicks in automatically.
ngx-datatable-columnHeaderObject.cellRendererReplace template-projection columns with renderer components.
[selected] / (select)selectableCells / selectableColumnsConfigure on the table.
[sorts]Initial sort on HeaderObjectSet HeaderObject.sortDirection on the column you want sorted.
Theme classes (material/dark)@simple-table/angular/styles.cssTheme via CSS variables.

Step-by-step migration

  1. Install and remove ngx-datatable

    Install @simple-table/angular and import its stylesheet. Remove @swimlane/ngx-datatable once you're done migrating.

    npm install @simple-table/angular
npm uninstall @swimlane/ngx-datatable

// styles.scss or main.ts
import "@simple-table/angular/styles.css";

  2. Convert columns

    Convert each ngx-datatable column to a HeaderObject. Replace template projection with cellRenderer components.

  3. Reshape your row data

    Simple Table requires a stable id per row. Follow the row shape documented in the Simple Table docs.

  4. Replace selection and sort handlers

    ngx-datatable's (select) and [sorts] hooks become Simple Table props that emit through Angular outputs.

  5. Adopt new features

    Once the migration is stable, turn on column pinning, row grouping with aggregations, and inline editing—no extra modules required.

Gotchas

Template projection columns
ngx-datatable allowed inline <ng-template>. Simple Table uses cell renderer components instead—straightforward but requires a small refactor.

FAQ

Is ngx-datatable still maintained?
Maintenance has slowed. Many production teams have moved to alternatives over the past two years for security patches and Angular 17+ compatibility.
Will I lose any features migrating?
Most ngx-datatable features (sort, paginate, virtual scroll, custom cells) are first-class in Simple Table for Angular. Niche features like exact tree-row keyboard parity may need small renderer tweaks.

Keep going