react-table with filter and select column in the same table

Question

I'm trying to use react-table 7.5 to have a table with search bar and select by rows features. I have the code of both search and select row separately, but I can't make it work together.

This is my Table component:

 const Table = (...) => {
  const [data, setData] = useState(MOCK_DATA);
  const columns = useMemo(() => COLUMNS, []);

  const defaultColumn = React.useMemo(
    () => ({
      Filter: ColumnFilter,
    }),
    []
  );

  // table props
  let {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    footerGroups,
    rows,
    prepareRow,
    setGlobalFilter,
    selectedFlatRows,
    state: { selectedRowPaths },
  } = useTable(
    {
      columns,
      data,
    },
    useFilters,
    (hooks) => {
        hooks.visibleColumns.push((columns) => [
          {
            id: "selection",
            Header: ({ getToggleAllRowsSelectedProps }) => (
              <Checkbox {...getToggleAllRowsSelectedProps()} />
            ),
            Cell: ({ row }) => <Checkbox {...row.getToggleRowSelectedProps()} />,
          },
          ...columns,
        ]);
      },
    useRowSelect,
    useGlobalFilter
  );

  const stateF = state;

  const { globalFilter } = stateF;

  const backButton = (e) => {
    e.preventDefault();
    setTable(true);
  };

  return (
    <>
      <div
        className="Table"
        }
      >
                <GlobalFilter filter={globalFilter} setFilter={setGlobalFilter} />

        
          {isFirstTable ? "next" : "submit"}
        </button>
        <table {...getTableProps()}>
          <thead>
            {headerGroups.map((headerGroup) => (
              <tr {...headerGroup.getHeaderGroupProps()}>
                {headerGroup.headers.map((column) => (
                  <th {...column.getHeaderProps()}>
                    {column.render("Header")}
                  </th>
                ))}
              </tr>
            ))}
          </thead>
          <tbody {...getTableBodyProps()}>
            {rows.map(row => {
              prepareRow(row);
              return (
                <tr {...row.getRowProps()}>
                  {row.cells.map((cell) => {
                    return (
                      <td {...cell.getCellProps()}>{cell.render("Cell")}</td>
                    );
                  })}
                </tr>
              );
            })}
          </tbody>
        </table>
        <pre>
          <code>
            {JSON.stringify(
              {
                selectedFlatRows: selectedFlatRows.map((row) => row.original),
              },
              null,
              2
            )}
          </code>
        </pre>
      </div>
    </>
  );
};

So this is the code and the main issue is that the compiler says that state is not defined. Line 66:18: 'state' is not defined no-undef

I've deleted some extra lines that are not related with the issue, like the parameters Table receives.

This is my first question here so I hope I was clear enough. Thanks!

Answer 1

Using the Global filter(Front-end filter), you can easily manage only it using the selectedRowIds react-table In-build variable.

I have implemented the whole project in This link.

https://codesandbox.io/s/admiring-wood-8rxinu?file=/src/components/DataTable.js:2212-2226

I hope this helps you