Saltar al contenido

馃帀 Material UI v5 is out! Head to the migration guide to get started.

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.

Las tablas pueden incluir:

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

Cuando se incluyen herramientas, se deber铆an poner directamente arriba o debajo de la tabla.

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.

<DataGrid
  rows={rows}
  columns={columns}
  pageSize={5}
  checkboxSelection
  disableSelectionOnClick
/>

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

La propiedad ActionsComponent del componente TablePagination permite la implementaci贸n de 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 IE 11 support).

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鈥檚 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