ObjectsGrid

Source: client/lib/theme/vueda-tailwind/objects-grid/index.js

The outer scroll surface and card chrome for the grid. It owns the density attribute, tabular number rendering, and data-flush edge merging used when the grid is embedded in a parent surface. data-flush strips the embedded grid's border and radius so only the parent container's edge remains visible.

Vue component: ObjectsGrid

Slot	Default classes	Description
root	4 classes	The outer scroll surface and card chrome for the grid. It owns the density attribute, tabular number rendering, and data-flush edge merging used when the grid is embedded in a parent surface. data-flush strips the embedded grid's border and radius so only the parent container's edge remains visible.
table	callback	The inner table-shaped container. It switches on the table display contract only when the active breakpoint resolves to table layout.
headerRowGroup	callback	The header row group for table layout. It is hidden in card layout because card labels come from ObjectsGridCardCell.header.
headerRow	callback	The table-layout header row wrapper. It becomes a table row only when ObjectsGrid.table is in table mode.
headerCell	callback	The table-layout column header cell. It aligns numeric columns with data-numeric so sortable columns keep their right edge stable.
emptyText	text-center	The empty-state cell wrapper. It centers the empty content inside the single full-width row created when the grid has no data.
emptyContent	4 classes	The empty-state content stack. It styles the icon, title, and variant-driven loading or error treatment used by the default empty slot.
bodyRowGroup	callback	The body row group for loading, empty, and data rows. It is a responsive card grid in card layout and a table row group in table layout.
bodyRow	callback	The shared row wrapper for table rows and card rows. It carries hover, selected, and marked-destroy states while preserving action controls. Selected rows use a low-primary tint plus a leading primary rail so selection stays distinct from hover.
cardContainer	3 classes	The card-layout field grid inside each row card. It aligns all ObjectsGridCardCell.header and ObjectsGridCardCell.value fragments into label and value columns.
rowActions		Row-action classes exposed for consumers that compose inline row controls next to object rows. Use rowActions.root for the hidden wrapper and rowActions.action for compact icon buttons.

root

The outer scroll surface and card chrome for the grid. It owns the density attribute, tabular number rendering, and data-flush edge merging used when the grid is embedded in a parent surface. data-flush strips the embedded grid's border and radius so only the parent container's edge remains visible.

Default classes:

max-w-full overflow-x-auto
rounded-vueda-card hairline hairline-border bg-card text-foreground text-body
[font-variant-numeric:tabular-nums_slashed-zero]
[[data-flush]_&]:rounded-none [[data-flush]_&]:border-x-0 [[data-flush]_&]:border-t-0

Source: client/lib/theme/vueda-tailwind/objects-grid/ObjectsGrid.theme.js:18

table

The inner table-shaped container. It switches on the table display contract only when the active breakpoint resolves to table layout.

Callback:

({ isTable }) => [
                {
                    "!table border-separate border-spacing-0": isTable,
                },
            ]

Source: client/lib/theme/vueda-tailwind/objects-grid/ObjectsGrid.theme.js:30

headerRowGroup

The header row group for table layout. It is hidden in card layout because card labels come from ObjectsGridCardCell.header.

Callback:

({ isTable }) => [
                "gap-1 2xs:gap-2 2xl:gap-4",
                {
                    "!table-header-group": isTable,
                    hidden: !isTable,
                },
            ]

Source: client/lib/theme/vueda-tailwind/objects-grid/ObjectsGrid.theme.js:38

headerRow

The table-layout header row wrapper. It becomes a table row only when ObjectsGrid.table is in table mode.

Callback:

({ isTable }) => [{ "!table-row": isTable }]

Source: client/lib/theme/vueda-tailwind/objects-grid/ObjectsGrid.theme.js:48

headerCell

The table-layout column header cell. It aligns numeric columns with data-numeric so sortable columns keep their right edge stable.

Callback:

({ isTable }) => [
                "align-bottom",
                "font-semibold",
                "select-none",
                // Match the body cells and TableHead: a label wider than its column's values (a
                // "Unit Price" header over "0.38") widens the column instead of wrapping.
                "whitespace-nowrap",
                "data-[numeric]:text-right",
                {
                    "!table-cell": isTable,
                },
            ]

