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.

[aashu0148]

how about doing calculations separately ?

 const allRows = table.getCoreRowModel().rows;
  
  // Manually filter the rows based on selected filters
  const filteredRows = allRows.filter(row => {
    return selectedFilters.every(filter => {
      const column = table.getColumn(filter.id);
      if (!column?.getFilterFn()) return true;
      
      return column.getFilterFn()(
        row,
        column.id,
        filter.value,
        column
      );
    });
  });

[MAST1999]

Hey everyone

Just wanted to give an update since the latest table release we can do this much more elegantly using table features.

Note that most of this code is copied from the internal implementation of getFilteredRowModel.
After defining this, you can pass it to the table like this: _features: [TablePreGlobalFilteringFeature]

Then you'll have access to getPreGlobalFiltering on the table instance.

import {
  createRow,
  getMemoOptions,
  memo,
  ResolvedColumnFilter,
  Row,
  RowData,
  RowModel,
  Table,
  TableFeature,
} from '@tanstack/react-table';

export interface TablePreGlobalFilter<TData> {
  getPreGlobalFiltering: () => RowModel<TData>;
}

export const TablePreGlobalFilteringFeature: TableFeature<any> = {
  createTable: (table) => {
    table.getPreGlobalFiltering = getPreGlobalFiltering()(table);
  },
};

export function getPreGlobalFiltering<TData extends RowData>(): (
  table: Table<TData>,
) => () => RowModel<TData> {
  return (table) =>
    memo(
      () => [
        table.getPreFilteredRowModel(),
        table.getState().columnFilters,
        table.getState().globalFilter,
      ],
      (rowModel, columnFilters, globalFilter) => {
        if (!rowModel.rows.length || (!columnFilters?.length && !globalFilter)) {
          for (let i = 0; i < rowModel.flatRows.length; i++) {
            rowModel.flatRows[i]!.columnFilters = {};
            rowModel.flatRows[i]!.columnFiltersMeta = {};
          }
          return rowModel;
        }

        const resolvedColumnFilters: ResolvedColumnFilter<TData>[] = [];
        const resolvedGlobalFilters: ResolvedColumnFilter<TData>[] = [];

        (columnFilters ?? []).forEach((d) => {
          const column = table.getColumn(d.id);

          if (!column) {
            return;
          }

          const filterFn = column.getFilterFn();

          if (!filterFn) {
            if (process.env.NODE_ENV !== 'production') {
              console.warn(
                `Could not find a valid 'column.filterFn' for column with the ID: ${column.id}.`,
              );
            }
            return;
          }

          resolvedColumnFilters.push({
            id: d.id,
            filterFn,
            resolvedValue: filterFn.resolveFilterValue?.(d.value) ?? d.value,
          });
        });

        const filterableIds = (columnFilters ?? []).map((d) => d.id);

        const globalFilterFn = table.getGlobalFilterFn();

        const globallyFilterableColumns = table
          .getAllLeafColumns()
          .filter((column) => column.getCanGlobalFilter());

        if (globalFilter && globalFilterFn && globallyFilterableColumns.length) {
          filterableIds.push('__global__');

          globallyFilterableColumns.forEach((column) => {
            resolvedGlobalFilters.push({
              id: column.id,
              filterFn: globalFilterFn,
              resolvedValue: globalFilterFn.resolveFilterValue?.(globalFilter) ?? globalFilter,
            });
          });
        }

        let currentColumnFilter;

        // Flag the unfiltered row model with each filter state
        for (let j = 0; j < rowModel.flatRows.length; j++) {
          const row = rowModel.flatRows[j]!;

          row.columnFilters = {};

          if (resolvedColumnFilters.length) {
            for (let i = 0; i < resolvedColumnFilters.length; i++) {
              currentColumnFilter = resolvedColumnFilters[i]!;
              const id = currentColumnFilter.id;

              // Tag the row with the column filter state
              row.columnFilters[id] = currentColumnFilter.filterFn(
                row,
                id,
                currentColumnFilter.resolvedValue,
                (filterMeta) => {
                  row.columnFiltersMeta[id] = filterMeta;
                },
              );
            }
          }
        }

        const filterRowsImpl = (row: Row<TData>) => {
          // Horizontally filter rows through each column
          for (let i = 0; i < filterableIds.length; i++) {
            if (row.columnFilters[filterableIds[i]!] === false) {
              return false;
            }
          }
          return true;
        };

        // Filter final rows using all the active filters
        return filterRows(rowModel.rows, filterRowsImpl, table);
      },
      getMemoOptions(table.options, 'debugTable', 'getFilteredRowModel', () =>
        table._autoResetPageIndex(),
      ),
    );
}

