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

Propriedades adicionais são repassadas ao elemento <Table>. Consulte a documentação do elemento table para ver a lista de atributos aceitos pelo elemento <table>.

Table

Name	Type	Default	Description
children*	React.ReactNode		The content of the table.
columnLayout	array		Column sizing definitions applied from left to right. Use `width` for fixed columns and `grow` to distribute the remaining space proportionally.
minWidth	string		Minimum width of the table. When the container is smaller, horizontal scrolling is enabled. Accepts any valid CSS width value (e.g., "600px", "50rem").
maxWidth	string		Maximum width of the table. The table will not exceed this width. Accepts any valid CSS width value (e.g., "1200px", "80rem").
stickyScrollbar	boolean	'false'	Shows a sticky scrollbar at the bottom of the viewport when the table overflows horizontally. The scrollbar stays visible while scrolling vertically, making it easier to navigate wide tables.
borderRadius	'2' 'none'	'2'	Controls the border radius of the table wrapper. Use "none" for no border radius or "2" for the default token value.

Table.Body

Name	Type	Default	Description
children*	React.ReactNode		The content of the table body.

Table.Cell

Name	Type	Default	Description
children*	React.ReactNode		The content of the table cell.
as	'td' 'th'	'td'	Type of html tag to create for the table cell.
column	number		Column index (0-based) to apply minWidth constraint from the Table's columnLayout. When provided, the cell will inherit minWidth from the corresponding column definition.
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", "xxl": "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", "xxl": "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", "xxl": "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", "xxl": "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", "xxl": "value" }'

Table.Head

Name	Type	Default	Description
children*	React.ReactNode		The content of the table head.

Table.Row

Name	Type	Description
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", "xxl": "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", "xxl": "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", "xxl": "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", "xxl": "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", "xxl": "value" }'