Type Table for Solid

Each prop gets a row. The name and type stay visible, and the description opens with the row.

Use it for component props, not for records. For plain data, use a Table. In Solid, Ark UI expands each row, and the default and parameters stay inside it.

Installation

Anatomy

Usage

import { TypeTable, TypeTableItem } from "@/components/ui/type-table";

<TypeTable defaultValue={["multiple"]}>
  <TypeTableItem name="children" type="ReactNode">
    TypeTableItem rows.
  </TypeTableItem>
  <TypeTableItem defaultValue="true" name="multiple" optional type="boolean">
    Allow more than one row to be expanded.
  </TypeTableItem>
  <TypeTableItem name="value" optional type="string[]">
    Controlled expanded item values.
  </TypeTableItem>
  <TypeTableItem name="defaultValue" optional type="string[]">
    Uncontrolled expanded item values.
  </TypeTableItem>
  <TypeTableItem
    name="onValueChange"
    optional
    parameters={[{ description: "{ value: string[] }", name: "details" }]}
    returns="void"
    type="(details: { value: string[] }) => void"
  >
    Called when expanded items change.
  </TypeTableItem>
  <TypeTableItem name="disabled" optional type="boolean">
    Disable every row.
  </TypeTableItem>
  <TypeTableItem
    defaultValue='"default"'
    name="size"
    optional
    type='"default" | "compact"'
  >
    Row density.
  </TypeTableItem>
  <TypeTableItem name="className" optional type="string">
    Class names on the root.
  </TypeTableItem>
</TypeTable>

Accessibility

Demos

Controlled

The open rows are stored outside the table, and the line under it prints their names, or none when everything is collapsed. The value row starts open. Hold that list when another control must open a specific prop, or when you want to remember which rows the reader had open. defaultValue is enough for a row that should start open and then be left alone.

Deprecated

The open prop is struck through and marked deprecated, with a note to use value or defaultValue instead. The other rows are current. Mark a prop this way when it still has to be documented because old code passes it, but new code should not. Removing the row is better once you are sure nobody needs the migration hint.

Disabled

The disabled row cannot be expanded. The prop is set on that item, and the description says the row cannot be opened. Use it for a prop you want listed but not explained inline, or for a row that is not meaningful in the current context. Disabling the whole table locks every row, which is rarely what a docs page wants.

Optional

id is required and has no optional mark, while label and disabled are optional and disabled shows a default of false. The label's description says it falls back to id. Mark optional on anything a caller can omit, and put the default in defaultValue when there is one. A required prop with no default should look different, or people will assume they can skip it.

Single

multiple is false, so opening one row closes whichever row was open before. The value, disabled, and className props are the sample. Use a single open row when the descriptions are long and two of them would push the next prop off the screen. Leave the default, which allows several open rows, when readers compare props.

Size Compact

size compact tightens the rows, so a long prop list takes less vertical space. The sample is value, disabled with a default of false, and an optional className. Use the compact size in a narrow sidebar or under a heading that already has a lot of content. The default size is easier to read when the table is the main thing on the page.

FAQ

API Reference