Table

El componente Table nos permite organizar los datos con una estructura tabular en una tabla.

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;

Anatomía del componente

El componente está formado por un header con estilos diferenciados, filas y columnas.

Guidelines

Utilizamos el Table para organizar la información en forma tabular en filas y columnas, utilizando las filas para ordenar las entradas que son similares en estructura pero diferentes en información verticalmente y diferentes tipos de datos horizontalmente.

Flexibilidad

Cada celda tiene un children que puede recibir texto u otros componentes Nimbus, lo que permite una variedad de configuraciones personalizadas para cada caso de uso.

Recomendaciones de uso

Organizar una lista de ventas
Organizar una lista de productos
Organizar datos de estructura similar

Componentes relacionados

Data list - Puede utilizarse cuando necesitamos una estructura de datos diferenciada o más compleja, por ejemplo en contextos móviles.

Implementação

Instalá el 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.

Table

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

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.
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

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" }'
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" }'