DataTable
Playground
Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.
Backoffice / Table Header Cell
| Lotação |
|---|
Variantes, tamanhos e estados
Cada célula é o componente real, marcada com a variante do Figma que reproduz (passe o mouse pra ver o node).
Sort · None
| Align | Default | Hover | Focus | |
|---|---|---|---|---|
| Start |
| |||
| End |
|
Sort · Sortable
| Align | Default | Hover | Focus | |||
|---|---|---|---|---|---|---|
| Start | ||||||
| End |
Sort · Ascending
| Align | Default | Hover | Focus | |
|---|---|---|---|---|
| Start | ||||
| End |
Sort · Descending
| Align | Default | Hover | Focus | |
|---|---|---|---|---|
| Start | ||||
| End |
Props
As props que o arquivo do DS declara. O componente também repassa as do primitivo (base-ui), quando ele tem um.
DataTableRootProps
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| cardClassName? | string | — | Classes of the card that scrolls (the table's own className styles the table). |
| className? | string | — |
DataTableHeadProps
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| sort? | SortDirection | — | Figma "Sort": omit for a plain header; "none" = sortable, not sorted. |
| align? | "end" | "start" | "start" | Figma "Align": End for numbers (money, counts). |
| onSort? | (() => void) | — | Toggles the sort; makes the label a button. |
| className? | string | — | |
| children? | ReactNode | — |
DataTableRowProps
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| selected? | boolean | null | false | |
| attention? | boolean | null | false | |
| onOpen? | (() => void) | — | Opens the row (its detail): the row takes clicks and Enter. Give the row's first cell a link too when the detail is a page. |
| onKeyDown? | React.KeyboardEventHandler<HTMLTableRowElement> | — | |
| className? | string | — |
DataTableCellProps
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| type? | "actions" | "custom" | "money" | "mono" | "muted" | "status" | "strong" | "text" | "time" | "two-line" | null | "text" | |
| secondary? | ReactNode | — | Figma "secondary": the second line of a Two-line cell (an e-mail, a uid). |
| className? | string | — | |
| children? | ReactNode | — |
DataTableSelectProps
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| header? | boolean | false | Header cell (`<th>`) instead of a body cell. |
| indeterminate? | boolean | false | Some rows selected (header only). |
| className? | string | — |
ColumnsButton
Shows or hides table columns (Figma "Backoffice / Columns Button" 2079:10330, from the shipped data-table/columns-menu.tsx): a 32 px outline trigger with the columns icon, opening a checklist.
TableToolbar
The row above a table (Figma "Backoffice / Table Toolbar" 2056:57424, 36 px): search, segments, filters and the columns button; State=Filtered adds a second row of applied chips.