Carregando…

Data Grid

Data

Lightweight data grid with sorting, row selection, sticky header and custom cell renderers.

Instalação via CLI

$ npx kikitocn add data-grid

Interno:

@/lib/utils

Exemplo de uso

Data GridExample.tsx

import { DataGrid } from "@/components/ui/cn/data-grid/DataGrid";

export function DataGridExample() {
  return (
    <DataGrid />
  );
}

Props

Prop	Tipo	Padrão	Descrição
`columns*`	`DataGridColumn[]`	—	Definição das colunas: { key, header, width?, sortable?, render?, align? }
`rows*`	`T[]`	—	Array de registros
`getRowKey`	`(row: T, index: number) => string`	`undefined`	Função para obter chave única por linha
`selectable`	`boolean`	`false`	Habilita checkboxes de seleção por linha
`selectedKeys`	`string[]`	`undefined`	Chaves das linhas selecionadas (controlled)
`onSelectionChange`	`(keys: string[]) => void`	`undefined`	Callback quando a seleção muda
`stickyHeader`	`boolean`	`false`	Fixa o cabeçalho ao rolar
`striped`	`boolean`	`false`	Alterna cor de fundo nas linhas

Carregando…