Table
Table views are used to display data in a tabular format. They are useful for displaying large amounts of data in a structured way.
Powered by
Installation
npx kibo-ui@latest add table
Features
- Customizable columns
- Sortable columns
Examples
Simple version
Props
The Table component is made up of the following subcomponents:
TableProvider
The TableProvider component is the root component of the Table. It contains the context for the other components.
| Prop | Type | Default |
|---|---|---|
columns | ColumnDef<TData, TValue>[] | - |
data | TData[] | - |
children | ReactNode | - |
className | string | - |
TableHeader
The TableHeader component is a container for the column headers of the Table.
| Prop | Type | Default |
|---|---|---|
className | string | - |
children | (props: { headerGroup: HeaderGroup<unknown>; }) => ReactNode | - |
TableHeaderGroup
The TableHeaderGroup component is a container for the column headers of the Table.
| Prop | Type | Default |
|---|---|---|
headerGroup | HeaderGroup<unknown> | - |
children | (props: { header: Header<unknown, unknown>; }) => ReactNode | - |
TableHead
The TableHead component is a single column header in the Table.
| Prop | Type | Default |
|---|---|---|
header | Header<unknown, unknown> | - |
className | string | - |
TableBody
The TableBody component is a container for the rows of the Table.
| Prop | Type | Default |
|---|---|---|
children | (props: { row: Row<unknown>; }) => ReactNode | - |
className | string | - |
TableRow
The TableRow component is a single row in the Table.
| Prop | Type | Default |
|---|---|---|
row | Row<unknown> | - |
children | (props: { cell: Cell<unknown, unknown>; }) => ReactNode | - |
className | string | - |
TableCell
The TableCell component is a single cell in the Table.
| Prop | Type | Default |
|---|---|---|
cell | Cell<unknown, unknown> | - |
className | string | - |