Best way to Display Responsive Tables on Small Breakpoints?
I have a web-based dashboard with several tables spanning 80% of the page width.
Its a very typical responsive table design. A few columns (3-10), many rows (up to 100+), pagination, search filters etc.
| S/N | Name | Status | Timestamp | Description | Type | Content | Comment |
|---|---|---|---|---|---|---|---|
| 1 | Placeholder | Enabled | 2022-22-22 | This is an example sentence | A | XYZ | This is a comment. |
| ... | ... | - | - | - | - | - | - |
Due to the nature of our product, some users like to minimize this table (to approx. 500px width, or fill about 30% of the screen) to use as a supplement to another window which occupies most of the screen.
Without giving too much details, this is an example of how they like to use our dashboard (the window on the right)
The problem is that the table becomes a bit squished/compressed, especially if there are many columns (like 10). We implemented a page scroll but it becomes annoying to keep having to scroll.
Is there a best practice/guidelines to optimize the display of such tables for smaller screen displays, say,<500px? If not, how else would you render this table to not look 'squished'/ugly?