Components · Data Display
Table
StableSince v0.0.1
Semantic HTML table with styled variants.
import { Table } from '@nexub/react';Examples
Default
With caption
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| Table.Root striped | boolean | false | Applies alternating row background colours. |
| Table.Root bordered | boolean | false | Adds borders between rows and columns. |
| Table.Root hoverable | boolean | false | Highlights rows on mouse hover. |
| Table.Root stickyHeader | boolean | false | Fixes the table header to the top when scrolling inside a scrollable container. |
| Table.Head align | 'start' | 'center' | 'end' | 'start' | Text alignment within the header cell. |
| Table.Cell align | 'start' | 'center' | 'end' | 'start' | Text alignment within the data cell. |
| Table.Caption side | 'top' | 'bottom' | 'bottom' | Whether the caption appears above or below the table. |
On iOS & Android
Web only
Table has no @nexub/react-native twin. On phones, follow the platform pattern instead, or compose it from the native components listed on the React Native page.