Lists vs. Tables
This page is meant to help you decide whether or not your content should be formatted
as a list or table. To learn more about tables, visit the Data Table component page. The List component is currently in development.
as a list or table. To learn more about tables, visit the Data Table component page. The List component is currently in development.
Views
Table
Tables are comprised of items that are systematically grouped by columns. Below are some other table specific traits:
• Contains a large amount of data organized by columns for comparison
• Data can be modified extensively
• Custom data can be added by users
• Data calculations can be performed
• Allows for vertical and horizontal scrolling
• Displays all content equally
• Contains a large amount of data organized by columns for comparison
• Data can be modified extensively
• Custom data can be added by users
• Data calculations can be performed
• Allows for vertical and horizontal scrolling
• Displays all content equally
List
A list contains related items and displays them consecutively. Below are more traits specific to a list:
• Individual row items with pared-down data for skimming
• Row items are independent from one another, displaying different attributes
• Can drill into rows for more content
• Data can hold parent/child relationships
• Minimal action can be taken on a list item
• Can use images, visualizations, avatars to communicate the importance or value of individual pieces of data
• Content is stacked or responsive in a grid with vertical scrolling only
• Is a simpler, more customizable layout option
• Individual row items with pared-down data for skimming
• Row items are independent from one another, displaying different attributes
• Can drill into rows for more content
• Data can hold parent/child relationships
• Minimal action can be taken on a list item
• Can use images, visualizations, avatars to communicate the importance or value of individual pieces of data
• Content is stacked or responsive in a grid with vertical scrolling only
• Is a simpler, more customizable layout option
Which Fits Your Use Case?
It’s important to decide which layout best suits the use case. The decision tree below offers some some things to consider when choosing between the two.
There will be cases where table and list functionality overlap, in those instances consider what will create the best experience for your users and base your decision on that.
There will be cases where table and list functionality overlap, in those instances consider what will create the best experience for your users and base your decision on that.
