Pin multiple columns about mantine-datatable

[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

[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