fix(table-core): ensure getFilteredRowModel().flatRows uses pre-order traversal

.changeset/fuzzy-tables-filter.md

@@ -0,0 +1,5 @@
+---
+'@tanstack/table-core': patch
+---
+
+Fix hierarchical filtered row models so `flatRows` lists parents before descendants in both filtering modes, preserves filter metadata on cloned rows, and round-trips nested data correctly through worker-backed row models.

packages/table-core/src/features/column-filtering/filterRowsUtils.ts

@@ -51,7 +51,7 @@ function filterRowModelFromLeafs<
       Partial<Row_ColumnFiltering<TFeatures, TData>> = []
 
     // Filter from children up first
-    for (let row of rowsToFilter) {
+    for (const row of rowsToFilter) {
       const newRow = constructRow(
         table,
         row.id,
@@ -63,39 +63,29 @@ function filterRowModelFromLeafs<
       ) as Row<TFeatures, TData> &
         Partial<Row_ColumnFiltering<TFeatures, TData>>
       newRow.columnFilters = row.columnFilters
+      newRow.columnFiltersMeta = row.columnFiltersMeta
 
       if (row.subRows.length && depth < maxDepth) {
         newRow.subRows = recurseFilterRows(row.subRows, depth + 1)
-        row = newRow
 
-        if (filterRow(row) && !newRow.subRows.length) {
-          filteredRows.push(row)
-          newFilteredRowsById[row.id] = row
-          newFilteredFlatRows.push(row)
-          continue
-        }
-
-        if (filterRow(row) || newRow.subRows.length) {
-          filteredRows.push(row)
-          newFilteredRowsById[row.id] = row
-          newFilteredFlatRows.push(row)
-          continue
+        if (newRow.subRows.length || filterRow(newRow)) {
+          filteredRows.push(newRow)
         }
       } else {
-        row = newRow
-        if (filterRow(row)) {
-          filteredRows.push(row)
-          newFilteredRowsById[row.id] = row
-          newFilteredFlatRows.push(row)
+        if (filterRow(newRow)) {
+          filteredRows.push(newRow)
         }
       }
     }
 
     return filteredRows
   }
 
+  const rows = recurseFilterRows(rowsToFilter)
+  addSubRowsToFlatArrays(rows, newFilteredFlatRows, newFilteredRowsById)
+
   return {
-    rows: recurseFilterRows(rowsToFilter),
+    rows,
     flatRows: newFilteredFlatRows,
     rowsById: newFilteredRowsById,
   }
@@ -123,7 +113,7 @@ function filterRowModelFromRoot<
     const filteredRows: Array<Row<TFeatures, TData>> = []
 
     // Apply the filter to any subRows
-    for (let row of rowsToFilter) {
+    for (const row of rowsToFilter) {
       const pass = filterRow(row)
 
       if (pass) {
@@ -136,26 +126,35 @@ function filterRowModelFromRoot<
             row.depth,
             undefined,
             row.parentId,
-          )
+          ) as Row<TFeatures, TData> &
+            Partial<Row_ColumnFiltering<TFeatures, TData>>
+          const filterData = row as Row<TFeatures, TData> &
+            Partial<Row_ColumnFiltering<TFeatures, TData>>
+          newRow.columnFilters = filterData.columnFilters
+          newRow.columnFiltersMeta = filterData.columnFiltersMeta
+
+          filteredRows.push(newRow)
+          newFilteredFlatRows.push(newRow)
+          newFilteredRowsById[newRow.id] = newRow
+
           newRow.subRows = recurseFilterRows(row.subRows, depth + 1)
-          row = newRow
-        }
+        } else {
+          filteredRows.push(row)
+          newFilteredFlatRows.push(row)
+          newFilteredRowsById[row.id] = row
 
-        filteredRows.push(row)
-        newFilteredFlatRows.push(row)
-        newFilteredRowsById[row.id] = row
-
-        // When maxLeafRowFilterDepth stops the recursion, the kept row's
-        // subtree stays visible through row.subRows, so those descendants
-        // must still enter flatRows and rowsById to keep the flat
-        // representation (and anything derived from it, like facet counts)
-        // consistent with the visible tree
-        if (row.subRows.length && depth >= maxDepth) {
-          addSubRowsToFlatArrays(
-            row.subRows,
-            newFilteredFlatRows,
-            newFilteredRowsById,
-          )
+          // When maxLeafRowFilterDepth stops the recursion, the kept row's
+          // subtree stays visible through row.subRows, so those descendants
+          // must still enter flatRows and rowsById to keep the flat
+          // representation (and anything derived from it, like facet counts)
+          // consistent with the visible tree
+          if (row.subRows.length && depth >= maxDepth) {
+            addSubRowsToFlatArrays(
+              row.subRows,
+              newFilteredFlatRows,
+              newFilteredRowsById,
+            )
+          }
         }
       }
     }

