Skip to content

[DataGrid] Add tabNavigation prop to control tab navigation in the grid #20286

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.

Sign up for GitHub

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

Jump to bottom
Merged
arminmeh merged 16 commits into from
Nov 18, 2025
Merged

[DataGrid] Add tabNavigation prop to control tab navigation in the grid #20286

arminmeh merged 16 commits into from
Nov 18, 2025

Conversation

@arminmeh
Copy link
Contributor

@arminmeh arminmeh commented Nov 12, 2025 •
edited
Loading

@arminmeh arminmeh added accessibility a11y scope: data grid Changes related to the data grid. type: new feature Expand the scope of the product to solve a new problem. labels Nov 12, 2025
@mui-bot
Copy link

mui-bot commented Nov 12, 2025 •
edited
Loading

Deploy preview: https://deploy-preview-20286--material-ui-x.netlify.app/

Updated pages:

Bundle size report

Bundle Parsed size Gzip size
@mui/x-data-grid 🔺+1.59KB(+0.40%) 🔺+302B(+0.25%)
@mui/x-data-grid-pro 🔺+1.65KB(+0.34%) 🔺+315B(+0.22%)
@mui/x-data-grid-premium 🔺+1.59KB(+0.25%) 🔺+280B(+0.15%)
@mui/x-charts 0B(0.00%) 0B(0.00%)
@mui/x-charts-pro 0B(0.00%) 0B(0.00%)
@mui/x-charts-premium 0B(0.00%) 0B(0.00%)
@mui/x-date-pickers 0B(0.00%) 0B(0.00%)
@mui/x-date-pickers-pro 0B(0.00%) 0B(0.00%)
@mui/x-tree-view 0B(0.00%) 0B(0.00%)
@mui/x-tree-view-pro 0B(0.00%) 0B(0.00%)

Details of bundle changes

Generated by 🚫 dangerJS against 8c62749

@arminmeh arminmeh marked this pull request as ready for review November 12, 2025 10:30
cherniavskii
cherniavskii approved these changes Nov 12, 2025
View reviewed changes
@arminmeh
Copy link
Contributor Author

arminmeh commented Nov 13, 2025

@mapache-salvaje I have updated the page to use "code snippet in PascalCase" style when referring to the grid.

MBilalShafi
MBilalShafi approved these changes Nov 13, 2025
View reviewed changes
Copy link
Member

@MBilalShafi MBilalShafi left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Very nice addition 🎉

packages/x-data-grid/src/hooks/features/keyboardNavigation/useGridKeyboardNavigation.ts
Copy link
Member

@MBilalShafi MBilalShafi Nov 13, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Similar to row editing, does it make sense with cell editing to put the subsequent cell in edit mode if Tabbing from an cell being edited (same for the header filter row), it'll be closer to tools like excel and save extra Enter key presses.

Screen.Recording.2025-11-13.at.15.23.24.mov

Copy link
Contributor Author

@arminmeh arminmeh Nov 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have checked the Numbers app and Google Sheets, and they have the same behavior that we have at the moment.
Hitting Tab while editing a cell will move to the next cell, but it will not be in edit mode.
You can, however, start typing to insert the data, same as in the grid.

mapache-salvaje
mapache-salvaje reviewed Nov 17, 2025
View reviewed changes
Copy link
Contributor

@mapache-salvaje mapache-salvaje left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

some small style nitpicks here otherwise looks good!

arminmeh and others added 2 commits November 18, 2025 08:33
@arminmeh @mapache-salvaje
docs update
1f5286d 
Co-authored-by: mapache-salvaje <71297412+mapache-salvaje@users.noreply.github.com>
Signed-off-by: Armin Mehinovic <4390250+arminmeh@users.noreply.github.com>
@arminmeh
Merge branch 'master' into grid-tabbing
8c62749
@arminmeh arminmeh merged commit 3136d63 into mui:master Nov 18, 2025
21 checks passed
@arminmeh arminmeh deleted the grid-tabbing branch November 18, 2025 08:49
@PeturSteinn
Copy link

PeturSteinn commented Nov 18, 2025

Tears of joy when I got an email from GitHub telling me that the issue has been closed 🥹

bernardobelchior added a commit to bernardobelchior/mui-x that referenced this pull request Nov 19, 2025
@bernardobelchior
Revert "[DataGrid] Add tabNavigation prop to control tab navigation…
782c3fd 
… in the grid (mui#20286)"

This reverts commit 3136d63.
mapache-salvaje added a commit to mapache-salvaje/mui-x that referenced this pull request Dec 29, 2025
@arminmeh @mapache-salvaje
[DataGrid] Add tabNavigation prop to control tab navigation in the …
1de0017 
…grid (mui#20286)

Co-authored-by: mapache-salvaje <71297412+mapache-salvaje@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@mapache-salvaje mapache-salvaje mapache-salvaje left review comments

@MBilalShafi MBilalShafi MBilalShafi approved these changes

@cherniavskii cherniavskii cherniavskii approved these changes

Assignees

No one assigned

Labels

accessibility a11y scope: data grid Changes related to the data grid. type: new feature Expand the scope of the product to solve a new problem.

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[data grid] Keyboard navigation using Tab key

6 participants

@arminmeh @mui-bot @PeturSteinn @MBilalShafi @cherniavskii @mapache-salvaje