How to Use Material Data Tables on the Web

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

Una Kravets
Sep 25, 2019 · 3 min read
Image for post
Image for post

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

2. In your Sass file:

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

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';

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;
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
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 👇

Google Design

Stories by Googlers on the people, product, and practice of UX at Google

Thanks to Abhinay Omkar

Una Kravets

Written by

http://una.im :) front-end developer & brunch enthusiast

Google Design

Stories by Googlers on the people, product, and practice of UX at Google. For editorial content and more visit design.google

Una Kravets

Written by

http://una.im :) front-end developer & brunch enthusiast

Google Design

Stories by Googlers on the people, product, and practice of UX at Google. For editorial content and more visit design.google

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store