improve performance and memory use

Author: mleibman-db

examples/vanilla/basic/src/main.ts

@@ -12,7 +12,7 @@ type Person = {
   status: string
   progress: number
 }
-
+/*
 const data: Person[] = [
   {
     firstName: 'tanner',
@@ -38,7 +38,10 @@ const data: Person[] = [
     status: 'Complicated',
     progress: 10,
   },
-]
+];
+*/
+
+const data = new Array(50000).fill({});
 
 const columnHelper = createColumnHelper<Person>()
 
@@ -96,8 +99,15 @@ const renderTable = () => {
     theadElement.appendChild(trElement)
   })
 
+
+  table.getRowModel();
+
+
+/*
   // Render table rows
-  table.getRowModel().rows.forEach(row => {
+  table.getRowModel().rows.forEach((row, idx) => {
+    if (idx > 10) return;
+
     const trElement = document.createElement('tr')
     row.getVisibleCells().forEach(cell => {
       const tdElement = document.createElement('td')
@@ -110,6 +120,7 @@ const renderTable = () => {
     tbodyElement.appendChild(trElement)
   })
 
+  /*
   // Render table footers
   table.getFooterGroups().forEach(footerGroup => {
     const trElement = document.createElement('tr')
@@ -123,6 +134,8 @@ const renderTable = () => {
     tfootElement.appendChild(trElement)
   })
 
+  */
+
   // Clear previous content and append new content
   const wrapperElement = document.getElementById('wrapper') as HTMLDivElement
   wrapperElement.innerHTML = ''

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

@@ -92,6 +92,136 @@ export interface CoreRow<TData extends RowData> {
   subRows: Row<TData>[]
 }
 
