How do I get the size of filtered data?

[kaeevans]

I'm using the client-side global filter, and I'd like to get the total number of rows in the filtered data so that I can display some text that says "Showing 14 / 1440 results" after the user searches for a query. How do I get the size of the filtered data?

[KevinVandy]

like table.getFilteredRowModel().rows.length ?

There's a bunch of row models to query for the internal rows like this

https://www.mantine-react-table.com/docs/api/table-instance-apis

[kaeevans]

table.getFilteredRowModel().rows.length gets the size of the filtered data one time step after it happens. For example, if I type "b" into the global filter, table.getFilteredRowModel().rows.length doesn't change. But if I type another character, table.getFilteredRowModel().rows.length will now have the correct value for when globalFilter == "b".

How do I get the up-to-date filtered data?

[kaeevans]

I was able to get this to work by using useState and useEffect:

  const tableInstanceRef = useRef<MRT_TableInstance<typeof data[0]>>(null);
  const [globalFilter, setGlobalFilter] = useState("");
  const [filteredData, setFilteredData] = useState(data);
  useEffect(() => {
    setFilteredData(tableInstanceRef.current?.getFilteredRowModel().rows!);
  }, [globalFilter]);
  
  return (
    <>
      <Text>{`Showing ${filteredData.length} / ${data.length} results`}</Text>
      <MantineReactTable
        columns={columns}
        data={data}
        tableInstanceRef={tableInstanceRef}
        state={{ globalFilter: globalFilter }}
        onGlobalFilterChange={setGlobalFilter}
      />
    </>
  );

[rrahul789]

Hi, is there any way for text type filter i can include enter button for filtering the data i.e. it should start filtering only when i click the enter buttonmanually?