Skip to Content
ComponentsOrganismsTable

Table

Organism

Table é a superfície mais densa do Pulso. Use quando comparação, ordenação e leitura linha-a-linha importam mais que narrativa visual.

Tabela organiza registros operacionais: crises, menções, logs, fontes, auditorias, usuários, regras e exports. Ela deve privilegiar legibilidade, escopo e consequência.

Exemplos copiáveis

React

import * as React from "react"
 
type PulsoTableColumn<Row> = {
  id: string
  header: string
  align?: "left" | "right"
  render: (row: Row) => React.ReactNode
}
 
type PulsoTableProps<Row> = {
  caption?: string
  columns: PulsoTableColumn<Row>[]
  rows: Row[]
  getRowId: (row: Row) => string
  emptyState?: string
}
 
export function PulsoTable<Row>({ caption, columns, rows, getRowId, emptyState = "Nenhum registro encontrado." }: PulsoTableProps<Row>) {
  return (
    <div className="overflow-x-auto rounded-[var(--radius-md)] border border-[var(--border)] bg-[var(--card)]">
      <table className="w-full min-w-[720px] border-collapse text-sm text-[var(--fg)]">
        {caption ? <caption className="sr-only">{caption}</caption> : null}
        <thead className="border-b border-[var(--border)] bg-[var(--muted)]/45">
          <tr>{columns.map((column) => <th key={column.id} scope="col" className={["px-4 py-3 text-left font-mono text-[11px] font-semibold uppercase tracking-[var(--tracking-kicker)] text-[var(--fg-muted)]", column.align === "right" ? "text-right" : ""].join(" ")}>{column.header}</th>)}</tr>
        </thead>
        <tbody>
          {rows.length === 0 ? <tr><td colSpan={columns.length} className="px-4 py-8 text-center text-[var(--fg-muted)]">{emptyState}</td></tr> : null}
          {rows.map((row) => (
            <tr key={getRowId(row)} className="border-b border-[var(--border)] last:border-0 hover:bg-[var(--muted)]/35">
              {columns.map((column) => <td key={column.id} className={["px-4 py-3 align-middle text-[var(--fg)]", column.align === "right" ? "text-right font-mono tabular-nums" : ""].join(" ")}>{column.render(row)}</td>)}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  )
}
<PulsoTable
  caption="Casos ativos em monitoramento"
  rows={rows}
  getRowId={(row) => row.id}
  columns={columns}
/>

Regras

  1. Use Table para comparação por coluna, logs e auditoria.
  2. Números comparáveis ficam à direita com fonte mono/tabular.
  3. Empty/error devem diferenciar sem dados, sem permissão e falha de carregamento.
  4. Seleção em massa precisa explicitar escopo.
  5. Densidade muda ritmo, não significado.
Last updated on
CardForm