DataTable

The DataTable component provides a rigid, predictable structure for tabular data. It embodies the Concreto aesthetic—sharp lines, high contrast text headers, and clear delineations—acting as the geometric scaffolding upon which data rests.

It supports variations like default, compact, and striped to handle different densities of information.

Demonstration

Usage

<script>
  import { DataTable } from 'cobogo';

  const headers = [
    { key: 'name', label: 'Nome' },
    { key: 'role', label: 'Função' },
    { key: 'status', label: 'Status', align: 'center' }
  ];

  const data = [
    { name: 'Lina Bo Bardi', role: 'Arquiteta', status: 'Ativo' },
    { name: 'Athos Bulcão', role: 'Artista', status: 'Concluído' }
  ];
</script>

<DataTable {headers} {data} caption="Exemplo de Tabela" variant="striped" />

Doctrine

The DataTable enforces order. It does not try to be playful or overly soft; its headers are uppercase, spaced out, and bold (var(--fg-heading) against var(--bg-sunken)), anchoring the columns. Status badges inside the table use our precise semantic tokens (var(--verde), var(--ocre)) without overwhelming the grid structure.