icflorescu / icflorescu/mantine-datatable

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

Open
#552 5 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

documentation enhancement help wanted
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.
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.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.