z-report-table
Complex data table for reports and statements. Sorting, column resize, frozen header, fixed columns, footer aggregation, row selection, and column visibility control.
Edit Columns
Server Sort
Enable Selection
Toggle Striped
Toggle Bordered
Toggle Size
Reset Config
Properties
| Property |
Type |
Default |
Description |
columns |
ReportColumn[] |
[] |
Column definitions. Each has: key, title, sortable, width, minWidth, maxWidth, align, fixed, resizable, required, showFooter, hidden, render, footer. required columns cannot be hidden from the selector. In edit mode the header dropdown can pin a column left/right |
data |
Record<string, unknown>[] |
[] |
Array of row data objects |
sortState |
SortEntry[] |
[] |
Current sort state, e.g. [{key: "q1_rev", dir: "desc"}]. Shift+click for multi-sort |
sortMode |
"client" | "server" |
"client" |
client: table sorts internally. server: fires z-sort only, data must be re-fetched by the caller |
selectable |
boolean |
false |
Enable row selection checkboxes |
rowClickable |
boolean |
true |
Enable the whole-row z-row-click event. Clicks on interactive elements inside a cell (buttons, links, inputs, custom components) never trigger it |
editable |
boolean |
false |
Edit mode: column resize handles, drag-to-reorder headers, and pin columns via the header dropdown. Column selection itself is available in display mode (see showColumnSelector) |
maxHeight |
string |
"" |
Max height of the table area. When set, the header stays frozen (sticky) while the body scrolls vertically, e.g. "320px" or "60vh" |
selectedKeys |
string[] |
[] |
Currently selected row keys |
rowKey |
string |
"" |
Field name to use as row identity (falls back to index) |
showFooter |
boolean |
false |
Show footer row with per-column footer values |
showColumnSelector |
boolean |
true |
Show the "Columns" toggle button in toolbar (works in display mode, independent of editable) |
striped |
boolean |
false |
Alternating row background |
bordered |
boolean |
false |
Full cell borders |
variant |
"default" | "lines" |
"default" |
Chinese three-line table style |
footerLabel |
string |
"合计" |
Total-row label in first footer cell |
size |
"sm" | "md" |
"md" |
Row density |
loading |
boolean |
false |
Show loading overlay |
emptyText |
string |
"No data" |
Text shown when data is empty |
requiredColumnText |
string |
"Required field" |
Tooltip text for required (non-hideable) columns in the selector |
Methods
| Method | Description |
|---|
selectAll() | Select all rows |
clearSelection() | Deselect all rows |
showColumn(key) | Show a hidden column |
hideColumn(key) | Hide a visible column |
toggleColumn(key) | Toggle column visibility |
getConfig() | Export the full table config snapshot (columns order/width/align/hidden/footer/fixed, sort state). Persist it anywhere you like (localStorage, server) |
applyConfig(cfg) | Apply a previously exported config snapshot (see getConfig()). Unknown column keys are ignored |
Events
| Event | Detail | Description |
|---|
z-sort | { sortState } | Fired when sort state changes |
z-selection-change | { selectedKeys } | Fired when row selection changes |
z-column-resize | { key, width } | Fired when a column is resized (editable mode) |
z-column-order-change | { keys } | Fired when a column is dragged to a new position (editable mode) |
z-column-config-change | { key, align, showFooter, fixed } | Fired when column alignment, footer toggle, or pin (fixed left/right) changes in the header dropdown (editable mode) |
z-column-visibility-change | { key, visible } | Fired when a column is shown/hidden via the selector |
z-config-change | { config } | Fired on any config change with the full snapshot { config }. Use it to persist the config externally (localStorage, server) |
z-row-click | { index, row } | Fired when a data row is clicked on a non-interactive area (buttons, links, inputs and custom z-* elements inside cells do not trigger). detail: { index, row }, row is the object in current sorted order |