Property list

A PropertyList shows key and value pairs. Use it in inspectors, detail panels and summaries.

Usage#

import { PropertyList, PropertyListItem } from "@clawscale/react";

<PropertyList>
  <PropertyListItem label="Owner">data-platform</PropertyListItem>
</PropertyList>

Examples#

Horizontal#

The default layout puts each label beside its value. labelWidth sets the label column, 120px by default. Long labels truncate and long values wrap.

Pipeline: orders-sync
Schedule: Every 15 minutes
Region: eu-central-1
Owner: data-platform
Last run: Succeeded at 14:05 UTC in 4m 12s

patterns/property-list/horizontal.tsx

import { PropertyList, PropertyListItem } from "@clawscale/react";

export default function PropertyListHorizontal() {
  return (
    <PropertyList style={{ width: 360 }}>
      <PropertyListItem label="Pipeline">orders-sync</PropertyListItem>
      <PropertyListItem label="Schedule">Every 15 minutes</PropertyListItem>
      <PropertyListItem label="Region">eu-central-1</PropertyListItem>
      <PropertyListItem label="Owner">data-platform</PropertyListItem>
      <PropertyListItem label="Last run">Succeeded at 14:05 UTC in 4m 12s</PropertyListItem>
    </PropertyList>
  );
}

Vertical#

layout="vertical" stacks each label above its value. Use it in narrow side panels.

Dataset: analytics.events_daily
Rows: 1,284,902,113
Size: 412 GB
Partitioned by: event_date

patterns/property-list/vertical.tsx

import { PropertyList, PropertyListItem } from "@clawscale/react";

export default function PropertyListVertical() {
  return (
    <PropertyList layout="vertical" style={{ width: 220 }}>
      <PropertyListItem label="Dataset">analytics.events_daily</PropertyListItem>
      <PropertyListItem label="Rows">1,284,902,113</PropertyListItem>
      <PropertyListItem label="Size">412 GB</PropertyListItem>
      <PropertyListItem label="Partitioned by">event_date</PropertyListItem>
    </PropertyList>
  );
}

Compact#

compact tightens the rows for inspectors and dense panels.

Region: eu-central-1
Workers: 12 of 16
CPU: 64%
Memory: 41.2 of 64 GB
Uptime: 18d 4h
Version: 2.14.0

patterns/property-list/compact.tsx

import { PropertyList, PropertyListItem } from "@clawscale/react";

export default function PropertyListCompact() {
  return (
    <PropertyList compact labelWidth={96} style={{ width: 300 }}>
      <PropertyListItem label="Region">eu-central-1</PropertyListItem>
      <PropertyListItem label="Workers">12 of 16</PropertyListItem>
      <PropertyListItem label="CPU">64%</PropertyListItem>
      <PropertyListItem label="Memory">41.2 of 64 GB</PropertyListItem>
      <PropertyListItem label="Uptime">18d 4h</PropertyListItem>
      <PropertyListItem label="Version">2.14.0</PropertyListItem>
    </PropertyList>
  );
}

Striped#

striped shades every other row instead of drawing dividers. It helps the eye across wide panels.

Rows read: 48,210,554
Rows written: 48,209,907
Rows rejected: 647
Bytes scanned: 96.4 GB
Duration: 11m 03s

patterns/property-list/striped.tsx

import { PropertyList, PropertyListItem } from "@clawscale/react";

export default function PropertyListStriped() {
  return (
    <PropertyList striped labelWidth={140} style={{ width: 420 }}>
      <PropertyListItem label="Rows read">48,210,554</PropertyListItem>
      <PropertyListItem label="Rows written">48,209,907</PropertyListItem>
      <PropertyListItem label="Rows rejected">647</PropertyListItem>
      <PropertyListItem label="Bytes scanned">96.4 GB</PropertyListItem>
      <PropertyListItem label="Duration">11m 03s</PropertyListItem>
    </PropertyList>
  );
}

Monospace values#

monospace on an item sets its value in the monospace font. Use it for IDs, hashes and image tags.

Run ID: run_8f2c91d4
Commit: 3f9a2c1e
Image: ghcr.io/acme/ingest:2.14.0
Trace ID: 4bf92f3577b34da6a3ce929d0e0e4736
Triggered by: Schedule

patterns/property-list/monospace.tsx

import { PropertyList, PropertyListItem } from "@clawscale/react";

export default function PropertyListMonospace() {
  return (
    <PropertyList style={{ width: 400 }}>
      <PropertyListItem label="Run ID" monospace>
        run_8f2c91d4
      </PropertyListItem>
      <PropertyListItem label="Commit" monospace>
        3f9a2c1e
      </PropertyListItem>
      <PropertyListItem label="Image" monospace>
        ghcr.io/acme/ingest:2.14.0
      </PropertyListItem>
      <PropertyListItem label="Trace ID" monospace>
        4bf92f3577b34da6a3ce929d0e0e4736
      </PropertyListItem>
      <PropertyListItem label="Triggered by">Schedule</PropertyListItem>
    </PropertyList>
  );
}

Inspector#

Put compact lists in a Section to build an inspector. Each SectionCard holds one group of properties.

orders-sync

Pipeline

Status: Healthy
Schedule: Every 15 minutes
Region: eu-central-1
Owner: data-platform

Last run: run_8f2c91d4
Duration: 4m 12s
Rows written: 48,209,907

patterns/property-list/inspector.tsx

import { Button, PropertyList, PropertyListItem, Section, SectionCard, Tag } from "@clawscale/react";

export default function PropertyListInspector() {
  return (
    <Section
      compact
      icon="data-connection"
      title="orders-sync"
      subtitle="Pipeline"
      rightElement={<Button variant="minimal" size="small" icon="cross" aria-label="Close inspector" />}
      style={{ width: 320 }}
    >
      <SectionCard>
        <PropertyList compact labelWidth={96}>
          <PropertyListItem label="Status">
            <Tag minimal intent="success">
              Healthy
            </Tag>
          </PropertyListItem>
          <PropertyListItem label="Schedule">Every 15 minutes</PropertyListItem>
          <PropertyListItem label="Region">eu-central-1</PropertyListItem>
          <PropertyListItem label="Owner">data-platform</PropertyListItem>
        </PropertyList>
      </SectionCard>
      <SectionCard>
        <PropertyList compact labelWidth={96}>
          <PropertyListItem label="Last run" monospace>
            run_8f2c91d4
          </PropertyListItem>
          <PropertyListItem label="Duration">4m 12s</PropertyListItem>
          <PropertyListItem label="Rows written">48,209,907</PropertyListItem>
        </PropertyList>
      </SectionCard>
    </Section>
  );
}

Props interface#

PropertyList renders a dl and accepts its HTML attributes. Each PropertyListItem renders a div that wraps a dt and a dd.

interface PropertyListProps extends HTMLAttributes<HTMLDListElement>@clawscale/react

Props	Description
`compact`	`boolean` Tighter rows for inspectors and side panels.
`labelWidth`	`number \| string` = `120` Width of the label column in the horizontal layout.
`layout`	`"horizontal" \| "vertical"` = `"horizontal"` "horizontal" puts each label beside its value. "vertical" stacks them.
`striped`	`boolean` Alternate row backgrounds.

interface PropertyListItemProps extends Omit<HTMLAttributes<HTMLDivElement>, "children">@clawscale/react

Props	Description
`children`	`ReactNode` The property value.
`label`required	`ReactNode` The property name.
`monospace`	`boolean` Render the value in the monospace font, for IDs and hashes.