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

# ObjectsGridCardCell

## Overview

Renders a single field as a label/value pair in the card-layout view of ObjectsGrid.

Theme entry: [ObjectsGridCardCell](/v3/reference/theming/keys/ObjectsGridCardCell.md)

## Props

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| <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-field">field</span> | `object` | yes |  | Field definition object; `name`, `label`, `value`, and `formatted` properties are used by this component. |
| <span id="prop-obj">obj</span> | `object` | yes |  | The raw data object for the current row. |
| <span id="prop-relatedObject">relatedObject</span> | `object` | yes |  | Related (joined) object data for the current row. |
| <span id="prop-calculatedObject">calculatedObject</span> | `object` | yes |  | Pre-calculated derived values for the current row. |
| <span id="prop-rowIndex">rowIndex</span> | `number` | yes |  | Zero-based index of the current row. |
| <span id="prop-columnIndex">columnIndex</span> | `number` | yes |  | Zero-based index of the current column. |
| <span id="prop-rowCount">rowCount</span> | `number` | yes |  | Total number of rows in the grid. |
| <span id="prop-columnCount">columnCount</span> | `number` | yes |  | Total number of columns in the grid. |
| <span id="prop-fieldProps">fieldProps</span> | `object` |  | `{}` | Additional props forwarded to the `value` slot. |
| <span id="prop-pkKey">pkKey</span> | `string` |  | `"id"` | Name of the primary key property on `obj`. |
| <span id="prop-pk">pk</span> | `string\|number` |  | `undefined` | Primary key value of the current row's object. |
| <span id="prop-headerClass">headerClass</span> | `string` |  | `""` | Additional CSS class applied to the field label header element. |

## Slots

### `header` {#slot-header}

Scoped slot.

#### Bindings

| Name | Description |
| --- | --- |
| <span id="slot-header-param-key">key</span> |  |
| <span id="slot-header-param-class">class</span> |  |
| <span id="slot-header-param-rowIndex">rowIndex</span> |  |
| <span id="slot-header-param-columnIndex">columnIndex</span> |  |
| <span id="slot-header-param-rowCount">rowCount</span> |  |
| <span id="slot-header-param-columnCount">columnCount</span> |  |
| <span id="slot-header-param-field">field</span> |  |
| <span id="slot-header-param-isTableLayout">isTableLayout</span> |  |
| <span id="slot-header-param-isCardLayout">isCardLayout</span> |  |
| <span id="slot-header-param-dataCardHeader">dataCardHeader</span> |  |

### `value` {#slot-value}

Scoped slot.

#### Bindings

| Name | Description |
| --- | --- |
| <span id="slot-value-param-key">key</span> |  |
| <span id="slot-value-param-calculatedObj">calculatedObj</span> |  |
| <span id="slot-value-param-columnIndex">columnIndex</span> |  |
| <span id="slot-value-param-field">field</span> |  |
| <span id="slot-value-param-formatted">formatted</span> |  |
| <span id="slot-value-param-isTableLayout">isTableLayout</span> |  |
| <span id="slot-value-param-isCardLayout">isCardLayout</span> |  |
| <span id="slot-value-param-obj">obj</span> |  |
| <span id="slot-value-param-pk">pk</span> |  |
| <span id="slot-value-param-pkKey">pkKey</span> |  |
| <span id="slot-value-param-relatedObj">relatedObj</span> |  |
| <span id="slot-value-param-rowIndex">rowIndex</span> |  |
| <span id="slot-value-param-rowCount">rowCount</span> |  |
| <span id="slot-value-param-columnCount">columnCount</span> |  |
| <span id="slot-value-param-value">value</span> |  |

## Source

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