ObjectsGrid

ObjectsGrid is VUEDA's native responsive object list, predating the shadcn-vue Table primitives. It is not a wrapper around the Table family. One component renders the same dataset as a table above its tableBreakpoint and as label/value cards below it.

This page is the visual contract the default skin guarantees for ObjectsGrid, ObjectsGridTableHeader, ObjectsGridBodyCell, ObjectsGridCardCell, ObjectsGridBodyCellSkeleton, and ObjectsGridCardCellSkeleton. Use it as the target when re-skinning. If a row breaks after a customization, the change has crossed from skin into design language.

For how to change any of this, see Customize VUEDA Appearance. Values belong in CSS tokens; compositions belong in theme keys.

Table Layout

The root element (ObjectsGrid root, default max-w-full overflow-x-auto) carries no border or background; those come from the enclosing surface. Header cells use ObjectsGridTableHeader root and are display-only; sorting is driven by SortControl and active sort chips outside the grid. Body cells use ObjectsGridBodyCell root, default h-[3.5rem] px-1 lg:px-2 align-middle. The 56 px row height is the legacy source default. The demo forces table mode with tableBreakpoint="xs".

Card Layout

Below tableBreakpoint the same data renders as a grid of cards. Each row uses ObjectsGrid bodyRow for the card border and padding; each field renders a label via ObjectsGridCardCell header and a value via value. No column count is set by default. Add grid-cols-x to bodyRowGroup in a theme override to control cards per row. The demo uses tableBreakpoint="inf" so cards remain visible at every practical viewport width.

The card grid columns are not set by default. Projects supply grid-cols-x via themeOverride as appropriate for their layout context.

Loading and Empty

While loading, each cell is replaced by a Skeleton sized to its field type: h-6 w-24 for text, h-6 w-16 for dates, h-6 w-full as the fallback. When there are no rows and loading is false, the empty-state row renders inside ObjectsGrid emptyContent — a flex column with an icon (resolved from useIcons("ObjectsGrid") keyed by the active variant), the emptyText prop as the title, and any consumer-provided description / CTA via the empty slot. The emptyVariant prop (empty | loading | error | filtered) drives data-variant on the content wrapper so the theme spins the icon on loading and recolors it to --destructive on error. Pass :empty-text="null" to suppress the empty-state row entirely (used by inline grids embedded in forms).

Customization Surface

Use tokens for color, type, radius, border, shadow, and density decisions that should apply across the component. Use theme keys when changing the composition: table wrappers, row groups, header cells, card label/value pairs, and skeleton placement.

The highest-value keys are:

• ObjectsGrid root, table, headerRowGroup, headerRow, headerCell, bodyRowGroup, bodyRow, cardContainer, emptyText, emptyContent.
• ObjectsGridTableHeader root, label.
• ObjectsGridBodyCell for table cell chrome and the nested WidgetLabel override used in form/grid compositions.
• ObjectsGridCardCell header and value.

Per-instance props stay useful even when the global theme is stable: fieldClasses, tableFieldClasses, cardFieldClasses, headerClasses, tableHeaderClasses, and cardHeaderClasses let a single grid tune numeric columns, action column widths, and compact fields without adding a global variant.