packages/table-core/src/worker/initTableWorker.ts

@@ -147,8 +147,10 @@ export function initTableWorker<
       stages[stage] = serializeRowModel(
         model,
         coreIndexById,
+        table.getCoreRowModel().flatRows,
         aggregateColumnIds,
         transfer,
+        stage,
       )
     }
 

packages/table-core/src/worker/rebuildRowModel.ts

@@ -1,15 +1,23 @@
 import { constructRow } from '../core/rows/constructRow'
-import { hasOwn } from '../utils'
+import { copyInstancePropertiesWithoutMemos, hasOwn } from '../utils'
 import type { RowModel } from '../core/row-models/coreRowModelsFeature.types'
 import type { Table_Internal } from '../types/Table'
 import type { TableFeatures } from '../types/TableFeatures'
 import type { RowData } from '../types/type-utils'
 import type {
+  TableWorkerFilterData,
   TableWorkerRowNode,
   TableWorkerStage,
   TableWorkerStagePayload,
 } from './tableWorkerProtocol'
 
+function applyFilterData(row: any, filterData?: TableWorkerFilterData) {
+  if (filterData) {
+    row.columnFilters = filterData.columnFilters
+    row.columnFiltersMeta = filterData.columnFiltersMeta
+  }
+}
+
 /** Payloads that carry data; `unchanged` never reaches the rebuilder. */
 export type TableWorkerDataPayload = Exclude<
   TableWorkerStagePayload,
@@ -46,7 +54,7 @@ export function rebuildRowModel<
   // filtered model never touches them. Without this distinction a filtered
   // rebuild could zero depths assigned by a grouped/sorted tree rebuild.
   const resetDepths = stage !== 'filtered'
-  const flattenParentsFirst = stage === 'sorted'
+  const flattenParentsFirst = stage === 'filtered' || stage === 'sorted'
 
   if (payload.kind === 'flat') {
     const { indices } = payload
@@ -57,6 +65,7 @@ export function rebuildRowModel<
         row.depth = 0
         row.parentId = undefined
       }
+      applyFilterData(row, payload.filterData?.[i])
       rows[i] = row
     }
     return { rows, flatRows: rows, rowsById: core.rowsById }
@@ -84,6 +93,52 @@ export function rebuildRowModel<
         continue
       }
 
+      if (!('groupingColumnId' in node)) {
+        const coreRow: any = core.flatRows[node.index]!
+        const flatIndex = flattenParentsFirst ? flatRows.length : -1
+        if (flattenParentsFirst) {
+          flatRows.push(undefined)
+        }
+
+        const subRows = rebuildRows(node.children, depth + 1, coreRow.id)
+        let row = coreRow
+        const subRowsChanged =
+          subRows.length !== coreRow.subRows.length ||
+          subRows.some((subRow, index) => subRow !== coreRow.subRows[index])
+
+        if (stage === 'filtered' && coreRow.subRows.length) {
+          row = constructRow(
+            table,
+            coreRow.id,
+            coreRow.original,
+            coreRow.index,
+            coreRow.depth,
+            undefined,
+            coreRow.parentId,
+          )
+          row.subRows = subRows
+        } else if (subRowsChanged) {
+          row = Object.create(Object.getPrototypeOf(coreRow))
+          copyInstancePropertiesWithoutMemos(row, coreRow)
+          row.subRows = subRows
+        }
+
+        applyFilterData(row, node.filterData)
+
+        row.depth = depth
+        row.parentId = parentId
+        if (flattenParentsFirst) {
+          flatRows[flatIndex] = row
+        } else {
+          flatRows.push(row)
+        }
+        if (row !== coreRow) {
+          rowsById[row.id] = row
+        }
+        rows[i] = row
+        continue
+      }
+
       // Sorted flatRows preserve the recursive rows order. Reserve the
       // synthetic parent's position before rebuilding its descendants, then
       // fill it once the row can be constructed from those descendants.

