From d5818e56b83020884fa92b05b697da06becbbd2a Mon Sep 17 00:00:00 2001
From: Jonatan Zint <jonatan.zint@thermofisher.com>
Date: Mon, 23 Oct 2023 15:35:02 +0200
Subject: [PATCH] feat: add a "disableValueCache" option

When using tanstack table with proxy objects as row data, copying cell
values to the cache is unwanted behavior as they are no longer connected
to the row proxy object. In these scenarios i'd like to turn off the value cache.

ref #4876
---
 docs/api/core/table.md                | 12 +++++++++++-
 packages/table-core/src/core/row.ts   | 26 +++++++++++++-------------
 packages/table-core/src/core/table.ts | 11 +++++++++++
 3 files changed, 35 insertions(+), 14 deletions(-)

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 = <TData extends RowData>(
     _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 = <TData extends RowData>(
       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 = <TData extends RowData>(
         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<TData extends RowData> {
    * @link [Guide](https://tanstack.com/table/v8/docs/guide/tables)
    */
   defaultColumn?: Partial<ColumnDef<TData, unknown>>
+
+  /**
+   * 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)