Filter parent sub rows and display all children

[BrendanC23]

I'm using TanStack table's sub-rows feature to display nested rows below the main row. If a filter displays the parent row, I would like to have the child rows also be shown.

When I use the expanding CodeSandbox example, if I type "Woodrow" in the filter input, Woodrow is shown but the children are hidden. Instead, I would like all of the children to be shown.

Is there a way to accomplish this?

[manimovassagh]

Yes, you can achieve this with a custom filterFn that, when a parent matches the filter, automatically includes all its children.

The key is to write a filter function that checks whether the current row OR any of its ancestors match:

import { useReactTable, getCoreRowModel, getFilteredRowModel, getExpandedRowModel, type FilterFn, } from '@tanstack/react-table' const includeChildrenFilter: FilterFn<any> = (row, columnId, filterValue) => { const cellValue = String(row.getValue(columnId) ?? '').toLowerCase() const search = String(filterValue).toLowerCase() // This row directly matches if (cellValue.includes(search)) { return true } // Check if any ancestor matched — if so, include this child let parent = row.getParentRow() while (parent) { const parentValue = String(parent.getValue(columnId) ?? '').toLowerCase() if (parentValue.includes(search)) { return true } parent = parent.getParentRow() } return false } const table = useReactTable({ data, columns, state: { globalFilter, expanded: true, // auto-expand all rows so children are visible }, getSubRows: (row) => row.subRows, globalFilterFn: includeChildrenFilter, getCoreRowModel: getCoreRowModel(), getFilteredRowModel: getFilteredRowModel(), getExpandedRowModel: getExpandedRowModel(), })

How it works:

• When "Woodrow" is typed, the filter runs on every row
• Woodrow's row matches directly (cellValue.includes(search))
• Each child row checks its parent chain — finds Woodrow as a parent, so it's included too
• expanded: true ensures all matched rows show their children

You can also apply this per-column instead of globally by setting filterFn on the column definition.