Difficulty making horizontal scroll line up

[HaveSpacesuit]

I'm having trouble implementing iTwin table with many columns. The horizontal scroll will not line up unless I set the min-width to undefined or 0 on the table, and I add a specific width to each column. But adding a width to each column causes the table to not fill available space if using fewer columns.

Column widths: unset
Table width: set by iTwin
A few columns look nice

But many columns don't line up, and the header doesn't scroll

---

Column widths: unset
Table width: manually styled as unset !important, overriding iTwin
Horizontal scroll works better, the header can scroll, but the columns are not lined up

---

Column widths: each is set to 150
Table width: manually styled as unset !important
Everything scrolls and lines up nicely

But with a few columns, the columns do not space out evenly, leaving the last column looking too large

---

Column widths: each is set to 150
Table width: set by iTwin
Horizontal scroll does not work

[mayank99]

Hi @HaveSpacesuit, what version of itwinui are you using? If you can post the result of npm ls @itwin/itwinui-css and npm ls @itwin/itwinui-react, that would be very helpful.

Initial horizontal scroll support was added in @itwin/[email protected] and later fixed in @itwin/[email protected] which uses @itwin/[email protected].

/cc @bentleyvk

[HaveSpacesuit]

I'm using 1.36.0. I did notice if I allow column resizing, as soon as I nudge any column everything snaps into place.

[HaveSpacesuit]

There is some problem with the text overflow. Removing white-space: nowrap htlps, except for the bit where I need the text to truncate. I'll keep playing at it.

[bentleyvk]

@HaveSpacesuit, can you prepare codesanbox with reproduction of this issue? Because I thought the problem might be too long strings but it is not causing this issue on my side.

[HaveSpacesuit]

@bentleyvk @mayank99 I've narrowed down the problem. If some columns have an undefined width and every column has a minWidth, the layout gets messed up. Here is a repo:

https://codesandbox.io/s/itwinui-react-minimal-example-forked-7in3qo

[HaveSpacesuit]

If you set all the widths to a number, the columns line up nicely. But when there aren't enough columns, the columns don't expand to fill available space.

[bentleyvk]

Instead of width, I used minWidth and added sizes manually for nicer look. I also used cellRenderer for ellipsis.
https://codesandbox.io/s/itwinui-react-minimal-example-forked-8f3ecq?file=/src/columns.ts