`getValue` cache not invalidating when `accessorFn` is updated

[danny-does-stuff]

TanStack Table version

v8.12.0

Framework/Library version

React v18.2.0

Describe the bug and the steps to reproduce it

When the accessorFn for a column is updated to return a new value, the new value is never displayed in the table. Through a sophisticated series of console.logs, I discovered that when getValue is called on the rerender, the new accessorFn is never called, presumably due to caching on column id.

The use case is a column that displays the name of the person for the current row. We want the user to be able to choose whether to display first or last name first (e.g. Tanner Linsley or Linsley, Tanner). We could just change the column id when the accessorFn is updated, but then we lose the current sort state for that column, ie if the table is currently sorted by name, we want to stay sorted by name after the name format is changed.

Steps to reproduce:

1. Define a column where the accessorFn returns a different value based on some piece of state
2. Update that piece of state
3. The values in the column don't change

Your Minimal, Reproducible Example - (Sandbox Highly Recommended)

https://stackblitz.com/edit/tanstack-table-rnjqkx?file=src%2Fmain.tsx

Screenshots or Videos (Optional)

No response

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

No, because I do not know how

Terms & Code of Conduct

• I agree to follow this project's Code of Conduct
• 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.

[badench]

Any updates on this? I'm seeing the same issue where a piece of state changes the value returned by the accessorFn but the new value isn't being shown in the table

[takoshi]

I found the same issue on my project. I suspect that the following code causes it

table/packages/table-core/src/core/row.ts

Lines 113 to 129 in 6d89e41

	if (row._valuesCache.hasOwnProperty(columnId)) {
	return row._valuesCache[columnId]
	}
	const column = table.getColumn(columnId)
	if (!column?.accessorFn) {
	return undefined
	}
	row._valuesCache[columnId] = column.accessorFn(
	row.original as TData,
	rowIndex
	)
	return row._valuesCache[columnId] as any
	},

table/packages/table-core/src/utils/getCoreRowModel.ts

Lines 9 to 48 in 6d89e41

	memo(
	() => [table.options.data],
	(
	data
	): {
	rows: Row<TData>[]
	flatRows: Row<TData>[]
	rowsById: Record<string, Row<TData>>
	} => {
	const rowModel: RowModel<TData> = {
	rows: [],
	flatRows: [],
	rowsById: {},
	}
	const accessRows = (
	originalRows: TData[],
	depth = 0,
	parentRow?: Row<TData>
	): Row<TData>[] => {
	const rows = [] as Row<TData>[]
	for (let i = 0; i < originalRows.length; i++) {
	// This could be an expensive check at scale, so we should move it somewhere else, but where?
	// if (!id) {
	// if (process.env.NODE_ENV !== 'production') {
	// throw new Error(`getRowId expected an ID, but got ${id}`)
	// }
	// }
	// Make the row
	const row = createRow(
	table,
	table._getRowId(originalRows[i]!, i, parentRow),
	originalRows[i]!,
	i,
	depth,
	undefined,
	parentRow?.id
	)

Summary

• getInfo function in row returns a cached value if it exists. (Probably) Cached values are not invalidated until the rows are removed from memory.
• Each row is (re)built by createRow in getCoreRowModel. getCoreRowModel only depends on data, so rows are not (re)built by updating columnDefs.

I think there are some ways to fix the bug.

• CoreRow manages accessorFn. If CoreRow detects difference between managed accessorFn and latest one, it
  will invalidate cached data.
• getCoreRowModel depends on data and columnDefs.

[andbjer]

We had the same issue in our project. The suggested fix in #5582 fixes the issue for us. We've applied the fix with yarn patch until it is merged and released.

[aliceprobstexternalairbus]

Any news on this ? We're having the same issue.