Tables

Tables

Data tables display sets of raw data. They usually appear in desktop enterprise products.

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

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)CaloriesFat (g)Carbs (g)Protein (g)
Rows per page:
5
1-5 of 13

Custom Table Pagination Action

The Action property of the TablePagination component allows the implementation of custom actions.

Frozen yoghurt1596
Ice cream sandwich2379
Eclair26216
Cupcake3053.7
Marshmallow3180
Rows per page:
5
1-5 of 13

Customized tables

You can customize the look and feel of the table by overriding the styles of the TableCell component.

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