Move filtering outside table

[mgm1313]

I don't need a full worked-out solution, just a push in the right direction.

Table.jsx

import FilterModule from "./Filtering/FilterModule";

function Table(props) {
  ...
  const instance = useTable(
    { columns, data, defaultColumn, filterTypes, initialState },
    ...hooks
  );
  ...
  return (
    <FilterModule instance={instance} /> 
    <table>
     ... 
    </table>
  )
}

FilterModule.jsx

import React, { useCallback } from "react";

// Define a default UI for filtering
function FilterModule({ instance }) {
  const { allColumns, setAllFilters } = instance;

  const resetFilters = useCallback(() => {
    setAllFilters([]);
  }, [setAllFilters]);

  return (
    <div>
      <button onClick={resetFilters}>Reset</button>
      <div>
        {allColumns
          .filter((it) => it.canFilter)
          .map((column) => (
            <div key={column.id}>{column.render("Filter")}</div>
          ))}
      </div>
    </div>
  );
}

export default FilterModule;

What would be the approach to move the FilterModule outside of the Table component? Eventually I want to place it inside a sidebar, a component far away in the React tree.
Would I need to make a context? Any suggested resources to read? What's best practice here?
Thanks! :)

[mgm1313]

So I made some progress with this, by creating a FilterWrapper which can provide the instance as context:

import { useState, createContext, useContext } from "react";

export const FilterContext = createContext();

export const FilterWrapper = ({ children }) => {
  const [instance, setInstance] = useState();

  return (
    <FilterContext.Provider
      value={{
        instance,
        setInstance,
      }}
    >
      {children}
    </FilterContext.Provider>
  );
};

export const useFilterState = () => {
  return useContext(FilterContext);
};

I can now actually render the filter fields of each column anywhere on the page I like. Filtering of the table will then actually work, but the filter fields themselves don't actually update yet to show the current filter value. That's next thing I'll be working on.

Is this most efficient, best-practice solution? Most definitely not, so if anybody has any suggestions on a different/better approach please let me know! :)

[jaekunchoi]

did you get anywhere on updating current filter value? I am also looking into this

[ayushmalviya27]

Hey did you make any progress with this?
I'm also looking to implement the same feature.

I can easily move the global filter outside the table but not the column specific filters.

[ayushmalviya27]

Even a code sandbox template would be fine

[mgm1313]

Hi! Sorry no I haven't looked into this anymore, I changed my design to have the filtering within the same component. Hope you find a solution tho!

[HermanNygaard]

Here is a CodeSandbox with two examples

[fayezhao-au]

This can be used for filterValue update in the filter UI.
const [filterInput, setFilterInput] = useState(filterValue)
useEffect(()=>{
console.log('BBB', filterValue)
setFilterInput(filterValue)
}, [filterValue])