ng-datatable

A feature-rich, standalone Angular datatable component for Angular 18+. Built with modern Angular features including signals and standalone components.

Features

• Multi-column sorting - Sort by multiple columns with visual indicators
• Grouping - Support for primary and secondary grouping with aggregates
• Pagination - Built-in pagination with customizable page sizes
• Row selection - Single, multi-select (Ctrl+Click), and range selection (Shift+Click)
• Context menus - Right-click context menus with conditional visibility
• Aggregates - Built-in support for sum, avg, min, max, and count aggregations
• Custom templates - Support for custom cell and aggregate templates
• Fully standalone - No NgModule required
• TypeScript first - Full type safety with comprehensive interfaces

Installation

npm install ng-datatable

Basic Usage

import { Component } from '@angular/core';
import { DatatableComponent, DatatableColumn } from 'ng-datatable';

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [DatatableComponent],
  template: `
    <app-datatable
      [data]="users"
      [columns]="columns"
      [pageSize]="25"
      [showPagination]="true">
    </app-datatable>
  `
})
export class ExampleComponent {
  users = [
    { id: 1, name: 'John Doe', email: '[email protected]', age: 30 },
    { id: 2, name: 'Jane Smith', email: '[email protected]', age: 25 },
  ];

  columns: DatatableColumn[] = [
    { key: 'id', label: 'ID', sortable: true, type: 'number' },
    { key: 'name', label: 'Name', sortable: true, groupable: true },
    { key: 'email', label: 'Email', sortable: true },
    { key: 'age', label: 'Age', sortable: true, type: 'number', aggregate: 'avg' }
  ];
}

API Reference

DatatableComponent

Inputs

| Input | Type | Default | Description | |-------|------|---------|-------------| | data | any[] | [] | Array of data objects to display | | columns | DatatableColumn[] | [] | Column definitions | | pageSize | number | 25 | Number of items per page | | showPagination | boolean | true | Show/hide pagination controls | | showControls | boolean | true | Show/hide sorting and grouping controls | | initialSort | SortColumn[] | [] | Initial sort configuration | | initialGroupBy | {primary?: string, secondary?: string} | {} | Initial grouping configuration | | allowSelection | boolean | false | Enable row selection | | selectionIdField | string | 'id' | Field to use for tracking selections | | enableContextMenu | boolean | false | Enable right-click context menus | | contextMenuItems | DatatableContextMenuItem[] | [] | Context menu item definitions |

Outputs

| Output | Type | Description | |--------|------|-------------| | dataRefresh | EventEmitter<void> | Emitted when data refresh is requested | | sortChange | EventEmitter<SortColumn[]> | Emitted when sort configuration changes | | groupChange | EventEmitter<{primary: string \| null, secondary: string \| null}> | Emitted when grouping changes | | pageChange | EventEmitter<PagingInfo> | Emitted when page changes | | selectionChanged | EventEmitter<any[]> | Emitted when selected items change | | contextMenuAction | EventEmitter<DatatableContextMenuEvent> | Emitted when context menu item is clicked |

DatatableColumn Interface

interface DatatableColumn {
  key: string;                    // Property key in data object
  label: string;                  // Display label
  sortable?: boolean;             // Enable sorting
  groupable?: boolean;            // Enable grouping
  hidden?: boolean;               // Hide column (useful for grouping-only columns)
  type?: 'string' | 'number' | 'date';  // Data type for sorting
  template?: any;                 // Custom cell template
  minWidth?: string;              // Minimum column width (e.g., '120px')
  aggregate?: 'sum' | 'avg' | 'min' | 'max' | 'count';  // Aggregation function
  aggregateTemplate?: any;        // Custom aggregate template
}

Advanced Examples

With Grouping and Aggregates

columns: DatatableColumn[] = [
  { key: 'department', label: 'Department', groupable: true },
  { key: 'employee', label: 'Employee', sortable: true },
  { key: 'sales', label: 'Sales', type: 'number', aggregate: 'sum' },
  { key: 'commission', label: 'Commission', type: 'number', aggregate: 'avg' }
];

<app-datatable
  [data]="salesData"
  [columns]="columns"
  [initialGroupBy]="{primary: 'department'}">
</app-datatable>

With Row Selection

<app-datatable
  [data]="items"
  [columns]="columns"
  [allowSelection]="true"
  [selectionIdField]="'id'"
  (selectionChanged)="onSelectionChanged($event)">
</app-datatable>

onSelectionChanged(selectedItems: any[]) {
  console.log('Selected items:', selectedItems);
}

With Context Menu

contextMenuItems: DatatableContextMenuItem[] = [
  {
    id: 'edit',
    label: 'Edit',
    icon: 'bi bi-pencil',
    singleRecordOnly: true
  },
  {
    id: 'delete',
    label: 'Delete',
    icon: 'bi bi-trash'
  }
];

<app-datatable
  [data]="items"
  [columns]="columns"
  [enableContextMenu]="true"
  [contextMenuItems]="contextMenuItems"
  (contextMenuAction)="onContextMenuAction($event)">
</app-datatable>

TablePagerComponent

The package also exports a standalone TablePagerComponent that can be used independently:

import { TablePagerComponent } from 'ng-datatable';

Development

To build the library:

npm install
npm run build

To create a package for local testing:

npm run pack

Requirements

• Angular 18+
• Angular Common
• Angular Forms

License

MIT © Chad Hollenbeck