Data displayGenerated from the public API

DataDetails

A definition list for a record, ready for the detail pane of a table.

@luc/ui/data

Examples

Default

The rows behind a surface, one control away, without pushing the page down.

<DataDetails title="Close, eight sessions" description="The exact rows behind the chart." size="md">
  <table className="w-full text-caption tabular-nums">
    <thead>
      <tr className="text-left text-fg-muted">
        <th scope="col">Date</th>
        <th scope="col">Close</th>
      </tr>
    </thead>
    <tbody>
      {rows.map((row) => (
        <tr key={row.date} className="border-t border-line-subtle">
          <td>{row.date}</td>
          <td>{row.close.toFixed(1)}</td>
        </tr>
      ))}
    </tbody>
  </table>
</DataDetails>

Usage

import { DataDetails } from "@luc/ui/data";

<DataDetails
  title="Close, eight sessions"
  description="The exact rows behind the chart."
>
  <table>{/* rows */}</table>
</DataDetails>

Package setup — peer requirements, the stylesheet and the provider — is on installation.

API

Read from the published TypeScript API, so a prop that is not listed here does not exist and a default that is listed is the one the compiler sees.

Exported symbols
Export	Kind	Signature
`DataDetails`	7 documented props	`({ title, description, children, label, size, className, slot, }: DataDetailsProps) => import("@types/react").JSX.Element`

DataDetails props

Type: DataDetailsProps

Values the compiler reads from the declaration.

DataDetails props
Prop	Type	Default	Notes
`children`	`ReactNode`	`—`	The exact rows, rendered by the caller (usually a table).
`className?`	`string \| undefined`	`—`
`description?`	`string \| undefined`	`—`	One line naming what the rows are and where they came from.
`label?`	`string \| undefined`	`—`	Trigger text. Default `Data`.
`size?`	`"sm" \| "md" \| "lg" \| "xl" \| "full" \| undefined`	`—`	Panel size on the anchored edge. Default `xl`.
`slot?`	`string \| undefined`	`—`	Extra hook for QA selectors; rendered on the trigger wrapper.
`title`	`string`	`—`	Panel heading — name the dataset, e.g. "Rolling 30-day return".

Guidelines

Put the rows behind a figure here rather than under it, so the page does not double in height.
Write `title` as the question the rows answer, and keep `description` to one line.

Don't

Use it for content a reader needs before the summary; everything inside a disclosure starts closed.

Accessibility

The trigger is a real button with `aria-expanded` and `aria-controls`. The panel keeps its heading, and a table inside keeps its own caption and column headers.

Family

Data display

Dense, sortable, scannable: the surfaces a real product reads numbers from.

17 documented entries in this family. Open the family index