ixrock/mobx-react-table-grid

Easy to use table grid layout ReactJS-component powered by native CSS-grid

mobx-react-table-grid's Issues

Add accessibility properties to table columns

We need to allow columns to be focusable with tab key. And accessibility props should be added also as well.

accessibility.with.columns.mov

This might work but need to distinct header column from "regular" ones.

Optimize UI performance for 100k+ items in table

Current downsides: (tested in demo with 100k items)

• freezing on initial data-processing, after that UI works fine (use workers?)
• resizing & sorting does small freeze & could work faster (maybe use more React.memo / React.useCallback)

Custom rows virtualisation react hook

Initial work is done in: useVirtualization.tsx

Requirements:

• easy way to handle dynamic heights of preloaded (once visible) table rows + update heights on Element/Window resize)
• allow to get rid of extra <div>-wrapping of each table row and use all in 1 css-grid (though wrapping with display: contents would be probably better choice due handling events for the row (e.g. onClick), that way table's heading columns will always consistent with content columns even when they have dynamic size, e.g. --grid-col-size-index: max-content)
• get rid of @tanstack/react-virtual as outdated dependency

Add ability to select/unselect multiple rows

Requirements:

• handle data in table-state.ts
• allow to select single table row
• allow to select/unselect all rows (could be affected by search or other filters if any)
• use checkbox or some row highlighting/selection/background (e.g. on whole row click)

Publish to npm

Requirements:

• handle all peerDependencies properly, final dist/index.js should be quite small
• properly build and export package library as common-js npm package mobx-react-table-grid (current attempt to use package via npm link mobx-react-table-grid has failed)

Add basic example of storable table state

e.g. use some adapter to window.localStorage so page reload will restore previously adjusted table view.

Make table sorting by single column by default

And allow multi-sorting when e.g. clicked column with Shift or Cmd (or provide custom key)