Is it common to have both horizontal and vertical scrolling for tables with fixed height?

Question

I am working on a table of fixed height and due to the large data, I need both vertical and horizontal scrolling. Although, I am thinking that users might get confused.

If it is ok to use them both, what would be potential ux adjustments that I could make to the table in order for the users to know that there is more content and scrolling is required? (e.g. not displaying the entire row at the end of the table or use shadows or have the scrollbars always visible)

Answer 1

It is common in ERP (Enterprise Resource Planning), CRM and a lot of other tools. The main question is: What is the key ID the user is looking for in this data table?

Let start it from the very basics:

• All data tables have these three common build blocks: Column, Row, Cell.
• Column and rows help the so-called scanning.
• The cells help to identify the key data, information, etc.
• If it is about scrolling, the main question is: is there any redundant information in this data table? Like all the columns contains information about a date. (YYY.MM.DD - 2020.09.30). Or the rows are redundant? (Fix content like Screen size, OS type, 5G compatibility etc. where the columns contain the name of each of the products.)

So the main quest is: how user scans this data table?

• It is column specific? (Vertical)

• Or it is row specific? (Horizontal)

The use case for vertical scrolling: Choosing the column > Scrolling and scanning > Identifying.

The use case for horizontal scrolling: Scrolling and scanning > Identifying > Choosing (the related column)

What is the key identifier in a data table?

• Mostly it is in the very first 2-3 columns or rows. Like ID, Class, Name (Unique identifier)

Best practices:

• If there is a row or column that is redundant, you can make it collapsible or put them into a dropdown menu.
• Or you can add an arrow (Right-Left) next to them.(If the column contains the date, the use just can step between days or weeks or months etc.
• You can make the very first column (of first 1-2 columns) fix. They will stay on the left side of the screen and every other columns are scrollable. (Sticky columns)
• You can add a Settings menu where user can turn on/off which column or row should be visible.
• You can also add accordion to these data tables, so groups of rows or columns can be closed or opened.

And there are plenty of other solutions. Search for mobile ready or mobile friendly data tables. ;)