packages/table-core/src/worker/serializeRowModel.ts

@@ -1,6 +1,8 @@
 import type { RowModel } from '../core/row-models/coreRowModelsFeature.types'
 import type {
+  TableWorkerFilterData,
   TableWorkerRowNode,
+  TableWorkerStage,
   TableWorkerStagePayload,
 } from './tableWorkerProtocol'
 
@@ -14,14 +16,36 @@ function isCloneSafe(value: unknown): boolean {
 function serializeRows(
   rows: Array<any>,
   coreIndexById: Record<string, number>,
+  coreFlatRows: Array<any>,
   aggregateColumnIds: Array<string>,
+  stage: TableWorkerStage,
 ): Array<TableWorkerRowNode> {
   const nodes = new Array<TableWorkerRowNode>(rows.length)
   for (let i = 0; i < rows.length; i++) {
     const row = rows[i]
     if (row.groupingColumnId == null) {
-      // Data row: its position in `options.data` is all the main thread needs.
-      nodes[i] = coreIndexById[row.id]!
+      const index = coreIndexById[row.id]!
+      const coreRow = coreFlatRows[index]!
+      // A true leaf needs only its core-row position. Branch rows must carry
+      // their row-model children because filtering and sorting can replace or
+      // reorder (or remove all of) the core subtree. Filtered rows also carry
+      // the flags and metadata computed by the worker.
+      nodes[i] =
+        stage === 'filtered' || row.subRows.length || coreRow.subRows.length
+          ? {
+              index,
+              children: serializeRows(
+                row.subRows,
+                coreIndexById,
+                coreFlatRows,
+                aggregateColumnIds,
+                stage,
+              ),
+              ...(stage === 'filtered'
+                ? { filterData: serializeFilterData(row) }
+                : {}),
+            }
+          : index
       continue
     }
     // Synthetic group row: compute aggregates eagerly (the expensive per-group
@@ -50,7 +74,13 @@ function serializeRows(
       groupingValue: row.groupingValue,
       index: row.index,
       aggregates,
-      children: serializeRows(row.subRows, coreIndexById, aggregateColumnIds),
+      children: serializeRows(
+        row.subRows,
+        coreIndexById,
+        coreFlatRows,
+        aggregateColumnIds,
+        stage,
+      ),
     }
   }
   return nodes
@@ -59,22 +89,51 @@ function serializeRows(
 export function serializeRowModel(
   model: RowModel<any, any>,
   coreIndexById: Record<string, number>,
+  coreFlatRows: Array<any>,
   aggregateColumnIds: Array<string>,
   transfer: Array<Transferable>,
+  stage: TableWorkerStage,
 ): TableWorkerStagePayload {
   // Flat fast path: no synthetic rows anywhere (flatRows === rows for flat
   // data). A Uint32Array permutation transfers at zero-copy cost.
-  if (model.flatRows.length === model.rows.length) {
+  const canUseFlatPayload =
+    model.flatRows.length === model.rows.length &&
+    model.rows.every((row) => {
+      const coreRow = coreFlatRows[coreIndexById[row.id]!]!
+      return row.groupingColumnId == null && !coreRow.subRows.length
+    })
+
+  if (canUseFlatPayload) {
     const indices = new Uint32Array(model.rows.length)
+    const filterData =
+      stage === 'filtered'
+        ? new Array<TableWorkerFilterData>(model.rows.length)
+        : undefined
     for (let i = 0; i < indices.length; i++) {
       indices[i] = coreIndexById[model.rows[i]!.id]!
+      if (filterData) {
+        filterData[i] = serializeFilterData(model.rows[i]!)
+      }
     }
     transfer.push(indices.buffer)
-    return { kind: 'flat', indices }
+    return { kind: 'flat', indices, filterData }
   }
 
   return {
     kind: 'tree',
-    children: serializeRows(model.rows, coreIndexById, aggregateColumnIds),
+    children: serializeRows(
+      model.rows,
+      coreIndexById,
+      coreFlatRows,
+      aggregateColumnIds,
+      stage,
+    ),
+  }
+}
+
+function serializeFilterData(row: any): TableWorkerFilterData {
+  return {
+    columnFilters: row.columnFilters,
+    columnFiltersMeta: row.columnFiltersMeta,
   }
 }