diff --git a/docs/api/core/table.md b/docs/api/core/table.md index 1a7d91462b..e331cb99b0 100644 --- a/docs/api/core/table.md +++ b/docs/api/core/table.md @@ -166,7 +166,17 @@ Set this option to true to output column debugging information to the console. debugRows?: boolean ``` -Set this option to true to output row debugging information to the console. +### `disableValueCache` + +```tsx +disableValueCache?: boolean +``` + +Set this option to true to disable caching of cell values. This is especially useful if you are using +proxy objects (like vue does) in your data. That way you can have data updates without the necessity of replacing +the whole data object to indicate updates to your data. + +> ⚠️ Disabling your value cache has a performance penalty if your accessor functions are complex. ### `render` diff --git a/packages/table-core/src/core/row.ts b/packages/table-core/src/core/row.ts index efc6edf97c..4d719812f2 100644 --- a/packages/table-core/src/core/row.ts +++ b/packages/table-core/src/core/row.ts @@ -110,7 +110,7 @@ export const createRow = ( _valuesCache: {}, _uniqueValuesCache: {}, getValue: columnId => { - if (row._valuesCache.hasOwnProperty(columnId)) { + if (!table.options.disableValueCache && row._valuesCache.hasOwnProperty(columnId)) { return row._valuesCache[columnId] } @@ -119,16 +119,18 @@ export const createRow = ( if (!column?.accessorFn) { return undefined } - - row._valuesCache[columnId] = column.accessorFn( + const value = column.accessorFn( row.original as TData, rowIndex ) + if (!table.options.disableValueCache) { + row._valuesCache[columnId] = value + } - return row._valuesCache[columnId] as any + return value as any }, getUniqueValues: columnId => { - if (row._uniqueValuesCache.hasOwnProperty(columnId)) { + if (!table.options.disableValueCache && row._uniqueValuesCache.hasOwnProperty(columnId)) { return row._uniqueValuesCache[columnId] } @@ -138,17 +140,15 @@ export const createRow = ( return undefined } - if (!column.columnDef.getUniqueValues) { - row._uniqueValuesCache[columnId] = [row.getValue(columnId)] - return row._uniqueValuesCache[columnId] - } - - row._uniqueValuesCache[columnId] = column.columnDef.getUniqueValues( + const value = column.columnDef.getUniqueValues ? column.columnDef.getUniqueValues( row.original as TData, rowIndex - ) + ) : [row.getValue(columnId)] - return row._uniqueValuesCache[columnId] as any + if (!table.options.disableValueCache) { + row._uniqueValuesCache[columnId] = value + } + return value as any }, renderValue: columnId => row.getValue(columnId) ?? table.options.renderFallbackValue, diff --git a/packages/table-core/src/core/table.ts b/packages/table-core/src/core/table.ts index 4b54218152..be681d6000 100644 --- a/packages/table-core/src/core/table.ts +++ b/packages/table-core/src/core/table.ts @@ -117,6 +117,17 @@ export interface CoreOptions { * @link [Guide](https://tanstack.com/table/v8/docs/guide/tables) */ defaultColumn?: Partial> + + /** + * This option will prevent the cell values to be cached after the accessor function is executed + * once. This is especially useful if you are using a framework like vue where the cell values + * are proxy objects and are updated when the underlying data changes. + * However the performance penalty might be significant if your accessor functions are complex. + * @link [API Docs](https://tanstack.com/table/v8/docs/api/core/table#disablevaluecache) + * @link [Guide](https://tanstack.com/table/v8/docs/guide/tables) + */ + disableValueCache?: boolean + /** * This required option is a factory for a function that computes and returns the core row model for the table. * @link [API Docs](https://tanstack.com/table/v8/docs/api/core/table#getcorerowmodel)