Open dontpanicgr opened 6 years ago
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
Another component from salesforce (Responsive) with horizontal scrolling https://www.lightningdesignsystem.com/components/data-tables/
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:
We should consider having a background color on data tables like we currently have on
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 ^^
Introduction
There is an open discussion about data table regarding:
I'm adding here some principles, practices, examples, solutions etc.. Feel free to add more.
Principles
Data Table vs List
Best practices
Articles
Examples
UI Components
@mikegianno @codegaze @yiotaz ^^