fully controlled table doesnt update

[ljmerza]

Im looking at the fully controlled example but wehen i try to add things like pagination, filtering, solumn visibility, none of these things work. the i see the setState get called on change but the state stays the same. Not sure hwat im doing wrong here. Without fully controlling the state all these feature work

for exmplae simply add this to the controlled pagination example and now the pagination doesnt work

// Manage your own state
  const [state, setState] = React.useState(table.initialState);
  console.log({ state });

  // Override the state managers for the table to your own
  table.setOptions(prev => ({
    ...prev,
    state,
    onStateChange: setState,
  }));

[abhimax]

Assuming you've added your state management as you mentioned

const [state, setState] = React.useState(table.initialState);
console.log({ state });

table.setOptions(prev => ({
...prev,
state,
onStateChange: setState,
}));

Now, to manage pagination manually, you can set the pageIndex and pageSize properties in your state when the user interacts with the pagination controls. You'll need to update these properties in your state when the user changes the page. Here's an example.

// Handle changing the page
const handlePageChange = newPageIndex => {
// Update the pageIndex in your state
setState(prevState => ({
...prevState,
pageIndex: newPageIndex,
}));
};

// Handle changing the number of items per page
const handlePageSizeChange = newPageSize => {
// Update the pageSize in your state
setState(prevState => ({
...prevState,
pageSize: newPageSize,
}));
};

In your table component, you can now set the pageIndex and pageSize to those values from your state

<ReactTable
columns={columns}
data={data}
pageSize={state.pageSize}
pageIndex={state.pageIndex}
onPageChange={handlePageChange}
onPageSizeChange={handlePageSizeChange}
// other props...
/>

Cheers!