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) | 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
| 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 | |
| Marshmallow | 318 | 0 | 81 | 2 |
Customized Tables
If you have been reading the overrides documentation page
but you are not confident jumping in,
here are examples of how you can change the look of a TableCell.
⚠️ While the material design specification encourages theming, this example is off the beaten path.
| 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 Table Pagination Action
The Action property 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 | ||
| Desc | Qty. | @ | Price |
|---|---|---|---|
| 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.
Complementary projects
For more advanced use cases you might be able to take advantage of:
- dx-react-grid-material-ui A data grid for Material-UI with paging, sorting, filtering, grouping and editing features (custom license).
- mui-datatables Responsive data tables for Material-UI with filtering, sorting, search and more.
- material-table DataTable based on table component with additional features like search, filtering, sorting and much more.
- mui-virtualized-table Virtualized Material-UI table.