+const rowProtosByTable = new WeakMap<Table<any>, any>()
+
+
+/**
+ * Creates a table-specific row prototype object to hold shared row methods, including from all the
+ * features that have been registered on the table.
+ */
+export function getRowProto<TData extends RowData>(table: Table<TData>) {
+  let rowProto = rowProtosByTable.get(table)
+
+  if (!rowProto) {
+    const obj: CoreRow<TData> = {
+      // props are here only for typing; they are set on the instance at runtime
+      id: 'unused',
+      depth: 0,
+      index: -1,
+      original: undefined as TData,
+      subRows: [],
+      _valuesCache: {},
+      _uniqueValuesCache: {},
+
+
+      getValue(columnId: string) {
+        if (this._valuesCache.hasOwnProperty(columnId)) {
+          return this._valuesCache[columnId]
+        }
+
+        const column = table.getColumn(columnId)
+
+        if (!column?.accessorFn) {
+          return undefined
+        }
+
+        this._valuesCache[columnId] = column.accessorFn(
+          this.original as TData,
+          this.index
+        )
+
+        return this._valuesCache[columnId] as any
+      },
+
+      getUniqueValues(columnId: string) {
+        if (!this.hasOwnProperty('_uniqueValuesCache')) {
+          // lazy-init cache on the instance
+          this._uniqueValuesCache = {};
+        }
+
+        if (this._uniqueValuesCache.hasOwnProperty(columnId)) {
+          return this._uniqueValuesCache[columnId]
+        }
+
+        const column = table.getColumn(columnId)
+
+        if (!column?.accessorFn) {
+          return undefined
+        }
+
+        if (!column.columnDef.getUniqueValues) {
+          this._uniqueValuesCache[columnId] = [this.getValue(columnId)]
+          return this._uniqueValuesCache[columnId]
+        }
+
+        this._uniqueValuesCache[columnId] = column.columnDef.getUniqueValues(
+          this.original as TData,
+          this.index
+        )
+
+        return this._uniqueValuesCache[columnId] as any
+      },
+
+      renderValue(columnId: string) {
+        return this.getValue(columnId) ?? table.options.renderFallbackValue
+      },
+
+      getLeafRows() {
+        return flattenBy(this.subRows, d => d.subRows)
+      },
+
+      getParentRow() {
+        return this.parentId ? table.getRow(this.parentId, true) : undefined
+      },
+
+      getParentRows() {
+        let parentRows: Row<TData>[] = []
+        let currentRow = this
+        while (true) {
+          const parentRow = currentRow.getParentRow()
+          if (!parentRow) break
+          parentRows.push(parentRow)
+          currentRow = parentRow
+        }
+        return parentRows.reverse()
+      },
+
+      getAllCells: memo(
+        function (this: Row<TData>) {
+          return [this, table.getAllLeafColumns()]
+        },
+        (row, leafColumns) => {
+          return leafColumns.map(column => {
+            return createCell(table, row, column, column.id)
+          })
+        },
+        getMemoOptions(table.options, 'debugRows', 'getAllCells')
+      ),
+
+      _getAllCellsByColumnId: memo(
+        function (this: Row<TData>) {
+          return [this.getAllCells()]
+        },
+        allCells => {
+          return allCells.reduce(
+            (acc, cell) => {
+              acc[cell.column.id] = cell
+              return acc
+            },
+            {} as Record<string, Cell<TData, unknown>>
+          )
+        },
+        getMemoOptions(table.options, 'debugRows', 'getAllCellsByColumnId')
+      ),
+    }
+
+    rowProtosByTable.set(table, obj)
+    rowProto = obj
+  }
+
+  return rowProto as CoreRow<TData>
+}
+
 export const createRow = <TData extends RowData>(
   table: Table<TData>,
   id: string,
@@ -101,95 +231,18 @@ export const createRow = <TData extends RowData>(
   subRows?: Row<TData>[],
   parentId?: string
 ): Row<TData> => {
-  let row: CoreRow<TData> = {
+  const row: CoreRow<TData> = Object.create(getRowProto(table))
+  Object.assign(row, {
     id,
     index: rowIndex,
     original,
     depth,
     parentId,
     _valuesCache: {},
-    _uniqueValuesCache: {},
-    getValue: columnId => {
-      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
-    },
-    getUniqueValues: columnId => {
-      if (row._uniqueValuesCache.hasOwnProperty(columnId)) {
-        return row._uniqueValuesCache[columnId]
-      }
-
-      const column = table.getColumn(columnId)
-
-      if (!column?.accessorFn) {
-        return undefined
-      }
-
-      if (!column.columnDef.getUniqueValues) {
-        row._uniqueValuesCache[columnId] = [row.getValue(columnId)]
-        return row._uniqueValuesCache[columnId]
-      }
-
-      row._uniqueValuesCache[columnId] = column.columnDef.getUniqueValues(
-        row.original as TData,
-        rowIndex
-      )
-
-      return row._uniqueValuesCache[columnId] as any
-    },
-    renderValue: columnId =>
-      row.getValue(columnId) ?? table.options.renderFallbackValue,
-    subRows: subRows ?? [],
-    getLeafRows: () => flattenBy(row.subRows, d => d.subRows),
-    getParentRow: () =>
-      row.parentId ? table.getRow(row.parentId, true) : 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 => {
-        return leafColumns.map(column => {
-          return createCell(table, row as Row<TData>, column, column.id)
-        })
-      },
-      getMemoOptions(table.options, 'debugRows', 'getAllCells')
-    ),
-
-    _getAllCellsByColumnId: memo(
-      () => [row.getAllCells()],
-      allCells => {
-        return allCells.reduce(
-          (acc, cell) => {
-            acc[cell.column.id] = cell
-            return acc
-          },
-          {} as Record<string, Cell<TData, unknown>>
-        )
-      },
-      getMemoOptions(table.options, 'debugRows', 'getAllCellsByColumnId')
-    ),
+    })
+
+  if (subRows) {
+    row.subRows = subRows
   }
 
   for (let i = 0; i < table._features.length; i++) {

packages/table-core/src/features/ColumnFiltering.ts

@@ -366,6 +366,7 @@ export const ColumnFiltering: TableFeature = {
     row: Row<TData>,
     _table: Table<TData>
   ): void => {
+    // TODO: move to a lazy-initialized proto getters
     row.columnFilters = {}
     row.columnFiltersMeta = {}
   },

packages/table-core/src/features/ColumnGrouping.ts

@@ -1,4 +1,4 @@
-import { RowModel } from '..'
+import { getRowProto, RowModel } from '..'
 import { BuiltInAggregationFn, aggregationFns } from '../aggregationFns'
 import {
   AggregationFns,
@@ -353,30 +353,36 @@ export const ColumnGrouping: TableFeature = {
 
       return table._getGroupedRowModel()
     }
+
+    Object.assign(getRowProto(table), {
+      getIsGrouped() {
+        return !!this.groupingColumnId
+      },
+      getGroupingValue(columnId) {
+        if (this._groupingValuesCache.hasOwnProperty(columnId)) {
+          return this._groupingValuesCache[columnId]
+        }
+
+        const column = table.getColumn(columnId)
+
+        if (!column?.columnDef.getGroupingValue) {
+          return this.getValue(columnId)
+        }
+
+        this._groupingValuesCache[columnId] = column.columnDef.getGroupingValue(
+          this.original
+        )
+
+        return this._groupingValuesCache[columnId]
+      },
+    } as GroupingRow & Row<any>)
   },
 
   createRow: <TData extends RowData>(
     row: Row<TData>,
     table: Table<TData>
   ): void => {
-    row.getIsGrouped = () => !!row.groupingColumnId
-    row.getGroupingValue = columnId => {
-      if (row._groupingValuesCache.hasOwnProperty(columnId)) {
-        return row._groupingValuesCache[columnId]
-      }
-
-      const column = table.getColumn(columnId)
-
-      if (!column?.columnDef.getGroupingValue) {
-        return row.getValue(columnId)
-      }
-
-      row._groupingValuesCache[columnId] = column.columnDef.getGroupingValue(
-        row.original
-      )
-
-      return row._groupingValuesCache[columnId]
-    }
+    // TODO: move to a lazy-initialized proto getter
     row._groupingValuesCache = {}
   },