Skip to content

Tables

Data tables display sets of data. They can be fully customized.

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

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

Structure

A data table contains a header row at the top that lists column names, followed by rows for data.

Checkboxes should accompany each row if the user needs to select or manipulate data.

For accessibility, the first column is set to be a <th> element, with a scope of "row". This enables screen readers to identify a cell's value by it's row and column name.

Simple Table

A simple example with no frills.

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

Dense Table

A simple example of a dense table with no frills.

Dessert (100g serving)CaloriesFat (g)Carbs (g)Protein (g)
Frozen yoghurt1596244
Ice cream sandwich2379374.3
Eclair26216246
Cupcake3053.7674.3
Gingerbread35616493.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
Dessert (100g serving)Caloriessorted ascendingFat (g)Carbs (g)Protein (g)

Rows per page:

5

1-5 of 13

Customized tables

Here is an example of customizing the component. 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

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 Action property of the TablePagination component allows the implementation of custom actions.

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

Rows per page:

10

1-10 of 15

Spanning Table

A simple example with spanning rows & columns.

DetailsPrice
DescQty.UnitSum
Paperclips (Box)1001.15115.00
Paper (Case)1045.99459.90
Waste Basket217.9935.98
Subtotal610.88
Tax7 %42.76
Total653.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)

Complementary projects

For more advanced use cases you might be able to take advantage of:

material-table

stars npm downloads

material-table is a simple and powerful Datatable for React based on Material-UI Table with some additional features. They support many different use cases (editable, filtering, grouping, sorting, selection, i18n, tree data and more). You should check it out.

Editable Example
Actions
Name
Surname
Birth Year
Birth Place
MehmetBaran1987Şanlıurfa
Zerya BetülBaran2017İstanbul

Other

  • dx-react-grid-material-ui: A data grid for Material-UI with paging, sorting, filtering, grouping and editing features (paid license).
  • mui-datatables: Responsive data tables for Material-UI with filtering, sorting, search and more.
  • tubular-react: A Material-UI table with local or remote data-source. Featuring filtering, sorting, free-text search, export to CSV locally, and aggregations.

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 barbone structure table example with a caption
Dessert (100g serving)CaloriesFat (g)Carbs (g)Protein (g)
Frozen yoghurt1596244
Ice cream sandwich2379374.3
Eclair26216246