icflorescu / icflorescu/mantine-datatable
Add custom header icons (in the style of sortable, filterable, toggleable)
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 1.3k
- Forks
- 102
- PR merge metrics
- No merged PRs in 30d
Description
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.
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.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reading the existing sortable, filterable, and toggleable header-action implementations and the filter render path referenced in the issue. Clarify the supported API and scope before implementation; done should include a tested way to add custom header actions without unnecessary complexity.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100