Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add custom header icons (in the style of sortable, filterable, toggleable) #552

Open
noxan opened this issue Feb 26, 2024 · 3 comments
Open
Labels
documentation Improvements or additions to documentation enhancement New feature or request help wanted Extra attention is needed

Comments

@noxan
Copy link

noxan commented Feb 26, 2024

Describe the solution you'd like
I'd love to add custom header actions (icons) in the style of sortable, filterable, toggleable. Filter comes closest, as it allows to show a custom overlay, I'd like to take it a step further and allow any kind of action handler, custom icons, possibly a render function, etc.

Use cases are for example:

  • Edit: rename the column title
  • Remove: similar to toggle, but custom logic
  • Move left/right: without drag and drop, shift the column to the left or right

Or potentially even allow to override the default implementations (for sortable, filterable, toggleable) in order to put them into a context menu (nesting) or override their default behavior.

Describe alternatives you've considered
Hijacked the filter feature to add custom buttons within its render function. It works, but not really the right icon (no way to override that), nor the intended use case.
Screenshot 2024-02-26 at 3 46 29 PM

Alternatively was considering to use the onContextMenu for header columns. The event triggers, but there weren't any examples on how to use it for the header column and I don't need it anywhere else yet, so wanted to avoid the extra dependency and overall overhead.

Additional context
Depending on how we implement this, it could add a lot of overhead and unnecessary complexity. Maybe there is a more clever way to achieve this? Also might make sense to have some collapse feature (if there are too many header action icons, they get moved into a context menu) or only allow custom header actions within a context menu (one icon with three dots visible, opens a popover) by default.

@noxan
Copy link
Author

noxan commented Feb 26, 2024

PS: Happy to help with the implementation, but would love feedback on the approach first. Here a short sketch in code of what it might look like main...noxan:mantine-datatable:main

@icflorescu
Copy link
Owner

I'm a bit up to my ears in a commercial project at the moment (oss maintainers have to eat too 😉), but I like the idea, so I'm open to a PR on the matter. I am a bit worried about the added overhead, though.

@icflorescu icflorescu added documentation Improvements or additions to documentation enhancement New feature or request help wanted Extra attention is needed labels Feb 28, 2024
@noxan
Copy link
Author

noxan commented Feb 29, 2024

@icflorescu thanks for being so transparent and highly appreciate how responsive you are given the situation :)

I will draft a first attempt and try to keep it simple. If you have any considerations or constraints (as I'm quite new to this project) I'd be glad to hear and learn. I'll give you an update about next week with some code and thoughts.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
documentation Improvements or additions to documentation enhancement New feature or request help wanted Extra attention is needed
Projects
None yet
Development

No branches or pull requests

2 participants