Table

O componente Table nos permite organizar dados com estrutura tabular em uma tabela.

Default

With custom cell width

With no padding

import React from "react";
import { Table } from "@nimbus-ds/components";

const headers = ["Header 1", "Header 2", "Header 3", "Header 4"];
const rows = ["Cell 1", "Cell 2", "Cell 3", "Cell 4"];

const Example: React.FC = () => (
  <Table>
    <Table.Head>
      {headers.map((header) => (
        <Table.Cell key={header}>{header}</Table.Cell>
      ))}
    </Table.Head>
    <Table.Body>
      {rows.map((row) => (
        <Table.Row key={row}>
          <Table.Cell>Cell 1</Table.Cell>
          <Table.Cell>Cell 2</Table.Cell>
          <Table.Cell>Cell 3</Table.Cell>
          <Table.Cell>Cell 4</Table.Cell>
        </Table.Row>
      ))}
    </Table.Body>
  </Table>
);

export default Example;

Anatomia do componente

O componente é composto por um header com estilos diferenciados, linhas e colunas.

Guidelines

Utilizamos o Table para organizar informações de forma tabular em linhas e colunas, usando as linhas para ordenar entradas similares em estrutura mas diferentes em informação de forma vertical e diferentes tipos de dados de forma horizontal.

Flexibilidade

Cada célula tem um children que pode receber textos ou outros componentes nimbus, permitindo uma variedade de configurações personalizada para cada caso de uso.

Recomendação de uso

Organizar uma lista de vendas
Organizar uma lista de produtos
Organizar dados de estrutura similar

Componentes relacionados

Data list - Pode ser usado quando precisamos de uma estrutura de dados diferenciada ou mais complexa por exemplo em contextos mobile.

Implementação

Instale o componente via terminal.

npm install @nimbus-ds/table

Props

Additional props are passed to the <Table> element. See table docs for a list of props accepted by the <Table> element.