Grid
bk-grid: a config-driven table: pass a columns array (with checkbox/badge/icon/action columns built in) and a result array, and it renders the cells for you. Contrast with bk-table, which is template-driven.
Preview
A working preview of Grid in the Brickclay style. Try it.
| Vehicle | Status | Driver | Action | |
|---|---|---|---|---|
| Truck 101 | In service | Tayyab Baig | ||
| Truck 102 | In shop | Jane Doe | ||
| Van 07 | In service | John Smith | ||
| Truck 103 | Retired | – |
Interact with the preview to see events here.
| Vehicle | Status | Driver | Action | |
|---|---|---|---|---|
| Truck 101 | In service | Tayyab Baig | ||
| Truck 102 | In shop | Jane Doe | ||
| Van 07 | In service | John Smith | ||
| Truck 103 | Retired | – |
Empty state
| Vehicle | Status | Driver | |
|---|---|---|---|
Data may be empty, or try adjusting your filter. |
API reference (selected)
| Input on bk-grid | Type | Description |
|---|---|---|
columns | TableColumn<T>[] | See below. |
result | T[] | Rows to render. |
actions | TableAction<T>[] | (row) => TableAction<T>[] | Row action buttons (edit/delete, etc.), optionally per-row. |
draggable | boolean | Row reordering via CDK drag-drop; emits dragDropChange. |
showNoRecords / noRecordMessage | boolean / string | Empty-state illustration + message. |
TableColumn property | Description | |
field / formatter | Row key to read, or a function computing the cell text. | |
sortable | Adds a sort icon; the grid emits sortChange for you to apply. | |
badges / icons | Render a bk-badge or icon(s) instead of plain text, by value or per-row function. | |
checkbox | Renders a checkbox bound to the field, emits change. | |
toolTipField | Field whose value shows as a tooltip on the cell. |