<DataTable>: No width limit when condensing or expanding columns

[jocelyn-dunkley]

These are all related to the same issue (I believe) so I have put all my observations here. Please let me know if I should create separate issues for some of them.

Describe the bug

1. I am allowed to expand the column beyond the screen width. As a result I cannot edit the width again because the adjuster is beyond the screen size. So I must expand my own browser size and the cycle continues
2. Along with issue 1, I can expand the width of the 2nd to last column so much that the last column goes off the screen and I can't access it anymore
3. I am allowed to condense the width of the column much smaller than I expect. But there is still padding on the left side and none on the right. When I hover over the column header, more of the header title is shown but not the whole thing.
4. If I condense multiple columns the whole table width decreases. But the DataTableManager table settings stay in the same position.

Expected behavior

Issue 1: I expect to only expand the width to the screen size and nothing more. If I increase or decrease the browser width I expect the table to expand or contract along with it.

Issue 2: I expect that the last column has its limit and the 2nd to last column doesn't override it. All the columns stay within the browser width.

Issue 3: I expect the column width limit to be when the column header text is wrapped and the sort option is still visible.

Something like this:

Right now it is this:

Also the left padding should adjust with the width so the padding is always even.

Issue 4: I expect the whole table width to stick to the 100% width of the browser. The column widths will adjust within that. But the whole table width should not move.

Screenshots

[jaikumar-tj]

@jocelyn-dunkley I can answer a few of the above issues.

I am allowed to expand the column beyond the screen width. As a result I cannot edit the width again because the adjuster is beyond the screen size. So I must expand my own browser size and the cycle continues

The table columns are not fixed and as a result, users can add 'n' columns according to their wishes. So even if you expand beyond the viewport, the table becomes horizontally scrollable. You don't have to expand your browser size, instead you can simply scroll the table horizontally. If we prevent that, then the table becomes too congested with so many columns.

Along with issue 1, I can expand the width of the 2nd to last column so much that the last column goes off the screen and I can't access it anymore

In addition to the above explanation, Some of our customers don't use the default columns, instead they add attributes and other columns via column manager, they set columns of different widths according to their usage since they can access them by scrolling horizontally.

Issue 3: I expect the column width limit to be when the column header text is wrapped and the sort option is still visible.

Our Rewe customer have showed us their minimal design. They shrink the "Status column" so much, that only the dot icon was visible in our previous MC. Infact they mentioned this issue after our new design change. So they want to keep the column to be so small, that the information they need is observed without taking up more space.

[jocelyn-dunkley]

The table columns are not fixed and as a result, users can add 'n' columns according to their wishes. So even if you expand beyond the viewport, the table becomes horizontally scrollable. You don't have to expand your browser size, instead you can simply scroll the table horizontally. If we prevent that, then the table becomes too congested with so many columns.

Ah ok I see the horizontal scroller. The issue was I couldn't see it unless I scrolled down so I didn't know it was an option. Has there been a consideration to make the table footer sticky (page change and items per page)? Because if even 1 of the rows has a lot of content the table turns into one big block of data and white space and it's hard to figure out where things end.

Our Rewe customer have showed us their minimal design. They shrink the "Status column" so much, that only the dot icon was visible in our previous MC. Infact they mentioned this issue after our new design change. So they want to keep the column to be so small, that the information they need is observed without taking up more space.

But what about the header title? It is still overflowing with the next header so unless you remember every column, I imagine you'll have to expand it to see what the title is then contract it again. Maybe we could add a tooltip that shows the full name on hover or at minimum add ellipses (...) so the content doesn't go into the next column.

It brings up the questions if we should have smaller options depending on the width (like shows dots or something small instead of the stamps with text when the width is less than x). I'll chat with you privately about that.

[jaikumar-tj]

** as there been a consideration to make the table footer sticky (page change and items per page)?**

Yes, we used to have MAX_HEIGHT for table and the bottom pagination was always visible. But during the redesign phase, we ran into few issues and it was decided to remove the max height prop and that's why you don't see the footer.

[jocelyn-dunkley]

Could we explore the max height idea again? Because otherwise the page structure is way too fluid and you don't know when things end.