Backoffice
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.
The table owns visibility; this only reports the toggle.
<ColumnsButton menuLabel="Colunas visíveis" columns={cols} onVisibleChange={(id, v) => table.getColumn(id)?.toggleVisibility(v)}>Colunas</ColumnsButton>Playground
Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.
Backoffice / Columns Button
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).
| Default | Hover | Focus |
|---|---|---|
Props
As props que o arquivo do DS declara. O componente também repassa as do primitivo (base-ui), quando ele tem um.
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| children | ReactNode | — | The visible label, "Colunas" (Figma "label"). |
| menuLabel | string | — | The heading inside the menu, "Colunas visíveis". |
| columns | ColumnChoice[] | — | Only the columns that can be hidden. |
| onVisibleChange | (id: string, visible: boolean) => void | — | |
| open? | boolean | — | |
| defaultOpen? | boolean | — | |
| onOpenChange? | ((open: boolean) => void) | — | |
| className? | string | — |