Column Resizing For Groups and Nested Tables

Open
#647 4 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
5/5
Estimated time
Over a week
Newbie friendliness
35/100
Issue type
Feature
Clarity
Needs clarification
Activity status
Stale
Tech stack
react, typescript
Domain
frontend

Research direction

No source files, tests, or entry points are named. Start by reproducing the grouped-column and nested-table resizing cases described in the issue, then trace the existing resize behavior for parent and child columns. Done should provide a clear way to resize grouped columns and keep parent and child widths matched without broken layout.

Written by the indexing model from the issue text.

Description

Is your feature request related to a problem? Please describe.
We are using collapsible nested tables for our customer facing UI. We are also making use of the groups feature to group columns together. We are using fixed widths to match parent and child column widths. But this means that some data gets truncated. We would like to use the resize functionality - but when we resize the parent column, the child column mismatches and leads to broken UI. Also the resize icon does not appear in the title cell in the group, and with only one column - this is not where a user would expect it to be.

Describe the solution you'd like
I would like the resize icon to appear in the top title cell in groups (with one column) or an option of this sort.
I would like to be able to match parent and child column widths.

Describe alternatives you've considered
I tried setting the keys of both tables to the the same key, but since column accessors are different, that did not work.

Additional context
Resize bar appearing in column name instead of top group
image

Resizable columns mismatch
{0CC87F67-57F7-43FD-9962-FC43BA539A76}

Is this feature expected anytime soon?
Would also be interested in contributing to a PR if something like this is coming up.

Dominant language
TypeScript
Stars
1.3k
Forks
102
No merged PRs in 30d

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.

More from icflorescu/mantine-datatable

All issues in icflorescu/mantine-datatable

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.