A structured data display component with customizable rows, headers, dividers, compact mode, contained style, and RTL support.
Loading demo: structuredlist-real-world
npx sdaia-ui@latest add structuredlist
import { StructuredList } from "@/components/ui/structured-list"<StructuredList />The default structured list with row and column dividers in LTR layout.
Loading demo: structuredlist-default
Use `contained={true}` to add a border around the entire list.
Loading demo: structuredlist-contained
Use `compact={true}` to reduce row height for dense data display.
Loading demo: structuredlist-compact
Set `dividerRow={false}` and `dividerColumn={false}` to remove dividers.
Loading demo: structuredlist-no-dividers
Structured List short description
Prop | Type | Default | Required |
|---|---|---|---|
columns | StructuredListColumn[] | — | required |
compact | boolean | false | optional |
contained | boolean | false | optional |
dividerRow | boolean | true | optional |
dividerColumn | boolean | true | optional |
dividerHeader | boolean | true | optional |
rtl | boolean | false | optional |
className | string | — | optional |