Designer
CmReportDesigner cria relatórios inteiros em runtime — o usuário escolhe a fonte de dados, monta colunas, resumo e agrupamento visualmente, e o resultado é salvo como JSON puro, sem tocar em código.
O que é
A diferença entre um relatório definido em código e um relatório criado pelo usuário final.
Quem cria: o usuário final
Sem passar por código nem por um novo deploy — o relatório nasce numa tela, na hora.
O resultado: JSON puro
Uma SerializableReportDefinition — mesmo shape de um defineReport, sem funções, pronta para salvar em qualquer lugar.
De onde vêm as colunas
De ReportDataSource[] que o app registra: cada campo disponível, com seu formato, alimenta o passo de montagem de colunas.
Preview ao vivo
Cada mudança — coluna, resumo, agrupamento, estilo — atualiza o PDF de amostra ao lado, antes mesmo de salvar.
Crie um relatório
Escolha a fonte de dados 'Vendas', monte as colunas e salve — a definição vai para o localStorage do navegador via createLocalStorageReportAdapter.
Selecione uma fonte de dados para começar
Escolha uma fonte de dados para ver os campos disponíveis.
Selecione uma fonte de dados para começar
Escolha uma fonte de dados para ver os campos disponíveis.
Definições salvas
Carregando…
Integração essencial
Fonte de dados, adapter, o designer e a lista das definições salvas — o mínimo para oferecer isso no seu app.
import { createLocalStorageReportAdapter } from "cosmemilton-report";
import { CmReportDesigner, useReportDefinitions } from "cosmemilton-report/client";
// Fontes de dados que o app oferece — só metadados, a busca é sua.
const dataSources = [
{
id: "vendas",
name: "Vendas",
fields: [
{ key: "data", label: "Data", format: "date" },
{ key: "cliente", label: "Cliente" },
{ key: "total", label: "Total", format: "currency" },
],
},
];
const adapter = createLocalStorageReportAdapter({ prefix: "meuapp:relatorios:" });
export function TelaDesigner() {
// Lista/gerencia as SerializableReportDefinition já salvas via adapter.
const { definitions, remove } = useReportDefinitions({ adapter });
return (
<CmReportDesigner
dataSources={dataSources}
adapter={adapter}
// Amostra real por fonte — sem isso o preview usa generatePlaceholderRows.
getPreviewRows={(dataSource) => buscarAmostra(dataSource.id)}
onSaved={(definition) => {
console.log("salvo:", definition.slug);
}}
/>
);
}