Big Table — DataTable com 50 colunas

• Uma variante guarda como você olha a tabela: ordem e largura das colunas, colunas escondidas, filtros, ordenação, agrupamento, totais e cores/negrito.
• Ela não guarda os dados (sempre aparecem os atuais) nem quais grupos estavam abertos.
• Você escolhe o nome (ex.: “Apuração por filial”) e pode ter várias.
• Se uma coluna deixar de existir, ela some da variante e você é avisado; o resto continua funcionando. Colunas novas aparecem no fim.
• Quem pode ver a variante, usá-la como padrão ou compartilhá-la com todos (global) é decidido pela plataforma, conforme o seu nível de acesso.

• O componente não grava nada: a variante é um JSON simples (DataTableView) que a tela salva e carrega.
• sanitizeView(json, columns) valida e ajusta o JSON às colunas atuais. Nunca lança erro e é idempotente.
• Padrão e global são da plataforma: o JSON só tem name; quem é dono, quem enxerga e qual é a padrão ficam na tabela do banco.
• Todo estado de visão novo precisa ser controlável por prop e serializável (sem Set, função ou JSX).

Ctrl/Shift+clique seleciona colunas (◀ ▶ movem) · arraste um título ou use “Posição” · funil filtra · olho oculta · clique no título → ordenar, agrupar, totais · arraste a borda do cabeçalho para ajustar a largura · role para a direita

<DataTable
  title="Apuração fiscal"
  columns={ALL_COLUMNS}                 // 50 colunas, width em px; dinheiro = dataType: "currency"
  rows={rowsOrdenadasPeloConsumidor}
  rowKey={bigTableRowKey}
  density="compact"
  horizontalScroll
  columnOrder={order} onColumnOrderChange={setOrder}      // reordenar
  selectableColumns                                       // Ctrl/Shift+clique, ◀ ▶
  columnVisibilityControl                                 // ⚙ + botão ocultar no cabeçalho
  filterableColumns columnFilters={filters} onColumnFiltersChange={setFilters}
  onSortChange={(key, direction) => setSort({ key, direction })} sortBy={sort?.key} sortDirection={sort?.direction}
  groupByColumns={levels} onGroupByColumnsChange={setLevels}   // N níveis (ordem de clique)
  groupLevelControl                                       // botões de nível 1·2·3·Itens + Agrupar
  resizableColumns columnStyles={[{ keys: ["cfop"], tone: "brand", bold: true }]}
  groupDetailPlacement="below"                            // ou "above" (SAP GUI)
  collapsibleGroups collapsedGroups={collapsed} onCollapsedGroupsChange={setCollapsed}
  aggregatable initialTotals="none"                       // ou "currency" | ["value", "impostoIcms"]
  toolbarActions={actions} exportable exportFileName="apuracao-fiscal"
  onNavigate={abrirDetalhes}
  pagination pageSize={20}
/>

<DataTable
  title="Notas fiscais"
  columns={columns}
  rows={rows}
  rowKey={(r) => r.id}
  reorderableColumns        // modo não controlado: o DataTable guarda a ordem
  onColumnOrderChange={(order) => salvarPreferencia(order)} // opcional
/>

// Controlado: <DataTable columnOrder={order} onColumnOrderChange={setOrder} ... />

Última ação disparada: —

<DataTable
  title="Notas fiscais"
  columns={columns}
  rows={rows}
  rowKey={(r) => r.id}
  toolbarActions={[
    { key: 'aprovar', label: 'Aprovar lote', variant: 'emphasized', onClick: aprovar },
    { key: 'conferir', label: 'Marcar como conferido', onClick: conferir, disabled: !temSelecao },
  ]}
/>

<DataTable
  title="Notas fiscais"
  columns={[
    { key: 'postingDate', label: 'Posting date', exportValue: (r) => new Date(`${r.postingDate}T00:00:00`) },
    { key: 'value', label: 'Value', render: (r) => brl.format(r.value) }, // exporta o número cru
  ]}
  rows={rows}
  rowKey={(r) => r.id}
  exportable
  exportFileName="notas-fiscais"
  pagination
  pageSize={5}
/>

// Relatório paginado no servidor: getExportRows={() => api.buscarTudo(filtros)}

Conferência da soma de Valor por nível (tabela, Local e Local/CFOP) sobre as 118 linhas com valor após os filtros: 11 recortes × idênticos à referência independente (centavos inteiros) ✓

<DataTable
  columns={columns}   // Column.dataType: "currency" | "number" | "text" | "date"; groupable?: boolean; filterable?: boolean
  rows={rows}
  rowKey={(r) => r.id}
  selectableColumns                 // Ctrl/Shift+clique, Espaço; ◀ ▶ na barra
  columnVisibilityControl           // ⚙ na barra + botão ocultar no cabeçalho
  filterableColumns                 // funil por coluna (opções dependentes)
  columnFilters={filters}
  onColumnFiltersChange={setFilters}
  groupByColumns={levels}           // ordem de clique = hierarquia (pai → filho)
  onGroupByColumnsChange={setLevels}
  groupDetailPlacement="above"      // "below" (padrão) | "above" (SAP GUI)
  collapsibleGroups
  initialTotals="currency"          // "none" (padrão) | "currency" | ["qtd", "icms"]
/>

<DataTable
  columns={[{ key: "value", label: "Value", dataType: "number" }, { key: "cfop", label: "CFOP" }]}
  rows={rows}
  rowKey={(r) => r.id}
  aggregatable
  defaultColumnAggregations={{ value: { fn: 'sum', showGrandTotal: true } }}
  groupBy={groupBy}
  onGroupChange={setGroupBy}
/>

const r = aggregateValues(values, { fn: 'sum', dataType: 'number', decimals: 2 });
if (r.ok) r.text; // decimal exato

aggregateValues([0.1, 0.2], { fn: 'sum', dataType: 'number' }); // text '0.30'