Dynamically update column header based on filtered data

[kamigerami]

Hello, I'm using your Material-React-Table library in my project and would like to know if it's possible to dynamically update a column header based on the current filtering applied to the table data.

Here's an example to illustrate my use case:

Let's say I have a column header called "Items" and there are 10 rows in the table, each containing the data "1" in each row for that column. If I apply a filter to the table so that it displays only 3 rows with 1 item each, I would like the header for that column to be updated to "Items (3)" to reflect the current number of displayed items.

Is there any built-in functionality to achieve this or could you suggest a possible approach to implement this feature?

Thank you for your help and for creating this great library!

[kamigerami]

so It seems like I can use the tableInstanceRef.current.getFilteredRowModel();
like so :

const filteredData = tableInstanceRef.current.getFilteredRowModel();
    const totalItems = filteredData.flatRows.reduce((acc, curr) => {
      return acc + parseInt(curr.original.number_of_items);
    }, 0);
    

however it seems to only run once initially and not after i've filtered for some data.

[kamigerami]

@KevinVandy do you have any idea? I basically want the Global Filter to function the way it does but just re-calculate some data whenever the filter (global filter) is applied and the user searches for something in the TextField input and then display that data in the column header.

[KevinVandy]

The problem with reading from a ref is that it does not trigger rerender. It's better to read from a table param

[kamigerami]

Thank you for the quick reply!

I am currently using the onKeyUp event in the muiSearchTextFieldProp with this ugly hack
to have it update the header with the totalcount :

are you suggestion that I use the table param inside the muiSearchTextFieldProp ?

  const handleSearch = (searchValue) => {
    const filteredData = tableInstanceRef.current.getFilteredRowModel();
    const totalStores = filteredData.flatRows.reduce((acc, curr) => {
      if (curr.original.number_of_stores) {
        return acc + parseInt(curr.original.number_of_stores);
      }
      return acc;
    }, 0);
    setTotalStores(totalStores);
  };

  const columns = React.useMemo(
    () => customerInformationColumns({ totalStores }),
    [totalStores]
  );
  
  
   <MaterialReactTable
          tableInstanceRef={tableInstanceRef}
          muiSearchTextFieldProps={({ row }) => ({
            onKeyUp: (event) => {
              debouncedHandleSearch(event.target.value);
            },
          })}
         // ... rest of code
         />
         

[kamigerami]

Ok got it!

so something like

      muiSearchTextFieldProps={({ table }) => {
        handleCalculateTotal(table);
      }}