How to pinning 2 columns?

[ChanoPark]

hello!
I am using your library well.
Thank you.

I want to pin multiple columns. (I want to anchor multiple columns to the left like in your document.)

I wanted to fix the expand button and the first column, so I tried the following.

But the expand button is covered by the first column. Perhaps, it is because of the relatively low z-index.

How can I move the expand button and the first column together?

I have additional questions.

• How can I indent when a row is expanded? The size is fixed so it doesn't seem to be indented.

Thanks again.

[KevinVandy]

You might just need to make the column wider with the size option on a column. Otherwise, share a screenshot for what problem you are running into.

[KevinVandy]

Using the displayColumnDefOptions prop, you can change the min-width (minSize) of expand column, or even it's z-index if you want.

https://www.material-react-table.com/docs/guides/display-columns#customize-built-in-mrt-display-columns

[ChanoPark]

I tried the following:

It works fine if I change only the z-index without changing the size. But when I set the size it doesn't work. (It does not become a z-index setting.)
I want the cell to be as big as the arrow (max-content).

Without resizing it would look like this:

I tried various things, but could not get an answer.
I'm sorry to bother you. T.T

[KevinVandy]

Use integers for size. The unit is pixels.

[KevinVandy]

Also zIndex would have to be in an sx prop since it is CSS.

[ChanoPark]

I think the z-index doesn't seem to apply if the size is smaller than the expand button.
I solved it by setting size to 25. Thank you for your kind reply.

[ingegneri-bruno-clorox]

Yes, I was able to make it pin 4 columns to the left even using layout: semantic but, without the auto-sizing feature for the column. It seems that these above solutions for multiple left column pinning does not cover the scenario where I want to use both layout: semantic for table configuration and size: auto for the columns.

Just to clarify, I call it auto-sizing when I explicitly declare size: auto for the column. Without this parameter, it automatically sets a default column width, but it does not make the best use of the available space.

And I did not want to open a brand-new discussion for it because it falls under similar issues, and keeping it together would facilitate other users finding the best approach for their cases.

Is there a solution to combine both multiple column pinning and column auto-sizing?