CmDataTable
Use como tabela padrão de back-office, com colunas tipadas e configuração de visibilidade quando `tableKey` é usado. Por padrão ordena e pagina o array no cliente; ative o modo server-side para delegar ao backend.
Import
import { CmDataTable, type CmDataTableSort } from "cosmemilton-ui/client";Tabela de pedidos
Pedidos recentes
Ordene colunas e navegue pela paginação.
| Pedido | Cliente | Status | Total |
|---|---|---|---|
| 1048 | Acme Ltda. | Pago | R$ 1.280,00 |
| 1049 | Aurora Foods | Pendente | R$ 940,00 |
Linhas por página:1-2 de 3 Página 1 de 2 | |||
Recursos combinados: colunas configuráveis + painel de detalhes
tableKey liga o menu "Colunas" (Observações começa oculta; Nº nunca pode ser ocultada). O switch na toolbar ativa o painel de detalhes: clique em uma linha para abri-lo, clique de novo para desmarcar.
Vistorias
Escolha as colunas no botão "Colunas"; com o painel ligado, clique em uma linha para ver os detalhes.
| Nº | Imóvel | Vistoriador | Status | Data | |
|---|---|---|---|---|---|
| 1027 | Imóvel B-127 | Diego | Pendente | 27/03/2026 | |
| 1026 | Imóvel A-126 | Carla | Concluída | 26/03/2026 | |
| 1025 | Imóvel Z-125 | Bruno | Em andamento | 25/03/2026 | |
| 1024 | Imóvel Y-124 | Ana | Pendente | 24/03/2026 | |
| 1023 | Imóvel X-123 | Diego | Concluída | 23/03/2026 | |
Linhas por página:1-5 de 7 Página 1 de 2 | |||||
Server-side (paginação e sort no backend)
manualSorting + manualPagination + totalRows + loading, com page/rowsPerPage/sort controlados. Busca simulada de 600 ms.
Vistorias (server-side)
Ordenação e paginação resolvidas a cada busca simulada (600 ms).
Carregando…
API rápida
Props principais de cada peça exportada.
CmDataTable
Seleção e painel de detalhe
CmDataTableColumn
Server-side / controlado
CmDataTableActions
Notas
Modo padrão (client-side): a tabela ordena e recorta `data` sozinha.
Modo server-side: ative `manualSorting` + `manualPagination`, informe `totalRows` e `loading`, e controle `page`/`rowsPerPage`/`sortKey`/`sortDirection`. `data` passa a ser apenas a página atual; `onSortChange` emite `CmDataTableSort`.
Visibilidade de colunas: informar `tableKey` exibe o botão "Colunas" no cabeçalho e persiste a escolha do usuário (via useTablePreference). Na coluna, `hideable: false` a remove do menu (ex.: chave/ações) e `defaultHidden: true` a deixa oculta até o usuário ativá-la.
Painel de detalhe: use `selectedRowKey` + `onRowClick` para seleção controlada; o painel lateral só aparece quando `detailPanelEnabled` e `renderSelectedRowDetail` são passados. `detailEmptyMessage` cobre o estado sem seleção e `detailPanelWidth` controla a largura.