Table

Apresentação

O componente Table é responsável por exibir dados tabulares de forma organizada e responsiva. Ele oferece suporte a rolagem horizontal e vertical, cabeçalhos fixos e diferentes variações visuais, sendo otimizado para dispositivos móveis.

Quando usar

• Para exibir dados estruturados em formato tabular
• Para apresentar listas de informações com múltiplas colunas
• Para criar relatórios e dashboards
• Para mostrar comparações entre dados
• Para exibir dados que precisam de rolagem horizontal em mobile
• Para implementar tabelas com cabeçalhos fixos

Forma básica de uso

import { Table } from 'eitri-luminus';

// Tabela básica
<Table>
  <Table.Head>
    <Table.Row>
      <Table.Cell as="th">Nome</Table.Cell>
      <Table.Cell as="th">Email</Table.Cell>
      <Table.Cell as="th">Status</Table.Cell>
    </Table.Row>
  </Table.Head>
  <Table.Body>
    <Table.Row>
      <Table.Cell>João Silva</Table.Cell>
      <Table.Cell>[email protected]</Table.Cell>
      <Table.Cell>Ativo</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>Maria Santos</Table.Cell>
      <Table.Cell>[email protected]</Table.Cell>
      <Table.Cell>Inativo</Table.Cell>
    </Table.Row>
  </Table.Body>
</Table>

// Tabela com rolagem horizontal
<Table responsive>
  <Table.Head>
    <Table.Row>
      <Table.Cell as="th">ID</Table.Cell>
      <Table.Cell as="th">Nome Completo</Table.Cell>
      <Table.Cell as="th">Email</Table.Cell>
      <Table.Cell as="th">Telefone</Table.Cell>
      <Table.Cell as="th">Endereço</Table.Cell>
      <Table.Cell as="th">Status</Table.Cell>
    </Table.Row>
  </Table.Head>
  <Table.Body>
    <Table.Row>
      <Table.Cell>001</Table.Cell>
      <Table.Cell>João Silva Santos</Table.Cell>
      <Table.Cell>[email protected]</Table.Cell>
      <Table.Cell>(11) 99999-9999</Table.Cell>
      <Table.Cell>Rua das Flores, 123</Table.Cell>
      <Table.Cell>Ativo</Table.Cell>
    </Table.Row>
  </Table.Body>
</Table>

// Tabela com rolagem vertical e cabeçalho fixo
<Table 
  responsive={{ y: true, maxHeight: '300px' }} 
  stickyHeader
>
  <Table.Head>
    <Table.Row>
      <Table.Cell as="th">Produto</Table.Cell>
      <Table.Cell as="th">Preço</Table.Cell>
      <Table.Cell as="th">Estoque</Table.Cell>
    </Table.Row>
  </Table.Head>
  <Table.Body>
    {/* Muitas linhas aqui */}
    <Table.Row>
      <Table.Cell>Produto 1</Table.Cell>
      <Table.Cell>R$ 100,00</Table.Cell>
      <Table.Cell>50</Table.Cell>
    </Table.Row>
    {/* ... mais linhas */}
  </Table.Body>
</Table>

// Tabela com variante alternate
<Table variant="alternate">
  <Table.Head>
    <Table.Row>
      <Table.Cell as="th">Item</Table.Cell>
      <Table.Cell as="th">Quantidade</Table.Cell>
    </Table.Row>
  </Table.Head>
  <Table.Body>
    <Table.Row>
      <Table.Cell>Item A</Table.Cell>
      <Table.Cell>10</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>Item B</Table.Cell>
      <Table.Cell>25</Table.Cell>
    </Table.Row>
  </Table.Body>
</Table>

// Tabela com caption e footer
<Table>
  <Table.Caption>Relatório de Vendas - Janeiro 2024</Table.Caption>
  <Table.Head>
    <Table.Row>
      <Table.Cell as="th">Produto</Table.Cell>
      <Table.Cell as="th">Vendas</Table.Cell>
    </Table.Row>
  </Table.Head>
  <Table.Body>
    <Table.Row>
      <Table.Cell>Produto A</Table.Cell>
      <Table.Cell>100</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>Produto B</Table.Cell>
      <Table.Cell>150</Table.Cell>
    </Table.Row>
  </Table.Body>
  <Table.Foot>
    <Table.Row>
      <Table.Cell as="th">Total</Table.Cell>
      <Table.Cell>250</Table.Cell>
    </Table.Row>
  </Table.Foot>
