Table presents complex tabular data in an easy-to-scan way.
To implement the Table component, you need to import it first:
import { Table } from '@react-ui-org/react-ui';
And use it:
See API for all available options.
Keep headers short so users can quickly scan the content of the table. Just one or two words should be enough.
Tables are good for displaying complex tabular data. For simpler data sets or even plain key-value pairs, consider using the Grid component.
Tables make lots of information easier to scan and compare. If you have fewer sections and want to emphasize each group more, consider using Cards.
The easiest way to make tables responsive is to wrap them with the ScrollView component in the horizontal mode.
The Table supports sorting indicators by adding a simple configuration.
⚠️ The Table component only provides necessary visual support for sorting. Aside from icons, you must provide the comparing functionality yourself if you aren't rendering already sorted data. The reason for this decision is that client often does not have access to the full dataset.
The following is an example of custom sorting function executed on the client.
In addition to the options below in the component's API section, you
can specify React synthetic events or any HTML attribute you like. All
attributes that don't interfere with the API are forwarded to the <table> HTML
element. This enables making the component interactive and helps to improve its
accessibility.
👉 Refer to the MDN reference for the full list of supported attributes of the table element.
| Prop name | Type | Default | Required | Description |
|---|---|---|---|---|
| columns | Array<{
"format": "Function",
"isSortable": "Boolean",
"label": "string",
"name": "string"
}> | — | true | Table data columns, optionally sortable. The |
| id | string | undefined | false | ID of the root HTML element. It also serves as base for nested elements:
|
| rows | Array<{}> | — | true | Table data rows, each object key must match a column |
| sort | {
"ascendingIcon": "node",
"column": "string",
"descendingIcon": "node",
"direction": "'asc' │ 'desc'",
"onClick": "Function"
} | null | false | Sorting configuration required to make columns sortable. |