Best way to Display Responsive Tables on Small Breakpoints? [duplicate]

Question

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?

Answer 1

1. A simpler approach to enhance the user experience is to freeze the first few important columns to provide context as user scroll horizontally. You can refer to Excel on this.
2. Another option is column grouping, however this might affect your data structure. For example column name: (Sale Price, Cost Price, Total Quantity, On order, Available)

You can group the columns according to category:

Hope it helps