Filtering multiple columns with the help of an external input

[notsane]

Our ui-design specification is asking for a external input when filtering the table. It can not be part of the table-component without some really ugly CSS as a workaround.
I had a solution for an early beta version, that worked for one row. But now i cannot find an answer to this problem for the 7.0.0 release.

The old solution utilized useTableState.

[bartoszgolebiowski]

I have solved this issue in that way

Where inside TableComponent:

export const PaginationFilterTable = ({
  getTableProps,
  getTableBodyProps,
  headerGroups,
  prepareRow,
  rows,
  page,
  gotoPage,
  setPageSize,
  state: { pageIndex, pageSize, globalFilter },
  setGlobalFilter,
  preGlobalFilteredRows,
  setSearchProps,
  loading = false,
}: PaginationFilterTable) => {
  const classes = useStyles();

  useEffect(() => {
    setSearchProps({
      globalFilter,
      setGlobalFilter,
      preGlobalFilteredRows,
    });
  }, [rows, setSearchProps]);

And SearchBar:

function GlobalFilter({
  preGlobalFilteredRows,
  globalFilter,
  setGlobalFilter,
}) {
  const count = preGlobalFilteredRows.length

  return (
    <span>
      Search:{' '}
      <input
        value={globalFilter || ''}
        onChange={e => {
          setGlobalFilter(e.target.value || undefined) // Set undefined to remove the filter entirely
        }}
        placeholder={`${count} records...`}
        style={{
          fontSize: '1.1rem',
          border: '0',
        }}
      />
    </span>
  )
}

[roxxid]

I am trying to use multiple globalFilters. How should I proceed with that? Just starting out ANY help is appreciated.