DataTable

Tabela de dados completa com busca, ordenação por coluna e paginação client-side.

Instalação

npm install @dexcode-core/ui react-icons

Uso

import { DataTable } from '@dexcode-core/ui'
import type { DataTableColumn } from '@dexcode-core/ui'
 
type User = {
  id: number
  name: string
  email: string
  role: string
}
 
const columns: DataTableColumn<User>[] = [
  { header: 'Nome', accessorKey: 'name' },
  { header: 'E-mail', accessorKey: 'email' },
  {
    header: 'Perfil',
    accessorKey: 'role',
    align: 'center',
  },
]
 
const data: User[] = [
  { id: 1, name: 'João Silva', email: 'joao@empresa.com', role: 'Admin' },
  { id: 2, name: 'Maria Souza', email: 'maria@empresa.com', role: 'Usuário' },
]
 
export default function Example() {
  return (
    <DataTable
      data={data}
      columns={columns}
      buttonName="Novo usuário"
      onButtonClick={() => console.log('novo usuário')}
    />
  )
}

Coluna com célula customizada

Use cell para renderizar conteúdo customizado (badges, ações, formatação):

const columns: DataTableColumn<User>[] = [
  { header: 'Nome', accessorKey: 'name' },
  {
    header: 'Perfil',
    accessorKey: 'role',
    cell: (row) => (
      <span className="rounded-full bg-blue-100 px-2 py-0.5 text-xs text-blue-700">
        {row.role}
      </span>
    ),
  },
  {
    header: 'Ações',
    sortable: false,
    align: 'right',
    cell: (row) => <button onClick={() => editUser(row)}>Editar</button>,
  },
]

Estado de carregamento

<DataTable data={data} columns={columns} loading={isFetching} />

Enquanto loading for true, a tabela exibe linhas de skeleton no lugar dos dados.

Busca restrita a colunas específicas

Por padrão a busca considera todas as chaves do primeiro registro. Use searchKeys para restringir:

<DataTable data={data} columns={columns} searchKeys={['name', 'email']} />

Slot customizado na toolbar

<DataTable
  data={data}
  columns={columns}
  toolbarSlot={<button>Exportar CSV</button>}
/>

Props

Prop	Tipo	Padrão	Descrição
`data`	`T[]`	—	Lista de registros a exibir
`columns`	`DataTableColumn<T>[]`	—	Definição das colunas
`buttonName`	`string`	—	Texto do botão de ação exibido na toolbar
`onButtonClick`	`() => void`	—	Handler do botão de ação (exibido junto com `buttonName`)
`loading`	`boolean`	`false`	Exibe skeleton nas linhas e no rodapé
`searchKeys`	`string[]`	todas as chaves do 1º registro	Chaves usadas pela busca (suporta paths como `"endereco.cidade"`)
`toolbarSlot`	`ReactNode`	—	Conteúdo extra renderizado na toolbar, ao lado da busca

Tipo — DataTableColumn

Prop	Tipo	Padrão	Descrição
`header`	`string`	—	Texto do cabeçalho da coluna
`accessorKey`	`string`	—	Caminho do valor no objeto da linha (suporta `"a.b.c"`)
`accessorFn`	`(row: T) => ReactNode`	—	Função para derivar o conteúdo a partir da linha
`cell`	`(row: T) => ReactNode`	—	Renderização customizada da célula (tem prioridade sobre `accessorFn`/`accessorKey`)
`align`	`'left' \| 'center' \| 'right'`	`'left'`	Alinhamento do conteúdo da coluna
`sortable`	`boolean`	`true` quando há `accessorKey`	Habilita ordenação por clique no cabeçalho

Loading AppLayout