Table

Quick Preview

Buyer	Status	Budget
Ada Okafor	Approved	₦85m
Nnamdi Kalu	Review	₦64m

Composition

Use this public composition when building Table:

Table
├── TableHeader
│   └── TableRow
│       └── TableHead
└── TableBody
    └── TableRow
        └── TableCell

Usage

<Table><TableHeader><TableRow><TableHead>Name</TableHead></TableRow></TableHeader><TableBody><TableRow><TableCell>Ada</TableCell></TableRow></TableBody></Table>

Examples

Default Table

Use this as the starting point for Table. Keep product data, routing, fetching, and authorization logic in the consuming app.

Buyer	Status	Budget
Ada Okafor	Approved	₦85m
Nnamdi Kalu	Review	₦64m

Columns keep whatever width you give them (here via table-fixed and per-column widths). Cells wrap long content within that width instead of overflowing into the next column, so nothing overlaps. Truncation is left to you — add truncate to a cell's own content when you want a single line with an ellipsis, as the Estate column does below.

Address (wraps)	Price	Estate (truncated)
No 5A Beta Glass Road, Ohaukwu	₦100,000,000	Delta State
Wisdom Estate, Behind BG Musa Station, Nasarawa State, Central Business District	₦75,000,000	Nasarawa State, Central Business District
No 23 Joseph Waku Street, Asokoro	₦78,000,000	Asokoro

Props

Prop/API	Type	Default	Description
`containerClassName`	`string`	-	Styles the scroll container around the table.
`sticky` on TableHeader	`boolean`	`false`	Pins the header while scrolling.
`pinned` on TableCell	`boolean`	`false`	Keeps a cell sticky with opaque background.
`className`	`string`	-	Local layout or spacing overrides.
native/root props	React component props	-	Passed through to the underlying root or primitive.

Accessibility

Preserve the documented Table composition so labels, triggers, content, and controls remain connected.
Provide visible labels or accessible names for interactive controls.
Preserve the component-provided focus, keyboard, disabled, and invalid-state behavior.
Do not communicate state with color alone; include text, icons, or helper copy.