@synapse-ui/table

Angular data table with sortable columns, pagination, loading state, and an empty state message.

Installation

npm install @synapse-ui/table

Usage

import { Table, TableColumn } from '@synapse-ui/table';

@Component({
  imports: [Table],
  template: ` <synapse-table [columns]="columns" [data]="rows" [striped]="true" (sortChange)="onSort($event)" /> `,
})
export class MyComponent {
  columns: TableColumn[] = [
    { key: 'name', header: 'Name', sortable: true },
    { key: 'email', header: 'Email', sortable: true },
  ];
  rows = [{ name: 'Alice', email: '[email protected]' }];
}

Inputs

| Input | Type | Default | Description | | ----------- | --------------------------- | ---------------------- | -------------------------- | | columns | TableColumn[] | [] | Column definitions | | data | Record<string, unknown>[] | [] | Row data | | loading | boolean | false | Shows a loading overlay | | emptyText | string | 'No data to display' | Empty state message | | pageSize | number | 10 | Rows per page | | striped | boolean | true | Alternating row background | | hoverable | boolean | true | Row highlight on hover |

Outputs

| Output | Payload | Description | | ------------ | ----------- | --------------------------------------- | | sortChange | SortEvent | Emitted when a column header is clicked |

Running unit tests

Run nx test table to execute the unit tests.