Data tables come in various sizes, contents, purposes, and complexities. The ability to query and manipulate data is a crucial requirement for most products that are being designed today. Enterprise…

Roberto Umbelino

Figma

Community Picks is a section on daily.dev where our community members share the most interesting and valuable content they've discovered online. From insightful articles to handy tools, every post is a gem curated by our dedicated coomunity. To contribute to Community Picks, you need to have at least 250 reputation points, ensuring that only active and trusted members can share their finds.

Community Picks

This post provides best practices for designing data tables, including alignment for text and numeric columns, column separators, row division styles, subtext usage, contrast, visual indications, common table interactions, and table actions.

Data Table Design Patterns

Nice article with a lot of good tips, thanks for sharing.
The only thing I am missing, is how data tables would look like in a mobile layout when there is not enough space for all columns. Do you have any suggestion for that as well?

Awesome read with some super helpful tips!
The part about Search Highlighting. Does anyone know why search highlighting would be done instead of a filter search that removes rows that don’t contain the searched term?

Thank you ! I am more a backend than a frontend dev, and tips like this are awesome !

Good to know all this. So much things everyone should know.

Thanks, this very helpful, becausr iam currently building one.