Calling `row.getParentRow()` with expanded, filtered row models and initial filtering value throws an error

[Gascon1]

TanStack Table version

v8.17.3

Framework/Library version

v18.3.0

Describe the bug and the steps to reproduce it

Calling row.getParentRow() inside a custom filter function for a given column throws an error (Cannot read properties of undefined (reading 'rows')) when using the expanded and filter row models.

I faced this issue when using a custom filter function that filters by both parent and child rows, allowing for multiple levels of nesting in the data staying visible if at least one item in the "family" matches the filter.

This issue does not happen when the initial filter value is empty, only when there's a defined initial filter value (see sandbox).

After hours of investigating I hit a dead end. From what I can see, one of the row models in the waterfall of row models called through filtering is unexpectedly returning undefined, but I couldn't make sense of why. My hunch is that it's the getPreSortedRowModel() call that causes the issue, but I've seen it fail at other row model calls as well.

Your Minimal, Reproducible Example - (Sandbox Highly Recommended)

https://codesandbox.io/p/devbox/tanstack-table-initial-filtering-error-qwf43v?file=%2Fsrc%2Fmain.tsx%3A121%2C48

Screenshots or Videos (Optional)

No response

Do you intend to try to help solve this bug with your own PR?

Maybe, I'll investigate and start debugging

Terms & Code of Conduct

• [X] I agree to follow this project's Code of Conduct
• [X] I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

[etiennecoyacabelio]

Any updates ? i'm facing the same issue

[EnriqueJMP-holcim]

Hi everyone,

I wanted to share a workaround I implemented in my Vue ("@tanstack/vue-table": "^8.20.5") app. I used an onMounted function to populate the columnFilters with predefined values.

In your React example, I tried the following code, and it worked:

const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([
  // Commenting this out
  //{ id: "firstName", value: "ros" },
]);
useEffect(() => {
  setColumnFilters([
    { id: "firstName", value: "ros" }
  ]);
}, []);

Additionally, I uncommented the filterFromLeafRows option to ensure we see data being filtered when refreshing the page.

filterFromLeafRows: true

It seems that, for now, we need to avoid setting the default values on the reactive columnFilters variable directly and instead set them when the component is mounted.

[ZinoKader]

This is still an issue as of today on version 8.21.2

[jdhenry08]

This is happening for me too - even when no filters are present on initial load, and state is all managed internally. I've created a nextjs codesandbox to show the issue: https://codesandbox.io/p/devbox/52w8t5

The first character you type in a search field works fine, but any subsequent character throws a handful of Error: getRow could not find row with ID: groupId:3 errors, and the filter no longer works until you clear the search field.