Pin multiple columns

[noxan]

Describe the solution you'd like
We would love to pin multiple columns (to the left), think of firstname and lastname as two dedicated columns (for sorting) and we would love for both of them to remain sticky on the left (horizontal scrolling).

Describe alternatives you've considered
Was thinking of merging the two columns, but that would break sorting. Alternative would be grouping them, but the docs says that does not work either.

Additional context
While looking for other people who might have reported something similar, I stumbled across https://v2.mantine-react-table.com/docs/guides/column-pinning which supports pinning multiple columns - I prefer the styling and UX of this project, so would prefer not migrating - just as inspiration :)

[icflorescu]

This is indeed a highly desired feature, that has been required and discussed before, see #229 and #477 or #347.
At the moment I don't have enough resources to dedicate to this, but, as I mentioned before, I'm 100% open to a PR:

it would be fantastic if someone would provide some help with scaling this to something like pinLeftColumns: number and pinRightColumns: number.

I think it could be implemented by dynamically computing the size of the pinned columns at render time.
Here are some code starting points:

mantine-datatable/package/DataTable.tsx

Line 149 in f8a4014

const { ref: selectionColumnHeaderRef, width: selectionColumnWidth } = useElementOuterSize<HTMLTableCellElement>();

And the CSS to render the scroll shadows as needed, which is a bit convoluted and tricky:

https://github.com/icflorescu/mantine-datatable/blob/f8a40149f4a12b2e023cc81e2572ad493edc3342/package/DataTable.css#L101-L242

[icflorescu]

Just to clarify things for anyone bumping into this: it's not trivial but it can be done.
I'll address it at some point in the future, I just don't have the time/resources to do so now.

You can help speed up the process by:

• either giving it a try in a PR
• or, if your company is using Mantine DataTable and can afford it, sponsoring the development of the feature (drop me a message at the email address listed in my GitHub profile before) or hiring my services