Responsive tables

Some (if not most) of our products are SaaS, which means they have their own dashboards that can be accessed from any device including mobile phones.

At the moment, we don't have mobile versions for our components which in most cases is fine.

However, it's difficult to make the tables responsive and provide a nice UX for mobile phones.

Different products have approached that differently.

Landscape, for example, has the tables scrollable horizontally when the screen is narrower than X:

Anbox (if I'm not mistaken) transforms tables into cards automatically using our react-tables component that our react components use under the hood.

It would be useful to come up with one way of doing it for all projects.

The issue names no files, tests, or entry points. Start by comparing the existing table implementations, including the horizontally scrollable Landscape approach and the card-based react-tables approach, then define one responsive behavior for the framework. Done should mean that a clear, shared approach has been agreed and implemented for all projects.

Written by the indexing model from the issue text.