Forcing global filter function to run on all columns in row in order to use aggregate results to sort best overall match

[btroop]

I have a scenario where I want to sort my global filter results by the best match based on the aggregate ranking across columns. The tricky thing I can't figure out is how to force the ranking function to always apply to every applicable column in a row, because my observations are that once one of the columns in the row has passed the filter, none of the following columns are evaluated and ranked for that row. This is a problem for me because it could be the case that a following column returns a stronger ranking than the column that passed the filter, and that stronger ranking would show up in the sorting aggregation i want to do.

Any ideas how to force all the columns to be evaluated? I tried the following to run the ranking against each column, but when I add the output to the columnFiltersMeta via theaddMeta()function, it adds the output by attaching it to a key that references the current column in the meta data. And if the first column fails to pass, the second column is evaluated and the full output is added to the meta data again, just under the new column id key.

Is there a custom addMeta function I could write? I think I'd prefer the "force each column to be evaluated" approach but I'm open to options.

Also, this sort of functionality seems like it should be available if we are talking "global" filters...the current implementation is more of an "apply a global filter to a column in the row" approach rather than "apply a global filter to the row" approach.

attempted code:

  const columnKeys = row.getAllCells().map((x) => x.column.id);
  const rankedArray = columnKeys.map((k) => {
    const rowVal = row.getValue(k);
    const itemRank = rankItem(rowVal, value);
    addMeta(itemRank);
    return itemRank;
  });
  const doesItemPass = rankedArray.map((x) => x.passed).includes(true);
  // Return if the item should be filtered in/out
  return doesItemPass;

example scenario:

ID	Food	Main Ingredient	Brand
1	applesauce	apples	apple-a-day
2	apple jacks	sugar	kelloggs

when using a fuzzy match for "apple", row 1 should be the best overall match and have a high aggregate ranking since each column has a reference to "apple". However, in the current implementation, row 1 and row 2 would return a nearly identical ranking since the Food column passes in both filter tests with a very similar score (or maybe even higher since the "apple" in "apple jacks" is a separate word).

and just for clarity, in my fuzzySort I'd run a reducing function against all the rankings to generate a "total" ranking score and filter by that.

One other thought I had was to create a dynamic column that updates with the ranking total, but it doesn't seem that sort of functionality exists.

[KevinVandy]

Sounds like a good case to implement your own filtered row model. You don't have to import the default TanStack getFilteredRowModel function. You can fork it from the source and change it. Looks like you would want to change the code here:

table/packages/table-core/src/utils/getFilteredRowModel.ts

Line 124 in f7e69bc

break

[btroop]

might be a little beyond me, but maybe i'll give it a shot

[KevinVandy]

By "forking", I literally just mean copying that file I linked into your repo, modifying it, and passing that in as the row model. It's a common practice.

[btroop]

oh, got it. that sounds manageable. I'll see what i can come up with

[btroop]

i think i hacked my way through this...got a little inspiration from #5593

First, I modified my column definitions:

• Added a new "sort" column that pulls another column value in order to provide a default sort in case of a tie

  columnHelper.accessor((row) => row[defaultSortColumn], {
    id: "globalSort",
    sortingFn: fuzzySort,
    enableGlobalFilter: true,
  }),

• set enableGlobalFilter: false for all other columns

Second, altered my fuzzyFilter function to the following:

import { rankItem } from "@tanstack/match-sorter-utils";

// Define a custom fuzzy filter function that will apply ranking info to rows (using match-sorter utils)
const fuzzyFilter = (row, columnId, value, addMeta) => {
  //get column keys in row
  const columnKeys = row.getAllCells().map((x) => x.column.id);

  //map through column keys and rank each column, producing an array
  const rankedArray = columnKeys
    .map((k) => {
      const rowVal = row.getValue(k);
      const itemRank = k == "globalSort" ? null : rankItem(rowVal, value);
      return itemRank;
    })
    .filter((x) => x);

  //calculate aggregate rank
  const aggregateRank = rankedArray.reduce(
    (previous, current) => previous + current.rank,
    0,
  );

  //create an object to add to columnFiltersMeta
  const metaItem = { aggregateRank, rankedValues: rankedArray };

  //add filter results to meta
  addMeta(metaItem);

  //set logic for does the filter pass
  const doesItemPass = aggregateRank > 1.5; //rankedArray.map((x) => x.passed).includes(true);

  // Return if the item should be filtered in/out
  return doesItemPass; //itemRank.passed;
};

And finally wrote a fuzzy filter to read the aggregate rank:

const fuzzySort = (rowA, rowB, columnId) => {

  //get rowA aggregate rank
  const rowAAggregateRank = rowA.columnFiltersMeta[columnId]?.aggregateRank;

  //get rowB aggregate rank
  const rowBAggregateRank = rowB.columnFiltersMeta[columnId]?.aggregateRank;
  
  //calculate sort direction
  const dir =
    rowAAggregateRank < rowBAggregateRank
      ? -1
      : rowBAggregateRank < rowAAggregateRank
        ? 1
        : 0; 

  // Provide an alphanumeric fallback for when the item ranks are equal (this is where the 'default column' value comes in handy)
  return dir === 0 ? sortingFns.alphanumeric(rowA, rowB, columnId) : dir;
};

Basically I created a sort column that is the only column used in the global filter; this gives me a single point of reference to run my filter criteria against and stash the result in the metadata. It also provides me the way to differentiate which column to sort against when the global filter is not blank, but still use the other column sort functions separately.

Would love to know if there is a more sophisticated and straightforward way to do this, but this seems like a decent pattern until I figure out how to build my own getFilteredRowModel function.