Table

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

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;

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

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.

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.

  • Organizar uma lista de vendas
  • Organizar uma lista de produtos
  • Organizar dados de estrutura similar
  • Data list - Pode ser usado quando precisamos de uma estrutura de dados diferenciada ou mais complexa por exemplo em contextos mobile.

Instale o componente via terminal.

npm install @nimbus-ds/table

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

Table

NameTypeDefaultDescription

children*

React.ReactNode

The content of the table.

Table.Body

NameTypeDefaultDescription

children*

React.ReactNode

The content of the table body.

Table.Cell

NameTypeDefaultDescription

children*

React.ReactNode

The content of the table cell.

as

'td'
'th'

'td'

Type of html tag to create for the table cell.

width

string

The width property specifies the width of a table's content area.

This is a responsive property and you can have the options below available for you to use.

'{ "rest": "value", "focus": "value", "active": "value", "hover": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'

maxWidth

string

The maxWidth property specifies the maxWidth of a table's content area.

This is a responsive property and you can have the options below available for you to use.

'{ "rest": "value", "focus": "value", "active": "value", "hover": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'

minWidth

string

The minWidth property specifies the minWidth of a table's content area.

This is a responsive property and you can have the options below available for you to use.

'{ "rest": "value", "focus": "value", "active": "value", "hover": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'

backgroundColor

'neutral-background'
'neutral-surface'
'neutral-surfaceHighlight'
'primary-surface'
'primary-surfaceHighlight'
'transparent'

The backgroundColor property sets the background color of the table.

This is a responsive property and you can have the options below available for you to use.

'{ "rest": "value", "focus": "value", "active": "value", "hover": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'

padding

'base'
'none'
'small'

The padding properties are used to generate space around an table's content area.

This is a responsive property and you can have the options below available for you to use.

'{ "rest": "value", "focus": "value", "active": "value", "hover": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'

Table.Head

NameTypeDefaultDescription

children*

React.ReactNode

The content of the table head.

Table.Row

NameTypeDefaultDescription

children*

React.ReactNode

The content of the table row.

id

string

The ID of the table row.

onClick

() => void;

Function to be passed when clicking on the table row.

width

string

The width property specifies the width of a table's content area.

This is a responsive property and you can have the options below available for you to use.

'{ "rest": "value", "focus": "value", "active": "value", "hover": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'

maxWidth

string

The maxWidth property specifies the maxWidth of a table's content area.

This is a responsive property and you can have the options below available for you to use.

'{ "rest": "value", "focus": "value", "active": "value", "hover": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'

minWidth

string

The minWidth property specifies the minWidth of a table's content area.

This is a responsive property and you can have the options below available for you to use.

'{ "rest": "value", "focus": "value", "active": "value", "hover": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'

backgroundColor

'neutral-background'
'neutral-surface'
'neutral-surfaceHighlight'
'primary-surface'
'primary-surfaceHighlight'
'transparent'

The backgroundColor property sets the background color of the table.

This is a responsive property and you can have the options below available for you to use.

'{ "rest": "value", "focus": "value", "active": "value", "hover": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'

padding

'base'
'none'
'small'

The padding properties are used to generate space around an table's content area.

This is a responsive property and you can have the options below available for you to use.

'{ "rest": "value", "focus": "value", "active": "value", "hover": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'