Table

Tables display sets of data. They can be fully customized.

Tables display information in a way that’s easy to scan, so that users can look for patterns and insights. They can be embedded in primary content, such as cards.

Tables can include:

A corresponding visualization
Navigation
Tools to query and manipulate data

When including tools, they should be placed directly above or below the table.

Basic table

A simple example with no frills.

Dessert (100g serving)	Calories	Fat (g)	Carbs (g)	Protein (g)
Frozen yoghurt	159	6	24	4
Ice cream sandwich	237	9	37	4.3
Eclair	262	16	24	6
Cupcake	305	3.7	67	4.3
Gingerbread	356	16	49	3.9

Data table

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

Dense table

A simple example of a dense table with no frills.

Dessert (100g serving)	Calories	Fat (g)	Carbs (g)	Protein (g)
Frozen yoghurt	159	6	24	4
Ice cream sandwich	237	9	37	4.3
Eclair	262	16	24	6
Cupcake	305	3.7	67	4.3
Gingerbread	356	16	49	3.9

Sorting & selecting

This example demonstrates the use of Checkbox and clickable rows for selection, with a custom Toolbar. It uses the TableSortLabel component to help style column headings.

The Table has been given a fixed width to demonstrate horizontal scrolling. In order to prevent the pagination controls from scrolling, the TablePagination component is used outside of the Table. (The 'Custom Table Pagination Action' example below shows the pagination within the TableFooter.)

Nutrition

Dense padding

Customized tables

Here is an example of customizing the component. You can learn more about this in the overrides documentation page.

Dessert (100g serving)	Calories	Fat (g)	Carbs (g)	Protein (g)
Frozen yoghurt	159	6	24	4
Ice cream sandwich	237	9	37	4.3
Eclair	262	16	24	6
Cupcake	305	3.7	67	4.3
Gingerbread	356	16	49	3.9

Custom pagination options

It's possible to customise the options shown in the "Rows per page" select using the rowsPerPageOptions prop. You should either provide an array of:

numbers, each number will be used for the option's label and value.
```
<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

The ActionsComponent prop of the TablePagination component allows the implementation of custom actions.

Frozen yoghurt	159	6
Ice cream sandwich	237	9
Eclair	262	16
Cupcake	305	3.7
Marshmallow	318	0
Rows per page: 1-5 of 13

Fixed header

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

Name	ISO Code	Population	Size (km²)	Density
India	IN	1,324,171,354	3,287,263	402.82
China	CN	1,403,500,365	9,596,961	146.24
Italy	IT	60,483,973	301,340	200.72
United States	US	327,167,434	9,833,520	33.27
Canada	CA	37,602,103	9,984,670	3.77
Australia	AU	25,475,400	7,692,024	3.31
Germany	DE	83,019,200	357,578	232.17
Ireland	IE	4,857,000	70,273	69.12
Mexico	MX	126,577,691	1,972,550	64.17
Japan	JP	126,317,000	377,973	334.20

Collapsible table

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

Dessert (100g serving)	Calories	Fat (g)	Carbs (g)	Protein (g)
Frozen yoghurt	159	6	24	4

Ice cream sandwich	237	9	37	4.3

Eclair	262	16	24	6

Cupcake	305	3.7	67	4.3

Gingerbread	356	16	49	3.9

Spanning table

A simple example with spanning rows & columns.

Details			Price
Desc	Qty.	Unit	Sum
Paperclips (Box)	100	1.15	115.00
Paper (Case)	10	45.99	459.90
Waste Basket	2	17.99	35.98
	Subtotal		610.88
	Tax	7 %	42.76
	Total		653.64

Virtualized table

In the following example, we demonstrate how to use react-virtualized with the Table component. It renders 200 rows and can easily handle more. Virtualization helps with performance issues.

Dessert

Calories (g)

Fat (g)

Carbs (g)

Protein (g)

Accessibility

(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)	Calories	Fat (g)	Carbs (g)	Protein (g)
Frozen yoghurt	159	6	24	4
Ice cream sandwich	237	9	37	4.3
Eclair	262	16	24	6