A way to get the data filtered by column filters and global filter separately.

[MAST1999]

Hi

It would be great if there were a way to get row data that is filtered only by column filters (without the global filters applied) and get a row model with only global filters applied.

My use case is like this. I built a table using @tanstack/react-table and it works excellently with filtering and sorting. Then I needed to build a chart that would use the filtered data from the table to draw. It only wanted data filtered by the column filters. Then I needed some cards which showed the data only filtered by the global filter. I looked through all the APIs for the table but couldn't find anything that would enable this.

It would be great if we had getFilteredByColumnFilter and getFilteredByGlobalFilter so that we could use those Data however we need to.

I think this is a bit niche but if it is accepted I can work on the PR myself as I've already done it (albeit kind of ugly) for our use case.

[Fawwaz-2009]

hey @MAST1999 did you ended-up finding a good solution for this?

[MAST1999]

Hi

I ended up forking the repo and adding it myself. Although its implementation isn't that great it gets the job done.

If you're interested I can give you the link to the fork.

[suryaelidanto]

It's actually pretty easy, i found it this way :
table.getFilteredRowModel().rows

[MAST1999]

That gives you results after both global filters and normal filters are applied.

I needed a way to get only normal filters without a global filter being applied.

[SStranks]

table.getPreFilteredRowModel().rows.filter((row) => row.columnFilters['__global__'] === true)

This is taking the table data before any filtering is applied, then just manually filtering the rows and checking if it has the global flag. All the column filters currently active appear in the columnFilters object.

[ankyeet]

I actually found a workaround for this. Make sure you have global filters configuration working. You can just disable the getFilteredRowModel:getFilteredRowModel() in your table configurations and create a custom filter for your columns:

const requiredData = useMemo(() => {
    if (columnFilters.length) {
      return data.filter((item) =>
        columnFilters.every((filter) =>
          (item[filter.id as keyof TData] as string).includes(
            filter.value as string
          )
        )
      )
    }
    return data
  }, [columnFilters, data])

Then you can assign this to your data in the

useReactTable({data:requiredData, ... rest of your configs})

by doing this it will work for global filter as required and for your text based column filters as well. Hope this helps.