Disable sort/search/filter on subRows?

[jordanmmck]

I'm trying to basically recreate the table shown below, but using react-table. I would like to sort/filter/search/etc. but only on the companies, not on the sub-row/children/filings. Basically I want the children rows to be fully ignored during sorting/searching etc. Is this possible? Thanks!

[darman96]

Did you manage to solve this?

[Swiftwork]

I thought to add some input to this old question as I ran into the same issue today. I wanted to add my solution if it could help someone else facing this.

import { SortingFn } from '@tanstack/react-table';

export const shallowSorting = (fn: SortingFn<any>): SortingFn<any> => {
  return (rowA, rowB, columnId) => {
    if (rowA.depth + rowB.depth > 0) return 0;
    return fn(rowA, rowB, columnId);
  };
};

// usage
import { sortingFns } from '@tanstack/react-table';

columnHelper.accessor('price', {
  header: 'Price',
  cell: ({ getValue }) => currencyFormatter.format(getValue()),
  meta: { isNumeric: true },
  sortingFn: shallowSorting(sortingFns.basic),
}),

You could also return another form or sorting for subRows

if (rowA.depth + rowB.depth > 0) return sortingFns.basic(rowA, rowB, columnId);

[bhlox]

@Swiftwork Tnx! This worked like a charm!!!