Passing Props to Filters using useFilters hook

[aoloo]

The documentation shows examples on how to implement filters using useFilters. But I am running into a use case where I need to pass props in addition to filterValue, preFilteredRows, setFilter etc... . When I pass my props into my TextFilter function the state value is incorrect? As I debug my implementation Foostate initially has the correct state values prior hitting my TextFilter function. But once I have entered my TextFilter function my FooState value is incorrect. Implementation shown bellow.

  const defaultColumn = useMemo(
    () => ({
      Filter: TextFilter,
      FooState: FooState,  debuger output shows //ReactTable.js:141`{BarSearchBoxComponent: "", hello: "world"}`
      setFooState: setFooState,
    }),
    [FooState],
  );

function TextFilter({
  column: {
    filterValue,
    preFilteredRows,
    setFilter,
    filteredRows,
    FooState,
    setFooState,
    ...rest
  },
}) {
  console.log(FooState); //debuger output  {BarSearchBoxComponent: "" } 

  return (
    <span>
      <CustomComponent
         ....
        value={FooState[rest.Header] || ''}
        ...
      />

      <Input
         name="textValue"
         label={`Search ${rest.Header.charAt(0).toUpperCase() + rest.Header.slice(1)} Column`}
          inputProps={{
          value: filterValue || '',
          onChange: (e) => {
          const newFooState = {
              ...FooState,
              ...{
                [rest.Header]: e.target.value,
              },
            };
            setFooState(newFooState );
            setFilter(e.target.value || undefined);
          },
        }}
      />
    </span>
  );
}

My props state is incorrect. It should {BarSearchBoxComponent: "", hello: "world"} than {BarSearchBoxComponent: "" }

What is the best to way pass props to our custom filter functions?

[gargroh]

Pass custom props in table options itself, something similar to https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/editable-data?file=/src/App.js:2540-2560

[aoloo]

@gargroh Thank you for your response. I saw in your code sandbox you added autoResetPage: !skipPageReset, in your useTable options. But its not clear how you would access the autoResetPage property? For my cause If I pass FooState in the table options how can I utilize it in the TextFilter function? Please help thanks!

[gargroh]

Directly instance.customProp