Données & tableaux

<DataTable
  caption="Commandes clients" columns={columns} data={rows} getRowId={(r) => r.id}
  sorting={sorting} onSortingChange={setSorting} manualSorting
  enableRowSelection bulkActions={(selected, clear) => <Button size="sm">Exporter ({selected.length})</Button>}
  rowActions={(r) => [{ label: 'Dupliquer' }, { label: 'Annuler…', danger: true, separatorBefore: true }]}
  getRowHref={(r) => `/sales/orders/${r.id}`} getRowLabel={(r) => r.number}
  enableDensityToggle defaultColumnVisibility={{ deliveryDate: false }}
  toolbar={<FilterBar search={<SearchInput … />} chips={chips} onRemoveChip={…} onReset={reset} />}
  renderMobileCard={(r) => <OrderCard order={r} />}
  empty={<EmptyState variant="no-results" size="sm" onResetFilters={reset} />}
  footer={<Pagination variant="pages" page={page} pageCount={pageCount} onPageChange={setPage} … />}
/>

// Colonne numérique : alignée à droite, chiffres tabulaires, total en pied
{ id: 'amount', accessorFn: (r) => Number(r.amount), header: 'Montant', meta: { align: 'right' },
  cell: ({ row }) => <MoneyText value={row.original.amount} currency="XOF" />,
  footer: ({ table }) => <MoneyText value={sumOf(table)} currency="XOF" /> }

<FilterBar
  search={<SearchInput placeholder="Rechercher…" size="sm" />}
  onFiltersClick={openFilters}
  savedViews={<Button size="sm" variant="ghost">Mes vues</Button>}
  actions={<Button size="sm">Exporter</Button>}
  chips={[{ id: 'status', label: 'Statut', value: 'À valider, Confirmé' }]}
  onRemoveChip={(id) => removeFilter(id)} onReset={resetFilters}
/>

<RowActionsMenu label="Actions sur CMD-2026-00421" actions={[
  { label: 'Ouvrir' }, { label: 'Dupliquer' },
  { label: 'Annuler…', danger: true, separatorBefore: true },
]} />

<Pagination variant="pages" page={page} pageCount={25} onPageChange={setPage} total={1240} rangeStart={101} rangeEnd={150} />
<Pagination hasPrevious={…} hasNext={…} onPrevious={…} onNext={…} rangeStart={1} rangeEnd={50} />

<TreeTable caption="Trésorerie" rows={accounts} getRowId={(a) => a.id} getChildren={(a) => a.children}
  defaultExpanded="all" showExpandControls
  columns={[
    { id: 'label', header: 'Compte', cell: (a) => a.label },
    { id: 'balance', header: 'Solde', align: 'end', aggregate: true, value: (a) => a.balance, format: (v) => formatMoney(v, 'XOF') },
  ]} />

<PlanningGrid caption="Planning des congés" days={isoDateRange('2026-10-05', '2026-10-18')} rows={rows}
  holidays={[{ date: '2026-10-15', label: 'Fête de démonstration' }]} today="2026-10-13"
  legend={[{ code: 'CA', label: 'Congé annuel', tone: 'primary' }, …]} />

<MatchingGrid currency="XOF"
  left={{ title: 'Relevé bancaire', items: statementLines }}
  right={{ title: 'Écritures comptables', items: bookEntries }}
  actions={({ balanced, clear }) => <Button disabled={!balanced} onClick={clear}>Rapprocher</Button>} />