CmDataTable
Tabela com ordenação, paginação, seleção, ações e preferências de colunas.
Import
Caminho público recomendado para este componente.
import { useMemo, useState } from "react";
import {
CmBadge,
CmButton,
CmDataTable,
CmDataTableActions,
CmIcon,
CmIconBadge,
CmLabel,
CmRow,
CmSeparator,
CmStack,
CmSwitch,
CmText,
useTablePreference,
type CmDataTableColumn
} from "cosmemilton-ui";Comece com columns, data e rowKey. Isso já resolve a maioria das tabelas simples.
Adicione sortable, sortValue, defaultRowsPerPage e render quando a tabela precisar ser lida e ordenada como tela real.
Use tableKey para ativar Colunas visíveis. O componente persiste a preferência em cm-table:{tableKey}; use useTablePreference quando quiser exibir resumo ou restaurar colunas fora do modal.
Use hideable={false} para colunas essenciais como Ações.
Use selectedRowKey e onRowClick para seleção controlada. O painel lateral só aparece quando detailPanelEnabled e renderSelectedRowDetail são passados.
detailBridge desenha a conexão visual entre linha e painel; detailPanelWidth ajusta a largura do card lateral.
1. Uso básico
Para quando você só precisa listar dados com células customizadas. Sem estado extra, sem preferências, sem painel.
| Cliente | Serviço | Valor |
|---|---|---|
| Clara Martins | Mensalidade maio/2026 | R$ 820,00 |
| Theo Santos | Material didático | R$ 345,00 |
| Sofia Nunes | Transporte escolar | R$ 260,00 |
| Pedro Lima | Atividade extra | R$ 150,00 |
2. Colunas visíveis e preferências
Use tableKey para habilitar o modal Colunas visíveis. O hook lê a mesma preferência para exibir o resumo e restaurar defaults.
Cobranças
Preferência salva em cm-table:cmui-financeiro-cobrancas-avancado
| Cliente | Serviço | Status | Valor | Vencimento | |
|---|---|---|---|---|---|
| Clara Martins | Mensalidade maio/2026 | Pago | R$ 820,00 | 05/05/2026 | |
| Lia Costa | Uniforme escolar | Aberto | R$ 189,90 | 25/05/2026 | |
| Miguel Rocha | Integral | Pago | R$ 980,00 | 30/05/2026 | |
| Pedro Lima | Atividade extra | Atrasado | R$ 150,00 | 08/05/2026 | |
| Sofia Nunes | Transporte escolar | Pago | R$ 260,00 | 15/05/2026 | |
Linhas por página:1-5 de 6 Página 1 de 2 | |||||
3. Uso completo com ações e painel lateral
Exemplo próximo de tela real: ações CRUD por linha, seleção controlada e painel lateral sincronizado com a linha selecionada.
Cobranças
Preferência salva em cm-table:cmui-financeiro-cobrancas-full
| Cliente | Serviço | Status | Valor | Vencimento | Ações | |
|---|---|---|---|---|---|---|
| Clara Martins | Mensalidade maio/2026 | Pago | R$ 820,00 | 05/05/2026 | ||
| Lia Costa | Uniforme escolar | Aberto | R$ 189,90 | 25/05/2026 | ||
| Miguel Rocha | Integral | Pago | R$ 980,00 | 30/05/2026 | ||
| Pedro Lima | Atividade extra | Atrasado | R$ 150,00 | 08/05/2026 | ||
| Sofia Nunes | Transporte escolar | Pago | R$ 260,00 | 15/05/2026 | ||
Linhas por página:1-5 de 6 Página 1 de 2 | ||||||
Última ação: Nenhuma ação executada.