Information on Display: New Features and More Accessible Data Tables

Updated interactions, new customizations and expanded access for users—dig into Material Design’s new-and-improved data tables

Karen Ng 吳家頴
Aug 13, 2019 · 3 min read
Image for post
Image for post

Data tables, which organize information into easy-to-digest formats, are especially useful at work. That’s why our latest Material Design release included updates specifically addressing the needs of data tables in the workplace. It’s all part of a new effort to provide greater Material support for the UI needs of enterprise teams, products, and companies.

TL;DR on data tables

Data Table with a variety of actions

Data tables display sets of similar information so that it’s easy to scan — often ordered in a hierarchical or alphabetical way that helps users find patterns and insights. A variety of interactive elements (like selecting rows and column sort) support a range of use cases demonstrated in our design guidance.

To customize Material’s baseline data tables on the web, developers can use our handy Sass mixins.

Image for post
Image for post
An example of Sass mixins

Making data tables more accessible

With the latest release, Material data tables got larger touch targets, as well as support for screen reader and keyboard access. The component uses semantic HTML tags, enabling users with different abilities to use our data tables. The web component is implemented in a table-pattern which is optimized for tables with low to zero interactive elements because every focusable element is a tab stop. In this release, checkboxes are a focusable element with keyboard tabs.

Image for post
Image for post
Left: target area is 48x48 dp. Right: Users can tab through interactions with their keyboard.

We’re planning to follow up with a grid-pattern variant in a later release which supports tables with many interactive elements. The grid-pattern variant provides users with greater navigation efficiency and flexibility since arrows and other keys can be used for navigation, not just tabs.

While designing for a wider set of users, our team referenced a few excellent articles to better understand data table accessibility:

Next up

Our current release covers foundational usage needs, but we recognize that providing more features will support an even wider set of use cases. New features are already in the works, and we’re hoping to release them by the end of the year.

In the meantime, please use our data table guidance and code to help make your work easier.

What do you think?

Let us know about any feature requests or bugs by reaching out to us on Twitter with @materialdesign.

Google Design

Stories by Googlers on the people, product, and practice of UX at 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