@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/data-table

Requires @angular/core and @angular/common >= 21. Self-contained — no other StyloViz packages required. 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 | | --- | --- | --- | --- | | rows | T[] | [] | Row data to display. | | 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. | | 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. | | showToolbar | boolean | false | Show the toolbar above the table. | | 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. | | 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. |

Outputs

| Output | Type | Description | | --- | --- | --- | | sortChange | SortState[] | Emitted with the new sort state when sorting changes. | | rowClick | T | Emitted with the clicked row. | | serverPageChange | ServerPageEvent | Emitted in server-side mode when the page/size changes. | | rowExpand | T | Emitted with the row being expanded. |

Documentation

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

License

MIT