@styloviz/data-table

Sortable, paginated table with row selection, badge cells and a loading skeleton — plus premium toolbar, column filters, inline editing, expandable rows and bulk actions.

Part of the Styloviz UI Kit — a premium Angular 21 + Tailwind CSS 4 dashboard component library. Standalone, OnPush, strongly typed, dark-mode ready.

Installation

npm install @styloviz/core @styloviz/icons @styloviz/data-table

Requires @angular/core and @angular/common >= 21. Also needs @styloviz/core, @styloviz/icons — listed above so no extra step is required on npm (on pnpm/yarn, list them yourself). Prefer everything at once? @styloviz/all installs the whole free tier in one command.

Usage

import { SvDataTableComponent } from '@styloviz/data-table';

@Component({
  standalone: true,
  imports: [SvDataTableComponent],
  template: `
    <sv-data-table [rows]="rows" rowKey="id" [selectable]="true" [paginated]="true" />
  `,
})
export class DemoComponent {}

Inputs

| Input | Type | Default | Description | | --- | --- | --- | --- | | columns | TableColumn<T>[] | [] | Column definitions (key, header, alignment, optional cell template). | | rows | readonly T[] | [] | The rows to render. readonly on purpose: the table never mutates this array, and anything that hands it one — a signal, a computed, svDataController.items — is handing over a value it still owns. A mutable T[] here rejected every one of those at the template boundary while promising a write the table does not perform. | | rowKey | string | 'id' | Property used as each row's unique id (for selection/tracking). | | selectable | boolean | false | Enable row selection. | | selectMode | SelectMode | 'multi' | 'multi' = checkboxes, 'single' = radio buttons. | | selectedIds | Set<string \| number> (two-way) | new Set() | Selected row ids (two-way). | | actions | TableRowAction<T>[] | [] | Per-row action buttons. | | bulkActions | BulkAction[] | [] | Bulk actions applied to selected rows. | | loading | boolean | false | Show a loading state. | | loadingStyle | LoadingStyle | 'skeleton' | 'skeleton' rows or full-table 'overlay' spinner. | | skeletonRows | number | 5 | Number of skeleton rows while loading. | | paginated | boolean | true | Enable client-side pagination. | | pageSize | number (two-way) | 10 | Rows per page (two-way). | | pageSizeOptions | number[] | [10, 25, 50] | Page-size options offered in the toolbar. | | serverSide | boolean | false | Server-side mode: disables client filtering/sorting/paging. | | totalCount | number \| null | null | Total row count when in server-side mode. | | variant | TableVariant | 'default' | Table style variant. | | density | TableDensity | 'comfortable' | Row density: comfortable, compact, etc. | | compact | boolean | false | Deprecated shorthand for compact density. | | maxHeight | string \| null | null | Max body height (CSS length) before the table scrolls. | | showScrollHint | boolean | true | Show a hint when the table is horizontally scrollable. | | rowClassFn | ((row: T) => string) \| null | null | Callback returning extra Tailwind classes for a given row. | | showToolbar | boolean \| undefined | undefined | Show the toolbar strip. Left unset it DERIVES from whether the toolbar has anything to put in it — binding tableTitle or [searchable] used to render nothing at all unless you also remembered this flag, which is a silent no-op: the API accepted your input and ignored it. Set it explicitly to force the strip on (an empty bar as a spacer) or off (a title used only as the accessible name). Every existing call site passes it, so nothing changes for them. | | tableTitle | string | '' | Title shown in the toolbar. | | searchable | boolean | false | Show a search box in the toolbar. | | showColumnToggle | boolean | false | Show the column visibility toggle. | | exportable | boolean | false | Show an export (CSV) control. | | showDensityToggle | boolean | false | Show the density toggle. | | columnFilters | boolean | false | Enable per-column filters. | | multiSort | boolean | false | Allow sorting by multiple columns. | | expandable | boolean | false | Enable expandable rows. | | expandRender | ((row: T) => string) \| null | null | Renderer for the expanded row detail. | | showFooter | boolean | false | Show a table footer row. | | cardOnMobile | boolean | false | Render rows as cards on small screens. | | emptyMessage | string | 'No data to display.' | Message shown when there are no rows. | | customClass | string | '' | Extra CSS classes for the root element. | | error | SvDataError \| string \| null | null | Load failure. Use toSvDataError() from ` |

Outputs

| Output | Type | Description | | --- | --- | --- | | sortChange | SortState[] | Emitted with the new sort state when sorting changes. | | selectionChange | Set<string \| number> | Emitted with the set of selected row ids. | | rowClick | T | Emitted with the clicked row. | | cellClick | CellClickEvent<T> | Emitted with the clicked cell context. | | editComplete | EditCompleteEvent<T> | Emitted when an inline cell edit completes (Pro). | | retry | void | The host should re-run the failed load. | | queryChange | SvDataQuery | Everything the user is asking to see, in the kit's shared shape. This is the output to wire in serverSide mode: one handler regardless of whether they paged, sorted, filtered or searched, and the same SvDataQuery every other component in the kit emits — so | |serverPageChange|ServerPageEvent| — | |rowExpand|T| Emitted with the row being expanded. | |bulkActionClick|{ action: BulkAction; selectedIds: Set<string | number> }` | Emitted with the bulk action and the selected row ids. |

Documentation

Full API reference and live demos: https://styloviz.dev/docs/data-table

License

MIT