export function filterRows<TData extends RowData>(
  rows: Row<TData>[],
  filterRowImpl: (row: Row<TData>) => any,
  table: Table<TData>,
) {
  if (table.options.filterFromLeafRows) {
    return filterRowModelFromLeafs(rows, filterRowImpl, table);
  }

  return filterRowModelFromRoot(rows, filterRowImpl, table);
}

function filterRowModelFromLeafs<TData extends RowData>(
  rowsToFilter: Row<TData>[],
  filterRow: (row: Row<TData>) => Row<TData>[],
  table: Table<TData>,
): RowModel<TData> {
  const newFilteredFlatRows: Row<TData>[] = [];
  const newFilteredRowsById: Record<string, Row<TData>> = {};
  const maxDepth = table.options.maxLeafRowFilterDepth ?? 100;

  const recurseFilterRows = (rowsToFilter: Row<TData>[], depth = 0) => {
    const rows: Row<TData>[] = [];

    // Filter from children up first
    for (let i = 0; i < rowsToFilter.length; i++) {
      let row = rowsToFilter[i]!;

      const newRow = createRow(
        table,
        row.id,
        row.original,
        row.index,
        row.depth,
        undefined,
        row.parentId,
      );
      newRow.columnFilters = row.columnFilters;

      if (row.subRows?.length && depth < maxDepth) {
        newRow.subRows = recurseFilterRows(row.subRows, depth + 1);
        row = newRow;

        if (filterRow(row) && !newRow.subRows.length) {
          rows.push(row);
          newFilteredRowsById[row.id] = row;
          newFilteredFlatRows.push(row);
          continue;
        }

        if (filterRow(row) || newRow.subRows.length) {
          rows.push(row);
          newFilteredRowsById[row.id] = row;
          newFilteredFlatRows.push(row);
          continue;
        }
      } else {
        row = newRow;
        if (filterRow(row)) {
          rows.push(row);
          newFilteredRowsById[row.id] = row;
          newFilteredFlatRows.push(row);
        }
      }
    }

    return rows;
  };

  return {
    rows: recurseFilterRows(rowsToFilter),
    flatRows: newFilteredFlatRows,
    rowsById: newFilteredRowsById,
  };
}

function filterRowModelFromRoot<TData extends RowData>(
  rowsToFilter: Row<TData>[],
  filterRow: (row: Row<TData>) => any,
  table: Table<TData>,
): RowModel<TData> {
  const newFilteredFlatRows: Row<TData>[] = [];
  const newFilteredRowsById: Record<string, Row<TData>> = {};
  const maxDepth = table.options.maxLeafRowFilterDepth ?? 100;

  // Filters top level and nested rows
  const recurseFilterRows = (rowsToFilter: Row<TData>[], depth = 0) => {
    // Filter from parents downward first

    const rows: Row<TData>[] = [];

    // Apply the filter to any subRows
    for (let i = 0; i < rowsToFilter.length; i++) {
      let row = rowsToFilter[i]!;

      const pass = filterRow(row);

      if (pass) {
        if (row.subRows?.length && depth < maxDepth) {
          const newRow = createRow(
            table,
            row.id,
            row.original,
            row.index,
            row.depth,
            undefined,
            row.parentId,
          );
          newRow.subRows = recurseFilterRows(row.subRows, depth + 1);
          row = newRow;
        }

        rows.push(row);
        newFilteredFlatRows.push(row);
        newFilteredRowsById[row.id] = row;
      }
    }

    return rows;
  };

  return {
    rows: recurseFilterRows(rowsToFilter),
    flatRows: newFilteredFlatRows,
    rowsById: newFilteredRowsById,
  };
}

Then add this to a .d.ts file to update the types:

declare module '@tanstack/react-table' {
  interface Table<TData extends RowData> extends TablePreGlobalFilter<TData> {}
}