Retain Filtered state of table when navigating back to the react-table

[Donn187]

Hi,

I would just like to ask your inputs on how I could achieve the following i am using react-table 7:

• Table is rendered
• apply dropdown filter to a column (ex. Column = 'Country' Value = 'Denmark')
• Table renders based on the filtered values.
• i select a item to that table that will navigate to a new component.

Then i click a button on that component that will go back to the table, I would like to retain the filtered state to be re-rendered (filtered by country value of 'Denmark')

[SindriBerg]

You should consider using something like local / session storage (or some kind of global state management) to save the state of the filter.
So that the value there is what it applies when rendered.

I use local storage for a sorting state on a table, to save the user's selected preferences.

https://usehooks-ts.com/react-hook/use-local-storage

This library has a lot of nice out-of-the-box hooks that you can utilize so you don't need to define your own.
It's fairly lightweight, so bundle size won't be a major issue.

[Donn187]

Hi @SindriBerg,

Thanks for providing this approach, ill further look into this. I'm curious on how the approach on applying the state of the filter. Can you provide more details/example?

[SindriBerg]

Can you provide me with some of the code you currently have?
Such as how you currently store / apply the filters.
Then I can more accurately pinpoint how I would approach it.

[Donn187]

Here in my main table:
const defaultColumn = React.useMemo(
() => ({
Filter: SelectColumnFilter
}),
[]
);

const {
getTableProps,
getTableBodyProps,
headerGroups,
rows,
prepareRow,
state,
preGlobalFilteredRows,
setGlobalFilter,
page,
canPreviousPage,
canNextPage,
pageOptions,
pageCount,
gotoPage,
nextPage,
previousPage,
setPageSize,
state: { pageIndex, pageSize },
} = useTable(
{
columns,
data,
defaultColumn,
initialState: { pageIndex: 0, pageSize: 50 },
manualSortBy: false,
disableSortBy: false,
autoResetGlobalFilter: false,
autoresetColumFilter : false,
autoResetAll: false,

  },
  useFilters,
  useGlobalFilter,
  useSortBy,
  usePagination,
);

Then here is my filter function (SelectColumnFilter):

function SelectColumnFilter({column: { filterValue, setFilter, preFilteredRows, id }}) {
const options = React.useMemo(() => {
var arr = new Array();
preFilteredRows.forEach(row => {
arr.push(row.values[id]);
});

var uniqueArray = arr.filter(function(item, pos) {
  return arr.indexOf(item) == pos;
});

return uniqueArray;

}, [id, preFilteredRows]);

const applyFilter = (e) =>{
setFilter(e.target.value || undefined);
};

// Render a multi-select box
return (
All {options.map((op, i) => ( {op} ))} </select> ); }

[Donn187]