shadcn.io is not affiliated with official shadcn/ui
Framework
UI library
Radix UI does not include this primitive, so this page uses the Ark UI component. The visuals match the Ark UI version.
PropType
Allow more than one row to be expanded.
Default
trueInstallation
bunx --bun shadcn@latest add https://kit.dev/r/radix/type-table.jsonUsage
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
| Key | Description |
|---|---|
Enter | Activate the focused control. |
Space | Activate the focused control. |
ArrowDown | Move to the next item when orientation is "vertical". |
ArrowUp | Move to the previous item when orientation is "vertical". |
ArrowRight | Move to the next item. |
ArrowLeft | Move to the previous item. |
Home | Move to the first item. |
End | Move to the last item. |
Demos
Controlled
Deprecated
Disabled
Optional
Single
Size Compact
API Reference
TypeTable
PropType
AttributeType
TypeTableItem
PropType
AttributeType