mantine-datatable icon indicating copy to clipboard operation
mantine-datatable copied to clipboard

Pin multiple columns

Open noxan opened this issue 2 years ago • 3 comments

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 :)

noxan avatar Jan 31 '24 08:01 noxan

This is indeed a highly desired feature, that has been required and discussed before, see https://github.com/icflorescu/mantine-datatable/discussions/229 and https://github.com/icflorescu/mantine-datatable/issues/477 or https://github.com/icflorescu/mantine-datatable/issues/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:

https://github.com/icflorescu/mantine-datatable/blob/f8a40149f4a12b2e023cc81e2572ad493edc3342/package/DataTable.tsx#L149

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 avatar Jan 31 '24 14:01 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 avatar Jan 31 '24 14:01 icflorescu