Source: client/lib/theme/vueda-tailwind/objects-grid/ObjectsGrid.theme.js:52

emptyText

The empty-state cell wrapper. It centers the empty content inside the single full-width row created when the grid has no data.

Default classes:

text-center

Source: client/lib/theme/vueda-tailwind/objects-grid/ObjectsGrid.theme.js:67

emptyContent

The empty-state content stack. It styles the icon, title, and variant-driven loading or error treatment used by the default empty slot.

Default classes:

flex flex-col items-center justify-center gap-2.5 py-10 text-center text-muted-foreground
[&>[data-slot=icon]]:text-xl [&>[data-slot=icon]]:text-muted-foreground/70
data-[variant=loading]:[&>[data-slot=icon]]:animate-spin
data-[variant=error]:[&>[data-slot=icon]]:text-destructive/80

Source: client/lib/theme/vueda-tailwind/objects-grid/ObjectsGrid.theme.js:71

bodyRowGroup

The body row group for loading, empty, and data rows. It is a responsive card grid in card layout and a table row group in table layout.

Callback:

({ isTable }) => [
                "print:block",
                {
                    // 1 / 2 / 3 column responsive default; projects override via theme as needed.
                    "grid grid-flow-row grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 p-1 2xs:p-2 2xl:p-4 gap-1 2xs:gap-2 2xl:gap-4":
                        !isTable,
                    "!table-row-group": isTable,
                },
            ]

Source: client/lib/theme/vueda-tailwind/objects-grid/ObjectsGrid.theme.js:81

bodyRow

The shared row wrapper for table rows and card rows. It carries hover, selected, and marked-destroy states while preserving action controls. Selected rows use a low-primary tint plus a leading primary rail so selection stays distinct from hover.

Callback:

({ isTable }) => {
                return [
                    "group/row transition-colors",
                    "hover:bg-accent/50 active:bg-accent",

                    // Selected row state.
                    "data-[state=selected]:bg-primary/[0.06]",
                    "data-[state=selected]:hover:bg-primary/[0.09]",
                    "data-[state=selected]:active:bg-primary/[0.12]",
                    "data-[state=selected]:[box-shadow:inset_2px_0_0_0_var(--primary)]",

                    // marked-destroy: 4% destructive tint and a strikethrough on every cell whose
                    // `data-field` / `data-card` / `data-card-header` is not the action column. Action
                    // controls are excluded so the user can still click "undo" on the destroy mark.
                    "data-[state=marked-destroy]:bg-destructive/[0.04]",
                    "data-[state=marked-destroy]:[&_[data-field]:not([data-field=item-action-bar])]:line-through",
                    "data-[state=marked-destroy]:[&_[data-card]:not([data-card=item-action-bar])]:line-through",
                    "data-[state=marked-destroy]:[&_[data-card-header]:not([data-card-header=item-action-bar])]:line-through",
                    // you can't tell how many cards are on a row, so we must treat them all the same.
                    // first and last don't help us here.
                    {
                        "!table-row": isTable,
                        "p-1 2xs:p-2 2xl:p-4 rounded-vueda-card hairline hairline-border overflow-y-auto": !isTable,
                    },
                ];
            }

Source: client/lib/theme/vueda-tailwind/objects-grid/ObjectsGrid.theme.js:93

cardContainer

The card-layout field grid inside each row card. It aligns all ObjectsGridCardCell.header and ObjectsGridCardCell.value fragments into label and value columns.

Default classes:

p-1 2xs:p-2 2xl:p-4 gap-1 2xs:gap-2 2xl:gap-4 mb-1 mt-2
grid grid-cols-[minmax(96px,max-content)_1fr] items-baseline
[&>*]:min-w-0

Source: client/lib/theme/vueda-tailwind/objects-grid/ObjectsGrid.theme.js:122

rowActions

Row-action classes exposed for consumers that compose inline row controls next to object rows. Use rowActions.root for the hidden wrapper and rowActions.action for compact icon buttons.

Source: client/lib/theme/vueda-tailwind/objects-grid/ObjectsGrid.theme.js:135