Property Grid

Property Grid presents read-only record details as clear label and value pairs.

Usage

Pass display-ready label and value pairs to items . Format dates, currency and entity names before passing them in. Empty values display a muted dash placeholder, while numeric zero remains visible.

Property values are always rendered as plain text. Use List or Table when the content needs status badges or row actions.

Appearance: Light

Theme: Blue

Font: Zoho Puvi

Ticket ID #4831

Channel Email

Department Billing

Due date —

<script>
	import { PropertyGrid } from 'deskblocks';

	const items = [
		{ label: 'Ticket ID', value: '#4831' },
		{ label: 'Channel', value: 'Email' },
		{ label: 'Department', value: 'Billing' },
		{ label: 'Due date', value: null }
	];
</script>

<PropertyGrid {items} />

Two columns

Set columns={2} for a compact two-column layout. The grid returns to one column when its container is too narrow.

Appearance: Light

Theme: Blue

Font: Zoho Puvi

Account Zylker Corp

Plan Enterprise

Account owner Amelia Burrows

Renewal date 01 Mar 2027

Support tier Premium

Health score —

<PropertyGrid {items} columns={2} />

Props

`items`	`PropertyItem[]`	`[]`	Label and value pairs. Empty values display a muted dash placeholder.
`columns`	`1 \| 2`	`1`	Preferred column count. Two columns collapse to one in a narrow container.
`class`	`string`	undefined	Custom CSS class name for additional styling.

PropertyItem

`label`	`string`	Label displayed above the value.
`value`	`string \| number \| null`	Display-ready value. Empty values use a placeholder.

Events

None.