Data Table
Tabela de dados completa com busca, filtros, seleção, paginação e ações por linha. Usado no Command Center e portais. Construído sobre TanStack Table.
import { DataTable } from "@workspace/ui/components/data-table";
<DataTable
columns={columns}
data={consultants}
searchKey="name"
searchPlaceholder="Buscar por nome"
filters={[
{ columnId: "plan", title: "Plano", options: [...] },
{ columnId: "status", title: "Status", options: [...] },
]}
showPagination
pageSize={20}
/>Data Table (Figma)
Componente completo conforme Figma: título, toolbar de busca/filtros, tabela com checkbox e paginação.
Consultoras
AdicionarBuscar por nome
PlanoStatusEditar Colunas
Nome
Email
Telefone
Plano
Status
Vendedora
Criado
Rosilene Ferreira Neves
rosilenemarquesn@gmail.com
(21) 97988-1544
Master
Pré-cadastrada
Estefany Oliveira
06 de fev. de 2026 10:39
Maria Clara Santos
mariaclara@gmail.com
(11) 99876-5432
Plus
Ativa
Julia Silva
05 de fev. de 2026 14:22
Beatriz Oliveira
beatriz.oli@gmail.com
(85) 98765-4321
Start
Ativa
Carla Santos
04 de fev. de 2026 09:15
Ana Paula Carvalho
ana.paula@email.com
(86) 99123-4567
Master
Ativa
Estefany Oliveira
03 de fev. de 2026 16:48
Claudia Mendes
claudia.m@outlook.com
(31) 97654-3210
Plus
Pré-cadastrada
Julia Silva
02 de fev. de 2026 11:30
Fernanda Costa
fernanda.costa@gmail.com
(41) 98234-5678
Start
Ativa
Carla Santos
01 de fev. de 2026 08:45
Juliana Ribeiro
juliana.r@hotmail.com
(71) 99345-6789
Master
Ativa
Julia Silva
31 de jan. de 2026 17:12
Larissa Souza
larissa.souza@gmail.com
(61) 98456-7890
Plus
Ativa
Estefany Oliveira
30 de jan. de 2026 13:05
Patricia Lima
patricia.lima@email.com
(51) 97567-8901
Start
Pré-cadastrada
Carla Santos
29 de jan. de 2026 10:33
Renata Almeida
renata.almeida@gmail.com
(27) 98678-9012
Master
Ativa
Julia Silva
28 de jan. de 2026 15:50
Simone Pereira
simone.pereira@outlook.com
(48) 99789-0123
Plus
Ativa
Estefany Oliveira
27 de jan. de 2026 09:20
Vanessa Martins
vanessa.m@gmail.com
(19) 98890-1234
Start
Ativa
Carla Santos
26 de jan. de 2026 14:10
32 itens
AnteriorPróxima
Estrutura da página
Composição dos elementos que formam uma página com Data Table.
| Componente | Classe / Prop | Função |
|---|---|---|
PageHeader | título + botão primário | Título da página (text-xl font-semibold) e ação principal |
Toolbar (busca) | 236x19px / rounded / pl-8 | Campo de busca com ícone search e placeholder |
Toolbar (filtros) | border-dashed / popover | Botões de filtro facetado (Plano, Status) com borda tracejada |
Toolbar (colunas) | border-dashed / ml-auto | Botão para configurar visibilidade de colunas |
DataTable | TanStack Table + columns | Tabela com header, rows, checkbox, ações e sorting |
Paginação | count + prev/next | Contador de itens e navegação entre páginas |
Dimensões (Figma)
| Elemento | Dimensão | Detalhes |
|---|---|---|
| Área de conteúdo | 1119px (x=250 até 1369) | sidebar(191px) + content(1119px) + padding(130px) = 1440px |
| Título página | 27px height | text-xl font-semibold |
| Barra de busca | 236x19px / rounded | Ícone search 13px + placeholder 13px |
| Botões filtro | ~43-77px x 19px | Ícone 9px + label text / borda tracejada |
| Checkbox (header/row) | 8.4x8.4px | rounded-sm, primary quando checked |
| Avatar na row | 13x13px / circle | Ao lado do nome |
| Nome (row) | 14px text | Underline + ícone externo (9.6px) |
| Row height | ~29.8px | Separador horizontal entre rows |
| Ações (row) | 10.8px circle icon | more-horizontal-circle-02 |
| Paginação | "32 itens" + prev/next | Progress bar 748px abaixo da tabela |
Colunas padrão (Consultoras)
Colunas da tabela de consultoras no Figma. Cada tabela define suas próprias colunas via ColumnDef.
| Coluna | Posição Figma (x) | Conteúdo |
|---|---|---|
| Checkbox | 252px | Seleção de linha |
| Nome | 270px | Avatar + nome (underline link) + ícone externo |
| 469px | Texto simples | |
| Telefone | 683px | Formato (XX) XXXXX-XXXX |
| Plano | 824px | Start / Plus / Master |
| Status | 929px | Ativa / Pré-cadastrada |
| Vendedora | 1071px | Nome da vendedora responsável |
| Criado | 1207px | DD de MMM. de AAAA HH:MM |
| Ações | 1352px | Menu de ações (MoreHorizontal) |
API Reference
| Prop | Type | Default | Descrição |
|---|---|---|---|
columns | ColumnDef<TData, TValue>[] | — | Definição das colunas (TanStack Table) |
data | TData[] | — | Array de dados para a tabela |
searchKey | string | — | Chave da coluna para busca global |
searchPlaceholder | string | 'Buscar...' | Placeholder do campo de busca |
filters | Array<{ columnId, title, options }> | — | Filtros facetados (botões com popover) |
showPagination | boolean | true | Exibir controles de paginação |
pageSize | number | 10 | Itens por página |
renderGridItem | (row) => ReactNode | — | Quando fornecido, renderiza grid ao invés de tabela |
emptyMessage | string | 'Nenhum resultado encontrado.' | Mensagem quando não há dados |