@kit-ng-ui/table

Declarative table component. Columns are config, rows are data, sort is client-side by default, and the footer can host a <kit-pagination> automatically.

Install

pnpm add @kit-ng-ui/table

@use '@kit-ng-ui/pagination/styles' as pagination;
@use '@kit-ng-ui/table/styles' as table;

Usage

interface Order { id: string; customer: string; total: number; }

columns: KitTableColumn<Order>[] = [
  { key: 'id', title: '#', dataField: 'id' },
  { key: 'customer', title: 'Customer', dataField: 'customer', sortable: true },
  { key: 'total', title: 'Total', dataField: 'total', sortable: true, align: 'end',
    format: (row) => '₫' + row.total.toLocaleString() },
];

<kit-table
  [columns]="columns"
  [data]="orders"
  rowKeyField="id"
  pagination
  bordered
  checkable
  [(checkedKeys)]="selected"
  (rowClick)="open($event)"
></kit-table>

For server-side data, pass [total] and react to (sortChange) / (pageChange) to refetch.

API

<kit-table>

| Input | Type | Default | | ---------------- | ------------------------------------------- | -------------- | | columns | ReadonlyArray<KitTableColumn<T>> | [] | | data | ReadonlyArray<T> | [] | | rowKeyField | ((row: T) => string) \| string \| null | null | | checkable | boolean | false | | checkedKeys | ReadonlyArray<string> (two-way) | [] | | sort | KitTableSort \| null (two-way) | null | | pagination | boolean | false | | pageIndex | number (two-way) | 1 | | pageSize | number (two-way) | 10 | | total | number \| null | null | | size | 'middle' \| 'small' \| 'large' | 'middle' | | bordered | boolean | false | | emptyText | string | 'No data' |

| Output | Payload | | ----------------- | ----------------------------- | | rowClick | T | | sortChange | KitTableSort \| null | | selectionChange | ReadonlyArray<string> |

v0.1 omits filter dropdowns, expandable rows, sticky header / column, virtual scroll, and row-grouping.