Recommended use with observables (mobx) & React

[sergioisidoro]

We use Mobx as a state management solution. This has proven to be quite challenging to intergrate with Tanstack table when we need to update the state with observables.

We're passing an observable array of observables to the table, which ideally would only re-render the cells and rows of the table that have been chagend. We've tried to implement cell and row renderers to try to achieve that, but without luck.

It seems to be a fundamental assumption of TanStack that every time the state gets updated, a full new copy of the state needs to be passed. This leads us to the our horrible hack of serializing our entire state to JSON, in order to touch all the attributes of the table data, such that all attributes are observed on the top most Table Wrapper component, and trigger a re-render when they are changed.

  const table = useReactTable({
    data: data,
    ...
  });
  
  autorun(() => {
    JSON.stringify(data);
  });

There are slighlty less horrible ways to do this (eg. only touching the data that are in the columns, preventing some degree of re-rendering), but I'm wondering if there's any other way of triggering sellective re-renders

I've found a very primising showcase for AG-Grid that is able to add observable listeners to the rows / cells, and imperatively update the state (but only the necessary rows)

https://github.com/nareshbhatia/aggrid-mobx-optimization

See specifically: https://github.com/nareshbhatia/aggrid-mobx-optimization/blob/master/src/order-table.js#L25

I was wondering if it would be possible to make something similar for a lightweight integration for mobx, something like:

cell: ({ row, table }) => {
    observe(row.original, event => {
        table.setState({ data: [...table.state.data, event.newValue] })
    });
}

I have tried, but so far I have been unsuccessful.

My question is - what is the currently recommended way to use tanstack table with observable libraries like Mobx

Related issues and discussions:

• [v7] and MobX - looking for an advice #2437

[abiodunooni]

I think it will be helpful to have a sample mobx implementation with Tanstack Table.
I'm having a ton of issues getting it to work well in my app.
Either updates to mobx don't immediately reflect on Tanstack Table, or (when using mobx slice on the data) see updates reflect immediately but sorting and filtering breaks the page