</Table>

Propriedades

Table

Propriedade	Tipo	Descrição
responsive	boolean | { x?: boolean; y?: boolean; maxHeight?: string }	Configuração de responsividade da tabela
stickyHeader	boolean	Fixa o cabeçalho quando há rolagem vertical
variant	'alternate' | 'compact' | 'pinRows' | 'pinCols'	Variação visual da tabela
className	string	Classes CSS adicionais para a tabela

Table.Head, Table.Body, Table.Foot

Propriedade	Tipo	Descrição
className	string	Classes CSS adicionais para o elemento

Table.Row

Propriedade	Tipo	Descrição
className	string	Classes CSS adicionais para a linha

Table.Cell

Propriedade	Tipo	Descrição
as	'td' | 'th'	Define se a célula é um cabeçalho (th) ou dado (td)
className	string	Classes CSS adicionais para a célula

Table.Caption

Propriedade	Tipo	Descrição
className	string	Classes CSS adicionais para o caption

Configuração Responsive

Simples (boolean)

• responsive={true}: Ativa rolagem horizontal (equivale a { x: true, y: false })
• responsive={false}: Desativa responsividade

Avançada (objeto)

• x: boolean: Ativa/desativa rolagem horizontal
• y: boolean: Ativa/desativa rolagem vertical
• maxHeight: string: Define altura máxima quando y: true (ex: "300px", "50vh")

Variantes

• alternate: Adiciona listras alternadas nas linhas
• compact: Reduz o espaçamento interno das células
• pinRows: Fixa as linhas do cabeçalho
• pinCols: Fixa as colunas laterais

Heranças

O componente Table e seus subcomponentes herdam todas as propriedades comuns da biblioteca através da interface CommonProps, que inclui:

• Propriedades de estilo (margin, padding, etc)
• Propriedades de layout (flex, grid, etc)
• Propriedades de posicionamento
• Propriedades de acessibilidade
• Propriedades de identificação (id, data-e)

Acessibilidade

• Mantém a semântica nativa de <table>, <thead>, <tbody>, <tr>, <td>, <th>
• Suporta aria-label e aria-labelledby via CommonProps
• Preserva navegação por teclado
• Mantém contraste adequado em todas as variantes

Métodos via Ref

O componente Table expõe os seguintes métodos públicos que podem ser acessados através de uma ref:

import { useRef } from 'react';
import { Table } from 'eitri-luminus';

const MyComponent = () => {
  const tableRef = useRef<Table>(null);

  const handleScrollToRow = () => {
    tableRef.current?.scrollToRow(5);
  };

  const handleGetRowCount = () => {
    const count = tableRef.current?.getRowCount();
    console.log('Número de linhas:', count);
  };

  const handleGetColumnCount = () => {
    const count = tableRef.current?.getColumnCount();
    console.log('Número de colunas:', count);
  };

  return (
    <div>
      <Table ref={tableRef}>
        {/* conteúdo da tabela */}
      </Table>
      <button onClick={handleScrollToRow}>Rolar para linha 5</button>
      <button onClick={handleGetRowCount}>Contar linhas</button>
      <button onClick={handleGetColumnCount}>Contar colunas</button>
    </div>
  );
};

Método	Tipo de Retorno	Descrição
scrollToRow(index: number)	void	Rola a tabela até uma linha específica
getRowCount()	number	Retorna o número de linhas na tabela
getColumnCount()	number	Retorna o número de colunas na tabela

Observações

• Otimizado para dispositivos móveis com rolagem horizontal automática
• O stickyHeader só funciona quando responsive.y está ativo
• Classes Tailwind são aplicadas automaticamente baseadas nas props
• Todos os subcomponentes são proxies dos elementos HTML nativos
• O wrapper responsivo é criado automaticamente quando necessário
• Métodos via ref disponíveis para controle programático da tabela