@stackline/angular-data-table-component

An Angular 22 data table with sorting, filtering, pagination, selection, grouping, pinning, virtualization, templates, and a headless controller.

Documentation | npm | Issues | Repository

Current package version: 22.1.4

Why this package?

@stackline/angular-data-table-component provides Angular 22 tables and a headless controller for applications that need configurable data presentation while keeping their own templates and styling.

Compatibility

Angular Compatibility

Package majors follow Angular majors. Install an exact historical major when maintaining an older Angular application:

Historical lines remain available on npm. Security and maintenance work is focused on the current Angular line unless a separate backport is announced.

Installation

npm install @stackline/angular-data-table-component

The current release supports Angular 22:

@angular/common  >=22.0.0 <23.0.0
@angular/core    >=22.0.0 <23.0.0

Angular applications should keep all Angular framework packages on the same patch version.

Usage

Quick Start

Import the NgModule:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { DataTableModule } from '@stackline/angular-data-table-component';

@NgModule({
  imports: [BrowserModule, DataTableModule]
})
export class AppModule {}

Define columns and rows:

import { DataTableColumn } from '@stackline/angular-data-table-component';

columns: DataTableColumn[] = [
  { id: 'name', name: 'Name', selector: 'name', sortable: true },
  { id: 'team', name: 'Team', selector: 'team' },
  { id: 'score', name: 'Score', selector: 'score', sortable: true, right: true }
];

rows = [
  { id: 1, name: 'Ada', team: 'Platform', score: 98 },
  { id: 2, name: 'Linus', team: 'Runtime', score: 94 }
];

Render the table:

<stackline-data-table
  title="Team scores"
  ariaLabel="Team scores"
  [columns]="columns"
  [data]="rows"
  [pagination]="true"
  [selectableRows]="true"
  [highlightOnHover]="true"
  (selectedRowsChange)="selection = $event">
</stackline-data-table>

Features

• Client and server sorting, filtering, and pagination
• Multi-row, single-row, disabled-row, and visible-page selection
• Global and per-column filters
• Column visibility, ordering, sizing, groups, and sticky pinning
• Row grouping, top/bottom pinning, expansion, and conditional styles
• Virtual row windows for large data sets
• Custom cells and expandable content with Angular templates
• Keyboard activation and grid-oriented ARIA attributes
• Dark and default themes with no external stylesheet import
• View-independent HeadlessDataTableController for custom Angular markup

Every feature has a runnable example in the Angular 22 documentation.

Security

Please report vulnerabilities privately as described in SECURITY.md. Do not include sensitive details in a public issue.

API Surface

Templates

<ng-template #scoreCell let-row let-value="value">
  <strong [class.high-score]="value >= 90">{{ value }}</strong>
</ng-template>

<stackline-data-table [columns]="templateColumns" [data]="rows">
</stackline-data-table>

import { AfterViewInit, TemplateRef, ViewChild } from '@angular/core';
import { DataTableColumn } from '@stackline/angular-data-table-component';

@ViewChild('scoreCell') scoreCell!: TemplateRef<unknown>;

templateColumns: DataTableColumn[] = [];

ngAfterViewInit() {
  this.templateColumns = [
    { id: 'name', name: 'Name', selector: 'name' },
    { id: 'score', name: 'Score', selector: 'score', cellTemplate: this.scoreCell }
  ];
}

Headless Usage

Use the same data behavior with custom HTML:

import { createDataTableController } from '@stackline/angular-data-table-component';

const table = createDataTableController({
  columns,
  data: rows,
  pagination: true,
  perPage: 25,
  selectableRows: true
});

table.setGlobalFilter('platform');
table.toggleSort(columns[0]);

console.log(table.displayedRows);
console.log(table.state);

Main Inputs

Main Outputs

sortChange, selectedRowsChange, pageChange, rowsPerPageChange, rowClicked, rowDoubleClicked, rowExpandToggled, globalFilterChange, columnFiltersChange, columnVisibilityChange, columnOrderChange, groupingChange, and tableStateChange.

Local Development

Use Node 24.20.0 and npm 11.19.0 for reproducible release artifacts.

The release toolchain uses Node 24.20.0 and npm 11.19.0; package peer/runtime support remains as documented above:

npm ci
npm run verify

verify builds the Angular package, runs behavioral and package-contract tests, validates clean Angular 22 consumers, and builds the live documentation.

Consumer Smoke Test

npm run check builds the library and checks its public package contents and existing behavior. Run npm run test:consumer for the existing installed-consumer matrix.

Release Checklist

• Run npm ci, npm run check, and the applicable browser or consumer checks.
• Review npm audit and npm audit --omit=dev separately.
• Review the packed README, declarations, exports, license, and compatibility metadata.
• Publish through the GitHub Actions workflow using the tested artifact's SHA-512 digest.
• Verify the exact npm tarball, version, and GitHub provenance after publication; never replace a published version.

License

MIT Copyright (c) 2026 Alexandro Marques.

Credits and original authors

• Copyright (c) 2026 Alexandro Marques.
• Stackline maintenance: Alexandro Paixao Marques and Stackline contributors.

Original copyright, license notices and contributor acknowledgements remain part of this distribution. Stackline maintenance does not replace authorship of the original work.

Community and Links

• Stackline website
• GitHub projects
• npm packages
• Reddit community — r/Stackline
• Maintainer LinkedIn

Use this repository's issue tracker for reproducible bugs and feature requests. Join r/Stackline for examples, usage questions and release discussions.