Auto-expand parent row when filterFromLeafRows is true and the user is searching.

[Turtleguyy]

If the table's filterFromLeafRows property is set to true, searching will also look through all the subRows; however, it leaves the parent row collapsed so the user never actually sees the match to their search.

I realize I could likely implement this as some sort of custom filtering handler and set the appropriate row's expanded property — but it seems like this should just be the default, no?

[amasen02]

Why It Isn't the Default

In TanStack Table, features are strictly decoupled. RowFiltering determines which rows pass the search query, while RowExpanding controls whether children are uncollapsed in the row model.

If filtering automatically modified the expanded state internally, it would overwrite manual user expand/collapse choices and create ambiguity over what state to restore when the search input is cleared.

You can wire this up cleanly using one of two patterns:

---

Option 1: Expand All on Search (Simple & Fast)

TanStack Table supports setting expanded: true to expand all expandable rows at once. When a user begins typing a query, set expanded: true; when they clear the input, collapse them back to {}:

const [expanded, setExpanded] = useState<ExpandedState>({});
const [globalFilter, setGlobalFilter] = useState('');

const handleSearchChange = (query: string) => {
  setGlobalFilter(query);
  // Passing boolean `true` tells TanStack Table to expand all matching branches
  setExpanded(query.trim().length > 0 ? true : {});
};

---

Option 2: Target Only Parent Rows with Matching Children

If you want to keep unrelated parent rows collapsed and only reveal the specific branches containing matches, derive the expansion map from table.getFilteredRowModel().flatRows:

import { useEffect, useState } from 'react';
import { ExpandedState, useReactTable } from '@tanstack/react-table';

export function useAutoExpandOnFilter(
  table: ReturnType<typeof useReactTable>,
  searchQuery: string,
  setExpanded: React.Dispatch<React.SetStateAction<ExpandedState>>
) {
  useEffect(() => {
    if (!searchQuery.trim()) {
      setExpanded({});
      return;
    }

    const nextExpanded: Record<string, boolean> = {};

    // flatRows in getFilteredRowModel() contains only rows that passed the filter
    table.getFilteredRowModel().flatRows.forEach((row) => {
      // If this row has subrows that matched, expand it
      if (row.subRows && row.subRows.length > 0) {
        nextExpanded[row.id] = true;
      }

      // Also ensure all ancestor rows are expanded
      let currentParent = row.getParentRow();
      while (currentParent) {
        nextExpanded[currentParent.id] = true;
        currentParent = currentParent.getParentRow();
      }
    });

    setExpanded(nextExpanded);
  }, [searchQuery, table]);
}

This keeps the table compact while ensuring any matching leaf row nested deep inside the hierarchy is immediately visible to the user.