Carregando…

Data Table

Data

Feature-rich table with sorting, filtering, pagination, selection, sticky header and grid/list/tree modes.

Data Grid

Unificado

Unificado

Unificado

Instalação via CLI

$ npx kikitocn add table

Interno:

@/lib/utils

Exemplo de uso

Data TableExample.tsx

import { DataTable } from "@/components/ui/cn/table/DataTable";

export function DataTableExample() {
  return (
    <DataTable />
  );
}

Props

Prop	Tipo	Padrão	Descrição
`variant`	`'table' \| 'grid' \| 'list' \| 'tree'`	`'table'`	Seleciona o renderizador: 'table' (completo), 'grid' (DataGrid leve), 'list' (definition list/cards) ou 'tree' (linhas hierárquicas)
`rows`	`T[] \| TreeTableRow<T>[]`	`undefined`	Registros das variantes 'grid' e 'tree' (substitui `data` nessas variantes)
`items`	`DataListItem[]`	`undefined`	variant='list': itens { label, value, span? }
`layout`	`'horizontal' \| 'vertical' \| 'grid'`	`'horizontal'`	variant='list': disposição dos itens
`defaultExpanded`	`boolean`	`false`	variant='tree': expande todas as linhas por padrão
`columns*`	`ColumnDef<TRow>[]`	—	Definição das colunas: { key, header, cell?, sortable?, filterable?, align?, ... }
`data*`	`TRow[]`	—	Array de registros a exibir
`selectable`	`boolean`	`false`	Habilita checkboxes de seleção por linha
`defaultPageSize`	`number`	`10`	Número de linhas por página inicial
`pageSizeOptions`	`number[]`	`[10, 25, 50]`	Opções de tamanho de página
`stickyHeader`	`boolean`	`false`	Fixa o cabeçalho ao rolar
`striped`	`boolean`	`false`	Alterna cor de fundo nas linhas
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Densidade das linhas
`loading`	`boolean`	`false`	Exibe estado de carregamento
`emptyMessage`	`string`	`undefined`	Mensagem quando não há dados
`onRowClick`	`(row: TRow) => void`	`undefined`	Callback ao clicar em uma linha

Carregando…

Name	Role	Status	Joined
Alice Chen	Developer	Active	2023-01-15
Bob Tanaka	Designer	Active	2023-03-22
Carol Wright	Developer	Inactive	2022-11-08
Dan Müller	Designer	Active	2024-02-01

Name	Role	Status	Joined
Alice Chen	Developer	Active	2023-01-15
Bob Tanaka	Designer	Active	2023-03-22
Carol Wright	Developer	Inactive	2022-11-08
Dan Müller	Designer	Active	2024-02-01