Data

Data tables/grids in task based UIs

Data tables/grids in task based UIs
  1. What is data table in UI?
  2. What's the difference between a grid and a table?
  3. How to fit a wide data table on mobile screens without losing its purpose and readability?

What is data table in UI?

Data tables display information in a grid-like format of rows and columns. They organize information in a way that's easy to scan so that users can look for patterns and develop insights from data. Data tables can contain: Interactive components (such as chips, buttons, or menus)

What's the difference between a grid and a table?

In its most basic form, a data grid could be seen as a table - data represented in rows and columns. Differences start already at basic functionality, like scrolling. While a table would not offer much more than a sticky header, usually showing the column definitions, the data grid can be much more sophisticated.

How to fit a wide data table on mobile screens without losing its purpose and readability?

Use Smaller Type

Using smaller text should actually make tables more readable because it provides enough room for the content to fit well. Many try to get as much content into a table as possible, but if you use large text, you'll have to take that space from margins and padding, which would reduce readability.

Placeholder Profile Photos or Initials
What is a place holder image?How do you use Pravatar? What is a place holder image?An image placeholder is a dummy image designed to draw attention ...
Accordion vs collapsable section
What is difference between collapse and accordion?What is collapsible section?What is accordion in UI design?What is accordion in bootstrap? What is...
How do you create both sufficient contrast and a harmonious outcome for text on different tints of the same color?
What is the best contrasting colors for text and background?How can I improve the contrast of my color?What is the sufficient color contrast ratio fo...