ObjectsGrid
Overview
Renders a list of objects as either a table or a card grid depending on the current breakpoint. Supports skeleton loading rows, field-level slot overrides, and per-field class customization.
Theme entry: ObjectsGrid
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| iconOverride | Object | null | A partial icon registry ({ [componentName]: { [iconName]: { component, props } } }) merged with inherited and default icon entries; scopes icon overrides to this component and its descendants. | |
| themeOverride | String|Object|Array | null | A partial theme object merged with the component's default theme; accepts a class string, class array, or theme object. | |
| objectsInOrder | array | no | [] | Ordered array of row objects to render. |
| relatedObjects | object | {} | Map of related object keys to their data, passed to each cell slot. | |
| calculatedObjects | object | {} | Map of calculated object keys to their data, passed to each cell slot. | |
| fields | array | yes | Ordered list of field names (or field descriptor objects) to render as columns. | |
| fieldClasses | object | {} | Map of field names to CSS class(es) applied in both table and card layouts. | |
| tableFieldClasses | object | {} | Map of field names to CSS class(es) applied only in table layout. | |
| cardFieldClasses | object | {} | Map of field names to CSS class(es) applied only in card layout. | |
| fieldProps | object | {} | Extra props passed to each field slot via the slot binding. | |
| headerClasses | object | {} | Map of field names to CSS class(es) applied to header cells in both layouts. | |
| tableHeaderClasses | object | {} | Map of field names to CSS class(es) applied to header cells only in table layout. | |
| cardHeaderClasses | object | {} | Map of field names to CSS class(es) applied to header cells only in card layout. | |
| loading | boolean | undefined | When true, renders skeleton rows; when false, renders data rows; when undefined, inferred from objectsInOrder. | |
| emptyText | string | "No records found." | Text displayed when the grid has no rows to show. Pass null to suppress the empty-state row entirely. | |
| emptyVariant | string | "empty" | Empty-state variant: empty (default), loading, error, or filtered. Drives data-variant on the empty content wrapper. | |
| tableBreakpoint | string | "lg" | Tailwind breakpoint at which the layout switches from card to table view. | |
| pkKey | string | "id" | Name of the field used as the primary key for row identity. | |
| evenColumn | func | () => null | Function that returns a CSS class for alternating (even) columns, or null to disable. | |
| skeletonRows | number | 25 | Number of skeleton rows to render while loading. | |
| rowAttrs | func | () => null | Function (obj, rowIndex) => attrs returning extra attributes (typically data-*) merged onto the body row element. | |
| density | string | "default" | Row-height density tier in table layout: default 32px, compact 28px, condensed 24px. |
Slots
| Name | Scoped | Description |
|---|---|---|
header(fieldName) | yes | Override the header label cell for a specific field column. |
empty | yes | Replaces the default empty-state body. Receives variant (the resolved emptyVariant). Compose icon (with data-slot="icon"), title, description, and actions. |
field(fieldName) | yes | Override the body cell content for a specific field column. |
row-after-objects | yes | Content appended after all data rows in the grid body. |
Events
update:isTable
Source
client/lib/objects-grid/ObjectsGrid.vue