Data tables

[dontpanicgr]

Introduction

There is an open discussion about data table regarding:

• Information Design (principles on a viable golden rule of data displayed, how much information is enough for x users)
• Visual Design (what standards we can use [interaction, alignment, style, pagination, actions ...] and how we tackle edge cases [many columns, scrolling ...] )
• Component (consistent data table, diverge data table from standard list, allow users to manipulate information, cells, container ... )

I'm adding here some principles, practices, examples, solutions etc.. Feel free to add more.

---

Principles

• Data is useless without the ability to visualize and act on it.
• Good data tables allow users to scan, analyze, compare, filter, sort, and manipulate information to derive insights and commit actions.
• Data Tables present raw data sets and lend meaning to the data while maintaining that the data is readable, scannable, and easily comparable.

Data Table vs List

• Use a Data Table if there is a significant quantity of information to display, and/or a need to compare one or more properties of the items.
• Use a List if there is a significant amount of information to display, and users may need to compare no more than one property between items.

Best practices

• Tables should extend to 100% of the available space.
• Numeric cell data should align right, otherwise, the data should be left-aligned.
• Columns containing a single icon should be aligned to the center.
• Column headings should always match the text alignment of the data in the column.
• Columns should be presented in a logical order.
• Primary data should appear in column 1. (In many applications, this will be a link to another object.)
• Row actions — such as delete — should be in the last column.

Articles

• https://uxdesign.cc/design-better-data-tables-4ecc99d23356 !components!
• http://alistapart.com/article/web-typography-tables

Examples

• https://support.airtable.com/hc/en-us/articles/202624989-Guide-to-views#hide_fields
• https://confluence.atlassian.com/jira064/configuring-issue-table-columns-720412300.html
• https://www.zoho.eu/projects/help/tasks.html#customize-columns
• https://help.wrike.com/hc/en-us/articles/209603049-Custom-Fields#hide
• https://support.prosperworks.com/hc/en-us/articles/203669779-Working-with-Customizable-Columns-in-List-Views

UI Components

• https://hjalmers.github.io/angular-generic-table/column-settings-component
• https://material.io/guidelines/components/data-tables.html#data-tables-interaction
• http://www.carbondesignsystem.com/components/data-table/usage
• https://atlassian.design/guidelines/product/components/tables
• https://www.lightningdesignsystem.com/components/data-tables/

@mikegianno @codegaze @yiotaz ^^

[dontpanicgr]

As per material.io

Long header titles Sometimes, column names don’t fit in a container with the recommended 56dp of padding in between columns. There are two options to handle this:

Display the full column name and enable horizontal scrolling in the table container Shorten the column name and display it in full on hover

This might be the reasoning for ellipsis and horizontal scrolling..

@codegaze @mikegianno @yiotaz

[dontpanicgr]

Another component from salesforce (Responsive) with horizontal scrolling https://www.lightningdesignsystem.com/components/data-tables/

[mikegianno]

Not sure whether actions (like delete, see details) on a data table is a norm or not.

Propose that we separate the meaning by single usage like:

• Data table, used to display a big set of data and that alone (so no actions ON the data table as it is the outcome of actions outside of the datatable, like filtering/sorting)
• Data list, used to display information that is actionable (so the information architecture of each row is laid out to drive into a set of actions like delete, see details...)

[dontpanicgr]

We should consider having a background color on data tables like we currently have on

• interactive lists
• tables The background color will support people to see where they are and on what row they are when they hover.

References:

Zebra tables: Styling even and odd rows in a different way can be helpful to people who have reading difficulties or who enlarge text. It acts as a visual guide. Highlighting the cell (and row/column) on mouseover and keyboard focus to support people to see where they are. Make sure that the contrast ratio between the text and background is good for both headers and data cells. Here is how to check the contrast ratio.

https://www.w3.org/WAI/tutorials/tables/tips/

@mikegianno @codegaze ^^