A reusable Angular datatable component
npm install ss-ng-datatableA feature-rich, standalone Angular datatable component for Angular 18+. Built with modern Angular features including signals and standalone components.
- 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
``bash`
npm install ng-datatable
`typescript
import { Component } from '@angular/core';
import { DatatableComponent, DatatableColumn } from 'ng-datatable';
@Component({
selector: 'app-example',
standalone: true,
imports: [DatatableComponent],
template:
[columns]="columns"
[pageSize]="25"
[showPagination]="true">
})
export class ExampleComponent {
users = [
{ id: 1, name: 'John Doe', email: 'john@example.com', age: 30 },
{ id: 2, name: 'Jane Smith', email: 'jane@example.com', 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' }
];
}
`
#### 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 | Emitted when data refresh is requested |sortChange
| | EventEmitter | Emitted when sort configuration changes |groupChange
| | EventEmitter<{primary: string \| null, secondary: string \| null}> | Emitted when grouping changes |pageChange
| | EventEmitter | Emitted when page changes |selectionChanged
| | EventEmitter | Emitted when selected items change |contextMenuAction
| | EventEmitter | Emitted when context menu item is clicked |
`typescript`
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
}
`typescript`
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' }
];
`html`
[columns]="columns"
[initialGroupBy]="{primary: 'department'}">
`typescript`
[columns]="columns"
[allowSelection]="true"
[selectionIdField]="'id'"
(selectionChanged)="onSelectionChanged($event)">
`typescript`
onSelectionChanged(selectedItems: any[]) {
console.log('Selected items:', selectedItems);
}
`typescript`
contextMenuItems: DatatableContextMenuItem[] = [
{
id: 'edit',
label: 'Edit',
icon: 'bi bi-pencil',
singleRecordOnly: true
},
{
id: 'delete',
label: 'Delete',
icon: 'bi bi-trash'
}
];
`html`
[columns]="columns"
[enableContextMenu]="true"
[contextMenuItems]="contextMenuItems"
(contextMenuAction)="onContextMenuAction($event)">
The package also exports a standalone TablePagerComponent that can be used independently:
`typescript`
import { TablePagerComponent } from 'ng-datatable';
To build the library:
`bash`
npm install
npm run build
To create a package for local testing:
`bash``
npm run pack
- Angular 18+
- Angular Common
- Angular Forms
MIT © Chad Hollenbeck