search

TanStack / table

🤖 Headless UI for building powerful tables & datagrids for TS/JS - React-Table, Vue-Table, Solid-Table, Svelte-Table
https://tanstack.com/table
MIT License
25.17k stars 3.08k forks source link

Keyboard navigation #697

Closed drakipovic closed 6 years ago

drakipovic commented 6 years ago

Is it possible to add keyboard navigation of cells to react-table? Use case would be similar as in excel spreadsheets, user can navigate cells with arrow keys and then on enter you can edit cell.

gary-menzel commented 6 years ago

Basically - you have to build all of it yourself (probably with a keyboard handler external to ReactTable). You'd also need to manage highlighting the cells (the -highlight className is really only using a :hover in the CSS). You will also need to manage the state of which cell is "selected". You also need to implement the cell editing yourself (there is an example of this in the docs).

So - you could - it's possible. But if you want a "spreadsheet" type of component then you should probably get one that specifically does that (ReactTable was not designed for that and doesn't have any internal support for keyboard navigation).

drakipovic commented 6 years ago

Thanks for the quick response! I thought so.

How could I know that cell is selected other than wrap every cell in some div?

gary-menzel commented 6 years ago

Well - that is what you would have to decide. Each column has a unique ID based on the accessor (or what you provide for id in the column definition). You'd have to manage the state somewhere in your application (either the state of the wrapping component or some other state management technology like Redux or MobX if you use centralised state).

Then you have to worry about the fact that a cell on the screen is just on the screen (there is a viewIndex internally which can be accessed in the various components that can be overridden - so you'd need that as well).

Basically it is ALL up to you.

This is why I say you probably should consider a spreadsheet component instead of a table component if that is a key requirement.

GuptaSiddhant commented 3 years ago

This can add basic keyboard navigation. More cases can be added to switch for row selection, expansion and click. https://github.com/tannerlinsley/react-table/discussions/2752#discussioncomment-192558

konsalex commented 1 year ago

Check comment in the other thread @drakipovic : https://github.com/TanStack/table/discussions/2752#discussioncomment-6565962