Data Table

Overview

DataTable composes the headless NaviusDataGrid<TItem> primitive, a dependency-free state engine that owns sort/filter/page/selection/visibility state and cascades a DataGridContext<TItem> to its descendants. ZitsDataTable<TItem> wraps the grid root (which renders no element of its own) and drops in ZitsDataTableContent, which renders the toolbar (a ZitsInput global filter plus ZitsDataTableViewOptions, a column-visibility menu built on the dropdown-menu component), the bordered ZitsTable, and ZitsDataTablePagination. Column headers (ZitsDataTableColumnHeader) read the grid context directly (via DataGridPart<TItem>) to render a sort-cycling ghost button.

Install

navius add data-table --to ./src/MyApp --namespace MyApp.Ui

Usage

@using Zits.Ui.Components

<ZitsDataTable TItem="Payment" Items="_payments" Columns="_columns" />

Parts and props

ZitsDataTable<TItem>:

Prop	Type	Default	Description
Items	IEnumerable<TItem>?	null	The rows to display. Pass a stable reference.
Columns	IReadOnlyList<DataGridColumn<TItem>>?	null	Column descriptors (header, accessor, sortable/hideable, optional cell template + filter).
RowKey	Func<TItem, object>?	null	Row identity for selection. Defaults to the row object itself.
EnableSelection	bool	true	Render a leading select-all / per-row selection checkbox column.
EnablePagination	bool	true	Render the pagination footer and page the rows. false shows every row.
PageSize	int	10	Rows per page when pagination is enabled.
FilterPlaceholder	string?	null	Placeholder for the global-filter input. Falls back to "Filter ...".
FilterColumnKey	string?	null	Column key whose name seeds the default filter placeholder ("Filter {key}...").

ZitsDataTableColumnHeader takes ColumnKey and Title. ZitsDataTablePagination takes ShowSelectedCount. ZitsDataTableViewOptions and ZitsDataTableContent are internal composition parts with no additional public surface beyond what ZitsDataTable forwards.

Anatomy

ZitsDataTable<TItem>                      (wraps NaviusDataGrid<TItem>, the brain)
└── ZitsDataTableContent
    ├── toolbar
    │   ├── ZitsInput                     (global filter)
    │   └── ZitsDataTableViewOptions      ("View" column-visibility menu)
    ├── ZitsTable
    │   ├── selection checkbox column     (EnableSelection)
    │   └── ZitsDataTableColumnHeader     (per column; sortable ghost button)
    └── ZitsDataTablePagination           (EnablePagination: Prev / Next + selected count)

Styling surface

Attributes on ZitsDataTable is forwarded to ZitsDataTableContent’s outer wrapper. There is no variant/size parameter; the table, toolbar, and pagination classes are fixed presets.

Data attribute hooks

Part	Attribute	Description
Row	data-state="selected"	Set by ZitsDataTableContent on ZitsTableRow when the row is in the grid context’s selection set.

Underlying primitives

• NaviusDataGrid (source; manifest not yet published)