---
url: "https://vueda.dev/v3/reference/api/vue/ObjectsGrid.md"
title: "ObjectsGrid"
---

# 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](/v3/reference/theming/keys/ObjectsGrid.md)

## Props

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| <span id="prop-iconOverride">iconOverride</span> | `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. |
| <span id="prop-themeOverride">themeOverride</span> | `Object` |  | `null` | A partial ThemeObject keyed by component name, merged over this component's theme and provided to descendants. |
| <span id="prop-objectsInOrder">objectsInOrder</span> | `array` | no | `[]` | Ordered array of row objects to render. |
| <span id="prop-relatedObjects">relatedObjects</span> | `object` |  | `{}` | Map of related object keys to their data, passed to each cell slot. |
| <span id="prop-calculatedObjects">calculatedObjects</span> | `object` |  | `{}` | Map of calculated object keys to their data, passed to each cell slot. |
| <span id="prop-fields">fields</span> | `array` | yes |  | Ordered list of field names (or field descriptor objects) to render as columns. |
| <span id="prop-fieldClasses">fieldClasses</span> | `object` |  | `{}` | Map of field names to CSS class(es) applied in both table and card layouts. |
| <span id="prop-tableFieldClasses">tableFieldClasses</span> | `object` |  | `{}` | Map of field names to CSS class(es) applied only in table layout. |
| <span id="prop-cardFieldClasses">cardFieldClasses</span> | `object` |  | `{}` | Map of field names to CSS class(es) applied only in card layout. |
| <span id="prop-fieldProps">fieldProps</span> | `object` |  | `{}` | Extra props passed to each field slot via the slot binding. |
| <span id="prop-headerClasses">headerClasses</span> | `object` |  | `{}` | Map of field names to CSS class(es) applied to header cells in both layouts. |
| <span id="prop-tableHeaderClasses">tableHeaderClasses</span> | `object` |  | `{}` | Map of field names to CSS class(es) applied to header cells only in table layout. |
| <span id="prop-cardHeaderClasses">cardHeaderClasses</span> | `object` |  | `{}` | Map of field names to CSS class(es) applied to header cells only in card layout. |
| <span id="prop-loading">loading</span> | `boolean` |  | `undefined` | When true, renders skeleton rows; when false, renders data rows; when undefined, inferred from objectsInOrder. |
| <span id="prop-emptyText">emptyText</span> | `string` |  | `"No records found."` | Text displayed when the grid has no rows to show. Pass `null` to suppress the empty-state row entirely. |
| <span id="prop-emptyVariant">emptyVariant</span> | `string` |  | `"empty"` | Empty-state variant: `empty` (default), `loading`, `error`, or `filtered`. Drives `data-variant` on the empty content wrapper. |
| <span id="prop-tableBreakpoint">tableBreakpoint</span> | `string` |  | `"lg"` | Tailwind breakpoint at which the layout switches from card to table view. |
| <span id="prop-pkKey">pkKey</span> | `string` |  | `"id"` | Name of the field used as the primary key for row identity. |
| <span id="prop-evenColumn">evenColumn</span> | `func` |  | `() => null` | Function that returns a CSS class for alternating (even) columns, or null to disable. |
| <span id="prop-skeletonRows">skeletonRows</span> | `number` |  | `25` | Number of skeleton rows to render while loading. |
| <span id="prop-rowAttrs">rowAttrs</span> | `func` |  | `() => null` | Function `(obj, rowIndex) => attrs` returning extra attributes (typically `data-*`) merged onto the body row element. |
| <span id="prop-density">density</span> | `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. |

[Full slot reference](/v3/reference/api/vue/ObjectsGrid/slots.md)

## Events

### `update:isTable` {#event-update-isTable}

## Source

`client/lib/objects-grid/ObjectsGrid.vue`