fix: store row.parentId instead of an entire parent row object on row…

…s to fix serialization issues (#4772) * store parentId instead of an entire row object to prevent serialization problems
TanStack · Mar 25, 2023 · 35bc2d6 · 35bc2d6
1 parent 9c64119
commit 35bc2d6
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 31 deletions.
diff --git a/docs/api/core/row.md b/docs/api/core/row.md
@@ -42,13 +42,13 @@ The original row object provided to the table.
 
 > 🧠 If the row is a grouped row, the original row object will be the first original in the group.
 
-### `parentRow`
+### `parentId`
 
 ```tsx
-parentRow?: Row<TData>
+parentId?: string
 ```
 
-If nested, this row's parent row.
+If nested, this row's parent row id.
 
 ### `getValue`
 
@@ -66,6 +66,22 @@ type subRows = Row<TData>[]
 
 An array of subRows for the row as returned and created by the `options.getSubRows` option.
 
+### `getParentRow`
+
+```tsx
+type getParentRow = () => Row<TData> | undefined
+```
+
+Returns the parent row for the row, if it exists.
+
+### `getParentRows`
+
+```tsx
+type getParentRows = () => Row<TData>[]
+```
+
+Returns the parent rows for the row, all the way up to a root row.
+
 ### `getLeafRows`
 
 ```tsx

diff --git a/packages/table-core/src/core/row.ts b/packages/table-core/src/core/row.ts
@@ -7,6 +7,7 @@ export interface CoreRow<TData extends RowData> {
   index: number
   original: TData
   depth: number
+  parentId?: string
   _valuesCache: Record<string, unknown>
   _uniqueValuesCache: Record<string, unknown>
   getValue: <TValue>(columnId: string) => TValue
@@ -17,7 +18,8 @@ export interface CoreRow<TData extends RowData> {
   originalSubRows?: TData[]
   getAllCells: () => Cell<TData, unknown>[]
   _getAllCellsByColumnId: () => Record<string, Cell<TData, unknown>>
-  parentRow?: Row<TData>
+  getParentRow: () => Row<TData> | undefined
+  getParentRows: () => Row<TData>[]
 }
 
 export const createRow = <TData extends RowData>(
@@ -27,14 +29,14 @@ export const createRow = <TData extends RowData>(
   rowIndex: number,
   depth: number,
   subRows?: Row<TData>[],
-  parentRow?: Row<TData>
+  parentId?: string
 ): Row<TData> => {
   let row: CoreRow<TData> = {
     id,
     index: rowIndex,
     original,
     depth,
-    parentRow,
+    parentId,
     _valuesCache: {},
     _uniqueValuesCache: {},
     getValue: columnId => {
@@ -82,6 +84,18 @@ export const createRow = <TData extends RowData>(
       row.getValue(columnId) ?? table.options.renderFallbackValue,
     subRows: subRows ?? [],
     getLeafRows: () => flattenBy(row.subRows, d => d.subRows),
+    getParentRow: () => (row.parentId ? table.getRow(row.parentId) : undefined),
+    getParentRows: () => {
+      let parentRows: Row<TData>[] = []
+      let currentRow = row
+      while (true) {
+        const parentRow = currentRow.getParentRow()
+        if (!parentRow) break
+        parentRows.push(parentRow)
+        currentRow = parentRow
+      }
+      return parentRows.reverse()
+    },
     getAllCells: memo(
       () => [table.getAllLeafColumns()],
       leafColumns => {

diff --git a/packages/table-core/src/utils/filterRowsUtils.ts b/packages/table-core/src/utils/filterRowsUtils.ts
@@ -22,11 +22,7 @@ export function filterRowModelFromLeafs<TData extends RowData>(
   const newFilteredRowsById: Record<string, Row<TData>> = {}
   const maxDepth = table.options.maxLeafRowFilterDepth ?? 100
 
-  const recurseFilterRows = (
-    rowsToFilter: Row<TData>[],
-    depth = 0,
-    parentRow?: Row<TData>
-  ) => {
+  const recurseFilterRows = (rowsToFilter: Row<TData>[], depth = 0) => {
     const rows: Row<TData>[] = []
 
     // Filter from children up first
@@ -40,12 +36,12 @@ export function filterRowModelFromLeafs<TData extends RowData>(
         row.index,
         row.depth,
         undefined,
-        parentRow
+        row.parentId
       )
       newRow.columnFilters = row.columnFilters
 
       if (row.subRows?.length && depth < maxDepth) {
-        newRow.subRows = recurseFilterRows(row.subRows, depth + 1, newRow)
+        newRow.subRows = recurseFilterRows(row.subRows, depth + 1)
         row = newRow
 
         if (filterRow(row) && !newRow.subRows.length) {
@@ -91,11 +87,7 @@ export function filterRowModelFromRoot<TData extends RowData>(
   const maxDepth = table.options.maxLeafRowFilterDepth ?? 100
 
   // Filters top level and nested rows
-  const recurseFilterRows = (
-    rowsToFilter: Row<TData>[],
-    depth = 0,
-    parentRow?: Row<TData>
-  ) => {
+  const recurseFilterRows = (rowsToFilter: Row<TData>[], depth = 0) => {
     // Filter from parents downward first
 
     const rows: Row<TData>[] = []
@@ -115,9 +107,9 @@ export function filterRowModelFromRoot<TData extends RowData>(
             row.index,
             row.depth,
             undefined,
-            parentRow
+            row.parentId
           )
-          newRow.subRows = recurseFilterRows(row.subRows, depth + 1, newRow)
+          newRow.subRows = recurseFilterRows(row.subRows, depth + 1)
           row = newRow
         }
 

diff --git a/packages/table-core/src/utils/getCoreRowModel.ts b/packages/table-core/src/utils/getCoreRowModel.ts
@@ -44,7 +44,7 @@ export function getCoreRowModel<TData extends RowData>(): (
               i,
               depth,
               undefined,
-              parentRow
+              parentRow?.id
             )
 
             // Keep track of every row in a flat array

diff --git a/packages/table-core/src/utils/getGroupedRowModel.ts b/packages/table-core/src/utils/getGroupedRowModel.ts
@@ -29,7 +29,6 @@ export function getGroupedRowModel<TData extends RowData>(): (
         const groupUpRecursively = (
           rows: Row<TData>[],
           depth = 0,
-          parentRow?: Row<TData>,
           parentId?: string
         ) => {
           // Grouping depth has been been met
@@ -42,7 +41,7 @@ export function getGroupedRowModel<TData extends RowData>(): (
               groupedRowsById[row.id] = row
 
               if (row.subRows) {
-                row.subRows = groupUpRecursively(row.subRows, depth + 1, row)
+                row.subRows = groupUpRecursively(row.subRows, depth + 1, row.id)
               }
 
               return row
@@ -61,12 +60,7 @@ export function getGroupedRowModel<TData extends RowData>(): (
               id = parentId ? `${parentId}>${id}` : id
 
               // First, Recurse to group sub rows before aggregation
-              const subRows = groupUpRecursively(
-                groupedRows,
-                depth + 1,
-                parentRow,
-                id
-              )
+              const subRows = groupUpRecursively(groupedRows, depth + 1, id)
 
               // Flatten the leaf rows of the rows in this group
               const leafRows = depth
@@ -80,7 +74,7 @@ export function getGroupedRowModel<TData extends RowData>(): (
                 index,
                 depth,
                 undefined,
-                parentRow
+                parentId
               )
 
               Object.assign(row, {
@@ -142,7 +136,7 @@ export function getGroupedRowModel<TData extends RowData>(): (
           return aggregatedGroupedRows
         }
 
-        const groupedRows = groupUpRecursively(rowModel.rows, 0, undefined, '')
+        const groupedRows = groupUpRecursively(rowModel.rows, 0)
 
         groupedRows.forEach(subRow => {
           groupedFlatRows.push(subRow)