Saltar al contenido

Table (Tabla)

Las tablas muestran conjuntos de datos. Pueden ser totalmente personalizadas.

Las tablas muestran información de una forma fácil de analizar, revelando así patrones e ideas a los usuarios. Se pueden integrar en contenido principal, tal como tarjetas. They can include:

  • Un elemento visual correspondiente
  • Navegación
  • Herramientas para consultar y manipular los datos

Estructura

Un ejemplo sencillo sin florituras.

Una tabla de datos contiene una cabecera en la parte superior con los nombres de las columnas, seguida por las filas de datos.

Ordenando & Seleccionando

The Table component has a close mapping to the native <table> elements. This constraint makes building rich data tables challenging.

The DataGrid component is designed for use-cases that are focused around handling a large amounts of tabular data. While it comes with a more rigid structure, in exchange, you gain more powerful features.

Tabla Sencilla

Un checkbox debe acompañar a cada fila por si el usuario necesita seleccionar o manipular datos.

Dessert (100g serving)CaloriesFat (g)Carbs (g)Protein (g)
Frozen yoghurt1596244
Ice cream sandwich2379374.3
Eclair26216246
Cupcake3053.7674.3
Gingerbread35616493.9

Tabla Densa

Este ejemplo demuestra el uso del Checkbox y las filas cliqueables para seleccionar, con una Toolbar personalizado. Utiliza el componente TableSortLabel para ayudar a dar estilo a las cabeceras de las columnas.

La Tabla tiene un ancho fijo para demostrar el desplazamiento horizontal. Para evitar que se desplacen los controles de paginación, el componente TablePagination se usa fuera de la Tabla. (El ejemplo de la 'Acción de paginación de tabla personalizado' de abajo demuestra la paginación dentro del TableFooter.)

Nutrition
Dessert (100g serving)Caloriessorted ascendingFat (g)Carbs (g)Protein (g)

Filas por página:

5

1-5 de 13

Tablas personalizadas

He aquí un ejemplo de personalización del componente. You can learn more about this in the overrides documentation page.

Dessert (100g serving)CaloriesFat (g)Carbs (g)Protein (g)
Frozen yoghurt1596244
Ice cream sandwich2379374.3
Eclair26216246
Cupcake3053.7674.3
Gingerbread35616493.9

Opciones de paginación personalizada

Es posible personalizar las opciones en el item "Filas por página" usando la propiedad rowsPerPageOptions. Debes proveer alguna de estas opciones de array:

  • numbers, cada número será usado para la etiqueta y el valor de la opción.

    <TablePagination rowsPerPageOptions={[10, 50]} />
  • objects, the value and label keys will be used respectively for the value and label of the option (useful for language strings such as 'All').

    <TablePagination rowsPerPageOptions={[10, 50, { value: -1, label: 'All' }]} />

Custom pagination actions

El atributo Actiondel componente TablePagination permite implementar acciones personalizadas.

Frozen yoghurt1596
Ice cream sandwich2379
Eclair26216
Cupcake3053.7
Marshmallow3180

Fixed header

An example of a table with scrollable rows and fixed column headers. It leverages the stickyHeader prop.
(⚠️ no IE11 support)

NameISO CodePopulationSize (km²)Density

Filas por página:

10

1-10 de 15

Column grouping

You can group column headers by rendering multiple table rows inside a table head:

<TableHead>
  <TableRow />
  <TableRow />
</TableHead>
CountryDetails
NameISO CodePopulationSize (km²)Density

Filas por página:

10

1-10 de 15

Collapsible table

An example of a table with expandable rows, revealing more information. It utilizes the Collapse component.

Dessert (100g serving)CaloriesFat (g)Carbs (g)Protein (g)
Frozen yoghurt1596244
Ice cream sandwich2379374.3
Eclair26216246
Cupcake3053.7674.3
Gingerbread35616493.9

Tabla Expandible

Un ejemplo sencillo con filas & columnas expandibles.

DetailsPrice
DescQty.UnitSum
Paperclips (Box)1001.15115.00
Paper (Case)1045.99459.90
Waste Basket217.9935.98
Subtotal610.88
Tax7 %42.76
Total653.64

Tabla Virtualizada

En el siguiente ejemplo, demostramos como usar react-virtualized con el componente Table. Renderiza 200 filas y puede manejar más con facilidad. La virtualización ayuda con problemas de rendimiento.

Dessert
Calories (g)
Fat (g)
Carbs (g)
Protein (g)

Accesibilidad

(WAI tutorial: https://www.w3.org/WAI/tutorials/tables/)

Caption

A caption functions like a heading for a table. Most screen readers announce the content of captions. Captions help users to find a table and understand what it’s about and decide if they want to read it.

A basic table example with a caption
Dessert (100g serving)CaloriesFat (g)Carbs (g)Protein (g)
Frozen yoghurt1596244
Ice cream sandwich2379374.3
Eclair26216246