Backoffice
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.
Everything wraps onto more lines on a narrow screen; the search keeps at least 200 px.
<TableToolbar search={<SearchField aria-label="Buscar clientes" />} segments={<SegmentGroup …/>} filters={<FilterSelect …/>} columns={<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 / Table Toolbar
boolean
string
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 | Filtered |
|---|---|
Todos24Ativas9Em atraso3 | Todos24Ativas9Em atraso3 |
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 |
|---|---|---|---|
| search? | ReactNode | — | The search typed in place (SearchField). |
| segments? | ReactNode | — | Figma "showSegments": a SegmentGroup. |
| filters? | ReactNode | — | Filter Selects (one or more). |
| columns? | ReactNode | — | Figma "showColumns": the ColumnsButton, pushed to the row's end. |
| chips? | ReactNode | — | Figma "showChips" (State=Filtered): the applied Filter Chips. |
| clear? | ReactNode | — | After the chips: the "Limpar" link-button that clears them. |
| className? | string | — |