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

Column menu update - Add accessible resize option #563

Open
notsidney opened this issue Oct 15, 2021 · 3 comments
Open

Column menu update - Add accessible resize option #563

notsidney opened this issue Oct 15, 2021 · 3 comments
Labels
enhancement New feature or request good first issue Good for newcomers

Comments

@notsidney
Copy link
Contributor

notsidney commented Oct 15, 2021

Is your feature request related to a problem? Please describe.
Columns can only be resized by drag on the edges, but this is not an accessible method and is especially difficult on touch screens.

It can also be difficult to see where the click/drag target exactly is. MUI’s Data Grid is a good example of explicitly showing the drag target: https://mui.com/components/data-grid/columns/#resizing

Screen Shot 2021-10-15 at 17 54 50

Describe the solution you'd like
In the column menu, there should be an option to resize that opens a modal to set the column width, maybe with a preview.

image

@notsidney notsidney added enhancement New feature or request good first issue Good for newcomers labels Oct 15, 2021
@harinij harinij changed the title Add accessible resize option in column menu Column menu update - Add accessible resize option Oct 21, 2021
@ashutosh887
Copy link

I would like to work on this Issue!

@nithinrdy
Copy link
Member

nithinrdy commented Aug 3, 2023

@harinij @BeeBombshell , mind if I take a stab at this? I've looked through the tanstack API, but there doesn't appear to be a method or something to directly update a column's width programmatically -- resizing via dragging seems to be the only supported way of doing this (using getResizeHandler()).

However, I've been able to hack together a way to update a column's width by constructing a fake MouseEvent with the desired value, and then dispatching said event to the handler I mentioned above. Although a scrappy way of doing it, it works as expected,

If this approach looks good to you, I'd like to open a PR -- If possible, I'd also appreciate any designs to go off of :)
If not, I'd like your thoughts on what I could be missing here. Thanks!

Edit: I have yet to figure out a way to allow for a "Fit to data" option, but I figured I'd first get your thoughts on what I have so far, especially because the issue appears to be inactive.

@nithinrdy
Copy link
Member

nithinrdy commented Aug 6, 2023

I'm assuming actual code would better facilitate a discussion compared to a simple comment, opened a PR, PTAL!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request good first issue Good for newcomers
Projects
None yet
Development

No branches or pull requests

3 participants