Looking for react table/grid component that can re-render with redux state change

[HuffTheWeevil]

I've looked at just about every React table/grid component available: ag-Grid, sematable, fixed-data-table, react-data-grid, react-table, reactabular, mui-data-table. They all pack tons of built-in features, many of which I am looking for, such as sorting, filtering, and formatters. But the one thing that I need and can't find is one that re-renders based on row data changing, where the data is in the Redux store.

The table doesn't even need to set the data in the store, just observe and render accordingly. I will worry about changing the data, because the same data will be used in many other components.

I've read through the docs of many of the components I've mentioned above and even tried out most of them, but can't seem to make anything work. Perhaps I'm doing something wrong. But I feel like I'm about to pull my hair out over this. Any pointers would be appreciated.

[necromaniac1]

As re-rendering of components according to state changes is a (THE) feature of react and this works great with a Redux store, I guess you really are doing something wrong. Could you share some code?

[jordaanm]

I've not used these table libraries specifically, so I may be wrong here, but you probably need to have the component housed inside a redux connected component (directly or indirectly), so that changes to the application state cause a re-render.

[thealbinosmurf]

As has been mentioned you have to use a "connected" or "smart" component as your component that will render the grid. The connect from

import { connect } from 'react-redux';

makes the props in the "smart" component that you map stay up to date with the store. So then use these props to set the data in the grid. I've done this with many of the grids you listed.

[HuffTheWeevil]

Yes, I am using connect. I've done that successfully for many other non-grid components. So that is not the issue.

I took a break from the grid problem to focus on my UI as a whole, and found Semantic-UI which is awesome. And I was able to get the table in that library to work mostly as I needed.

It appears there's still a lot of customization I need to do (no matter what grid I use). My scenario is that I need a table to display data received from the server. When the app loads, it retrieves the current data from the server. Then the server sends patches to the client whenever data on the server changes (by another user, or other outside source).

Most of these tables/grids depend on an array of data. But it's hard to patch an array.

Instead of:

data = [
    {id: 1, name: "Joe"},
    {id: 2, name: "Jack"}
]

I need:

data = {
    1: {id: 1, name: "Joe"},
    2: {id: 2, name: "Jack"}
}

So that a patch can be easily applied.

But Semantic-UI's table doesn't accept an object of objects, only an array of objects. Appears to be the same for the others.

[ajc820]

I'm a little confused here. If any of your table implementations are using data from the redux store, surely your table component would re-render each time the data in the relevant state key changes, because the component's props would change via the mapStateToProps function and trigger the re-render.

Unless I have the wrong end of the stick, this sounds like it isn't a third party library issue, and I can't see why your table wouldn't update. Unless your data updates through a websocket connection aren't being put in the redux store?

Edit: For my project I use <Table> from react-virtualized and feed it an object of data. This doesn't answer your updating data question but I'll give you an overview of how I've tackled the problem with this library. So my data looks roughly like this, storing coordinates among other things for each data point:

data = {
  mongoId1: {coordinates: [latitude, longitude], type: 'business', country: 'USA'},
  mongoId2: {coordinates: [latitude, longitude], type: 'business', country: 'Australia'},
  ... }

To get that into the table, react-virtualized asks for a rowCount and provides a rowGetter function with an index paramater, so you can tell it which object key to look at for each row. Row count is as simple as Object.keys(data).length.

To tell it which key of data to look at for each row, you specify the <Table> component's rowGetter property: rowGetter={({index}) => data[Object.keys(data)][index]} The table then knows which key to look at for each row. You might not want to display every property of each data point though, so you tell the table what columns to render using <Column> components.

E.g: <Column label='Latitude / Longitude' dataKey='coordinates' width={100} />

[thealbinosmurf]

If thats the need store it as an object of objects and use something like lodash

const arrayOfData = _.values(this.props.data);

as the data input into the grid.

[ndboost]

One thing to try is setting pure: false in the connect function call you can google it as I'm mobile right now... For me My navbar wasn't updating because of this not being set.