How to Use Material Data Tables on the Web

Everything you’ll need, from the web code to best practices

You probably already know Material Design — Google’s open-source design system for quickly building beautiful interfaces. But you might not know that one of Material’s most popular use cases on the web is being the “front-end of the back-end.” Oodles of Material web apps are essentially admin panels, data displays, and tools for content manipulation. In fact, this use case is so prevalent that, according to a survey by Material-UI (a 3rd party open-source React implementation of Material Design) 70% of respondents said they used that product to build admin panels and dashboards.

We recently revamped Material’s data table component (read about the updates from designer Karen Ng) and released the web code and documentation for quickly integrating this component into your own web product. Now, you can easily and instantly (after installing the component) leverage and theme data tables with some default behaviors, such as row selection, utilizing Material’s animation and design system. Here’s how:

Basic Material data table with default theme

To get yourself a data table, you only need the following three steps:

1. In a terminal:

// Install checkbox styles for the row selection variant
npm install @material/checkbox
// Install data table styles
npm install @material/data-table

2. In your Sass file:

// Import checkbox styles for the row selection variant
@import "@material/checkbox/mdc-checkbox";
// Import data table styles
@import "@material/data-table/mdc-data-table";

3. In your HTML, include the correct classes in the following structure:

<div class="mdc-data-table">
  <table class="mdc-data-table__table" aria-label="Dessert calories">
    <thead>
      <tr class="mdc-data-table__header-row">
        <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Dessert</th>
        <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Carbs (g)</th>
        <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Protein (g)</th>
        <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Comments</th>
      </tr>
    </thead>
    <tbody class="mdc-data-table__content">
      <tr class="mdc-data-table__row">
        <td class="mdc-data-table__cell">Frozen yogurt</td>
        <td class="mdc-data-table__cell mdc-data-table__cell--numeric">24</td>
        <td class="mdc-data-table__cell mdc-data-table__cell--numeric">4.0</td>
        <td class="mdc-data-table__cell">Super tasty</td>
      </tr>
      <tr class="mdc-data-table__row">
        <td class="mdc-data-table__cell">Ice cream sandwich</td>
        <td class="mdc-data-table__cell mdc-data-table__cell--numeric">37</td>
        <td class="mdc-data-table__cell mdc-data-table__cell--numeric">4.3</td>
        <td class="mdc-data-table__cell">I like ice cream more</td>
      </tr>
    </tbody>
  </table>
</div>

If you want to include the default interaction demonstrated in this blog post, you will need to instantiate the data table in your JavaScript file. This can be built upon with your own system, and MDC-Web provides a base as a jumping-off point:

// Import the component
import {MDCDataTable} from '@material/data-table';
// Instantiate the data table based on the `.mdc-data-table` class
const dataTable = new MDCDataTable(document.querySelector('.mdc-data-table'));

Material Data Tables provides basic interactions including selecting of table rows and returning an array of selected row items. The baseline functionality builds in accessibility, but if you are extending the table, please refer WAI-ARIA Authoring Practices for table for ARIA recommended role, states & properties required for table element.

In the example below, you can find the data table interface being used to calculate the total calories. The table is built via a web component template using JSON-based data.

let totalCal = 0;
// Add "row selection changed" event on the data table
dataTableEl.addEventListener('MDCDataTable:rowSelectionChanged', (event) => {
  const {rowIndex, selected} = event.detail;
  
  const calories = sampleData.rows[rowIndex][CALORIES_COLUMN_INDEX];
  if (selected) {
    totalCal += calories;
  } else {
    totalCal -= calories;
  }
  
  ...
});

Material data table reading from data source with interactive tally of calories.

You can also combine components within a table. In this example, we’re using Material chips as quick-selection shortcuts for selecting items in the table. We can combine interfaces like so, to make this possible:

// Add "chip selection" event on the data table
dataTableEl.addEventListener('MDCChip:selection', (event) => { 
  ...
}

Material data table using chips for quick-selection.

Data table with theme switcher.

You can use the Sass mixins as a styling API, or use custom properties to apply theming with MDC-Web, and serve that theme change by using the prefers-color-scheme media query, or provide users with their own option using the Material switch component, for example.

We also added the data table to the Material Theme Builder, so you can see how your global theming styles will affect this component along with the others, and how all of those styles interact.

Material Theme Builder tool

Now that you know how to use, extend, style, and explore Material data tables on the web, go forth and experiment! Don’t forget to share your data tables down in the comments section below 👇