| title | Table |
|---|---|
| parent | Display and data |
| grand_parent | Components |
{: .no_toc }
Columns with headers, responsive by dropping the least important.
import { Table } from '@textui/widgets';
<Table
columns={[
{ key: 'name', header: 'NAME', width: 18 },
{ key: 'status', header: 'STATUS', width: 10, priority: 90 },
{ key: 'cpu', header: 'CPU', width: 7, align: 'right', priority: 40 },
]}
rows={[{ name: 'api', status: 'healthy', cpu: '2%' }]}
rowKey="name"
/>No props of its own.
Role: table.
Narrowing drops columns rather than squeezing them. As the space runs out the lowest priority goes first, and the first column never goes at all - a row you cannot identify is not a smaller row, it is a useless one.
A column with no stated priority inherits its position, so it never ties with one explicitly marked unimportant. Set responsive={false} to turn the whole behaviour off.
format renders a cell and tone colours it, both from the value and the whole row - which is how a latency column goes red past a threshold without the rows carrying presentation.
- List - one column, with a selection
- Pagination - for when the rows do not all arrive at once
- KeyValue - one record rather than many