SillyDatatable2

Angular table component for displaying, sorting, filtering, paging and batch-selecting tabular data.

Requirements

| Dependency | Version | | ----------------- | ---------- | | Angular | ^22.1.0 | | @angular/forms | ^22.1.0 | | rxjs | ^7.8.0 | | lodash-es | ^4.17.21 | | TypeScript | ~6.0.x | | Node.js | >=20 |

The library is built with ng-packagr in partial compilation mode, so it is compatible with Angular's AOT compiler (Ivy) and does not require enableIvy configuration.

Installation

npm install silly-datatable2 lodash-es

Usage

Standalone applications (recommended)

All public components and directives are standalone, so they can be imported directly into the imports array of the consumer component:

import { Component } from '@angular/core';
import {
  SillyDatatable2Component,
  SillyDatatable2SearchComponent,
  SillyDatatable2FilterComponent,
  Column,
  TableParams,
  TableSettings,
} from 'silly-datatable2';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    SillyDatatable2Component,
    SillyDatatable2SearchComponent,
    SillyDatatable2FilterComponent,
  ],
  template: `
    <ngx-silly-datatable
      id="my-table"
      [columns]="columns"
      [tableParams]="tableParams"
      [settings]="settings"
      (tableParamsChange)="onTableParamsChange($event)">
    </ngx-silly-datatable>
  `,
})
export class AppComponent {
  public columns: Array<Column> = [];
  public tableParams: TableParams = new TableParams();
  public settings: TableSettings = new TableSettings();

  public onTableParamsChange(params: TableParams): void {
    // Load data for the new params (paging / sorting / filtering).
  }
}

NgModule-based applications

Import SillyDatatable2Module instead:

import { SillyDatatable2Module } from 'silly-datatable2';

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

StoreService (which persists per-table settings such as visible columns and itemsPerPage in localStorage) is providedIn: 'root', so no extra provider registration is required in either setup.

Header tooltips

Column.headerTooltip sets the native title attribute on the column header. When it is omitted, the header falls back to Column.title; an empty string disables the tooltip. For the batch-select header use TableSettings.selectAllThTitle.

const columns: Array<Column> = [
  { id: 'id', title: 'No.', headerTooltip: 'Row number' },
];

const settings = new TableSettings();
settings.batchSelect = true;
settings.selectAllThTitle = 'Select all rows';

Custom column header

Column.headerComponent renders a standalone component inside the <th>, next to the column title. The component receives a HeaderContext through its public context property:

import { Component } from '@angular/core';
import { HeaderContext } from 'silly-datatable2';

@Component({
  selector: 'app-column-settings-header',
  standalone: true,
  template: `
    <button type="button"
        aria-label="Column settings"
        (click)="openSettings()">⚙</button>
  `,
})
export class ColumnSettingsHeaderComponent {
  public context!: HeaderContext;

  public openSettings(): void {
    // context.column, context.sort and context.toggleSort() are available here.
  }
}

const columns: Array<Column> = [
  {
    id: 'actions',
    title: 'Actions',
    sortable: true,
    headerComponent: ColumnSettingsHeaderComponent,
  },
];

The title link keeps its existing sorting behaviour, and clicks on the custom component do not toggle sorting. If the custom header needs to trigger sorting itself, call context.toggleSort(). Accessibility attributes (role, tabindex, aria-*) are owned by the custom component; the library does not modify them.

Public API

The following symbols are exported from the package entry point:

• Components: SillyDatatable2Component, SillyDatatable2SearchComponent, SillyDatatable2PagingComponent, SillyDatatable2FilterComponent, SillyDatatable2OptionsComponent
• Module: SillyDatatable2Module
• Models: TableSettings, TableParams, Column, Sort, Pagination, PaginationSettings, OptionsSettings, FilterFormField, FilterSettings, Filter, ComponentCell, HeaderContext, HeaderComponent

Migration notes (Angular 14 → 22.1.0)

• Migrated to the standalone API; standalone: true is now the default for every component and directive.
• Templates use the built-in control flow (@if, @for ... track, @switch) instead of *ngIf / *ngFor.
• bootstrapApplication() + ApplicationConfig replaced platformBrowserDynamic in the demo app.
• Removed the dependency on Angular private APIs (the table uid is now derived from the host element tag name).
• Tightened types for strict + strictTemplates mode.

Build

Run ng build silly-datatable2 to build the project. The build artifacts will be stored in the dist/ directory.

Publishing

After building the library with ng build silly-datatable2, go to the dist folder cd dist/silly-datatable2 and run npm publish.

Running unit tests

Run ng test silly-datatable2 to execute the unit tests via Karma.