Width and adjustment of arbitrary data tables

Question

We have a couple of similar pages in our web app where each shows merely a data grid for tabular data. They differ only in the type of data to be shown, i.e. with different number and kind of columns.

We have discussed the following options without any conclusion yet.

1. Make all grids full width no matter how many columns there are.

2. Make grids only wide enough for their number of present columns.

   a) Narrow grids are horizontally centered.

   b) Narrow grids are left-aligned.

Which one is better suited for the user?

Answer 1

Your second option is the most appropriate; otherwise, if columns are too width, you'll face content floating in your table cells, which will cause a high cognitive load. Columns have to be as wide as needed for the content, which means the entire table must accommodate the necessary space for those columns and nothing more.

As for the sub-items of your second option, I'm not sure if you refer to the position of the table in the layout or the width of the columns in your table. In the first case, it's a design decision; you can center vertically and horizontally if you want, it depends on your design system.

If what you mean is columns in the table, then their content must be aligned according to the type of content. Just in case, here's an excellent resource for data table best practices.

Answer 2

When you consider effort to impact, both options give you the same impact, but Option 2 has way less effort.

The "floating" mentioned by @Devin is definitely what I'm concerned about as well. When your table is too wide, the code that makes the table seat centered horizontally will allow the left/right borders to be off screen. And given that you don't know which pages will overflow, this issue will be fun to keep track of.

Here's a quick design mock up of how the "floating" might look:

Normal centered:

Overflowing centered (note that rectangle behind is the screen: