@tanstack/table-core 8.0.0-alpha.65 → 8.0.0-alpha.69

package/src/features/Pinning.ts

@@ -49,11 +49,7 @@ export type ColumnPinningRow<TGenerics extends TableGenerics> = {
 
 export type ColumnPinningInstance<TGenerics extends TableGenerics> = {
   setColumnPinning: (updater: Updater<ColumnPinningState>) => void
-  resetColumnPinning: () => void
-  pinColumn: (columnId: string, position: ColumnPinningPosition) => void
-  getColumnCanPin: (columnId: string) => boolean
-  getColumnIsPinned: (columnId: string) => ColumnPinningPosition
-  getColumnPinnedIndex: (columnId: string) => number
+  resetColumnPinning: (defaultState?: boolean) => void
   getIsSomeColumnsPinned: () => boolean
   getLeftLeafColumns: () => Column<TGenerics>[]
   getRightLeafColumns: () => Column<TGenerics>[]
@@ -62,13 +58,15 @@ export type ColumnPinningInstance<TGenerics extends TableGenerics> = {
 
 //
 
+const getDefaultPinningState = (): ColumnPinningState => ({
+  left: [],
+  right: [],
+})
+
 export const Pinning: TableFeature = {
   getInitialState: (state): ColumnPinningTableState => {
     return {
-      columnPinning: {
-        left: [],
-        right: [],
-      },
+      columnPinning: getDefaultPinningState(),
       ...state,
     }
   },
@@ -86,10 +84,69 @@ export const Pinning: TableFeature = {
     instance: TableInstance<TGenerics>
   ): ColumnPinningColumn => {
     return {
-      getCanPin: () => instance.getColumnCanPin(column.id),
-      getPinnedIndex: () => instance.getColumnPinnedIndex(column.id),
-      getIsPinned: () => instance.getColumnIsPinned(column.id),
-      pin: position => instance.pinColumn(column.id, position),
+      pin: position => {
+        const columnIds = column
+          .getLeafColumns()
+          .map(d => d.id)
+          .filter(Boolean) as string[]
+
+        instance.setColumnPinning(old => {
+          if (position === 'right') {
+            return {
+              left: (old?.left ?? []).filter(d => !columnIds?.includes(d)),
+              right: [
+                ...(old?.right ?? []).filter(d => !columnIds?.includes(d)),
+                ...columnIds,
+              ],
+            }
+          }
+
+          if (position === 'left') {
+            return {
+              left: [
+                ...(old?.left ?? []).filter(d => !columnIds?.includes(d)),
+                ...columnIds,
+              ],
+              right: (old?.right ?? []).filter(d => !columnIds?.includes(d)),
+            }
+          }
+
+          return {
+            left: (old?.left ?? []).filter(d => !columnIds?.includes(d)),
+            right: (old?.right ?? []).filter(d => !columnIds?.includes(d)),
+          }
+        })
+      },
+
+      getCanPin: () => {
+        const leafColumns = column.getLeafColumns()
+
+        return leafColumns.some(
+          d =>
+            (d.enablePinning ?? true) &&
+            (instance.options.enablePinning ?? true)
+        )
+      },
+
+      getIsPinned: () => {
+        const leafColumnIds = column.getLeafColumns().map(d => d.id)
+
+        const { left, right } = instance.getState().columnPinning
+
+        const isLeft = leafColumnIds.some(d => left?.includes(d))
+        const isRight = leafColumnIds.some(d => right?.includes(d))
+
+        return isLeft ? 'left' : isRight ? 'right' : false
+      },
+
+      getPinnedIndex: () => {
+        const position = column.getIsPinned()
+
+        return position
+          ? instance.getState().columnPinning?.[position]?.indexOf(column.id) ??
+              -1
+          : 0
+      },
     }
   },
 
@@ -165,86 +222,12 @@ export const Pinning: TableFeature = {
       setColumnPinning: updater =>
         instance.options.onColumnPinningChange?.(updater),
 
-      resetColumnPinning: () =>
-        instance.setColumnPinning(instance.initialState?.columnPinning ?? {}),
-
-      pinColumn: (columnId, position) => {
-        const column = instance.getColumn(columnId)
-
-        const columnIds = column
-          ?.getLeafColumns()
-          .map(d => d.id)
-          .filter(Boolean) as string[]
-
-        instance.setColumnPinning(old => {
-          if (position === 'right') {
-            return {
-              left: (old?.left ?? []).filter(d => !columnIds?.includes(d)),
-              right: [
-                ...(old?.right ?? []).filter(d => !columnIds?.includes(d)),
-                ...columnIds,
-              ],
-            }
-          }
-
-          if (position === 'left') {
-            return {
-              left: [
-                ...(old?.left ?? []).filter(d => !columnIds?.includes(d)),
-                ...columnIds,
-              ],
-              right: (old?.right ?? []).filter(d => !columnIds?.includes(d)),
-            }
-          }
-
-          return {
-            left: (old?.left ?? []).filter(d => !columnIds?.includes(d)),
-            right: (old?.right ?? []).filter(d => !columnIds?.includes(d)),
-          }
-        })
-      },
-
-      getColumnCanPin: columnId => {
-        const column = instance.getColumn(columnId)
-
-        if (!column) {
-          throw new Error()
-        }
-
-        const leafColumns = column.getLeafColumns()
-
-        return leafColumns.some(
-          d =>
-            (d.enablePinning ?? true) &&
-            (instance.options.enablePinning ?? true)
-        )
-      },
-
-      getColumnIsPinned: columnId => {
-        const column = instance.getColumn(columnId)
-
-        if (!column) {
-          throw new Error()
-        }
-
-        const leafColumnIds = column.getLeafColumns().map(d => d.id)
-
-        const { left, right } = instance.getState().columnPinning
-
-        const isLeft = leafColumnIds.some(d => left?.includes(d))
-        const isRight = leafColumnIds.some(d => right?.includes(d))
-
-        return isLeft ? 'left' : isRight ? 'right' : false
-      },
-
-      getColumnPinnedIndex: columnId => {
-        const position = instance.getColumnIsPinned(columnId)
-
-        return position
-          ? instance.getState().columnPinning?.[position]?.indexOf(columnId) ??
-              -1
-          : 0
-      },
+      resetColumnPinning: defaultState =>
+        instance.setColumnPinning(
+          defaultState
+            ? getDefaultPinningState()
+            : instance.initialState?.columnPinning ?? getDefaultPinningState()
+        ),
 
       getIsSomeColumnsPinned: () => {
         const { left, right } = instance.getState().columnPinning
@@ -263,7 +246,7 @@ export const Pinning: TableFeature = {
             .filter(Boolean)
         },
         {
-          key: process.env.NODE_ENV === 'production' && 'getLeftLeafColumns',
+          key: process.env.NODE_ENV === 'development' && 'getLeftLeafColumns',
           debug: () =>
             instance.options.debugAll ?? instance.options.debugColumns,
         }
@@ -280,7 +263,7 @@ export const Pinning: TableFeature = {
             .filter(Boolean)
         },
         {
-          key: process.env.NODE_ENV === 'production' && 'getRightLeafColumns',
+          key: process.env.NODE_ENV === 'development' && 'getRightLeafColumns',
           debug: () =>
             instance.options.debugAll ?? instance.options.debugColumns,
         }
@@ -298,7 +281,7 @@ export const Pinning: TableFeature = {
           return allColumns.filter(d => !leftAndRight.includes(d.id))
         },
         {
-          key: process.env.NODE_ENV === 'production' && 'getCenterLeafColumns',
+          key: process.env.NODE_ENV === 'development' && 'getCenterLeafColumns',
           debug: () =>
             instance.options.debugAll ?? instance.options.debugColumns,
         }

package/src/features/RowSelection.ts

@@ -44,25 +44,16 @@ export type RowSelectionRow = {
   getIsSomeSelected: () => boolean
   getCanSelect: () => boolean
   getCanMultiSelect: () => boolean
+  getCanSelectSubRows: () => boolean
   toggleSelected: (value?: boolean) => void
   getToggleSelectedHandler: () => (event: unknown) => void
 }
 
 export type RowSelectionInstance<TGenerics extends TableGenerics> = {
-  getToggleRowSelectedHandler: (
-    rowId: string
-  ) => undefined | ((e: unknown) => void)
   getToggleAllRowsSelectedHandler: () => (event: unknown) => void
   getToggleAllPageRowsSelectedHandler: () => (event: unknown) => void
   setRowSelection: (updater: Updater<RowSelectionState>) => void
-  resetRowSelection: () => void
-  toggleRowSelected: (rowId: string, value?: boolean) => void
-  getRowCanSelect: (rowId: string) => boolean
-  getRowCanSelectSubRows: (rowId: string) => boolean
-  getRowCanMultiSelect: (rowId: string) => boolean
-  // getGroupingRowCanSelect: (rowId: string) => boolean
-  getRowIsSelected: (rowId: string) => boolean
-  getRowIsSomeSelected: (rowId: string) => boolean
+  resetRowSelection: (defaultState?: boolean) => void
   getIsAllRowsSelected: () => boolean
   getIsAllPageRowsSelected: () => boolean
   getIsSomeRowsSelected: () => boolean
@@ -105,8 +96,10 @@ export const RowSelection: TableFeature = {
     return {
       setRowSelection: updater =>
         instance.options.onRowSelectionChange?.(updater),
-      resetRowSelection: () =>
-        instance.setRowSelection(instance.initialState.rowSelection ?? {}),
+      resetRowSelection: defaultState =>
+        instance.setRowSelection(
+          defaultState ? {} : instance.initialState.rowSelection ?? {}
+        ),
       toggleAllRowsSelected: value => {
         instance.setRowSelection(old => {
           value =
@@ -148,24 +141,7 @@ export const RowSelection: TableFeature = {
 
           return rowSelection
         }),
-      toggleRowSelected: (rowId, value) => {
-        const row = instance.getRow(rowId)
-        const isSelected = row.getIsSelected()
-
-        instance.setRowSelection(old => {
-          value = typeof value !== 'undefined' ? value : !isSelected
-
-          if (isSelected === value) {
-            return old
-          }
 
-          const selectedRowIds = { ...old }
-
-          mutateRowIsSelected(selectedRowIds, rowId, value, instance)
-
-          return selectedRowIds
-        })
-      },
       // addRowSelectionRange: rowId => {
       //   const {
       //     rows,
@@ -239,7 +215,7 @@ export const RowSelection: TableFeature = {
           return selectRowsFn(instance, rowModel)
         },
         {
-          key: process.env.NODE_ENV === 'production' && 'getSelectedRowModel',
+          key: process.env.NODE_ENV === 'development' && 'getSelectedRowModel',
           debug: () => instance.options.debugAll ?? instance.options.debugTable,
         }
       ),
@@ -291,70 +267,6 @@ export const RowSelection: TableFeature = {
 
       ///
 
-      getRowIsSelected: rowId => {
-        const { rowSelection } = instance.getState()
-        const row = instance.getRow(rowId)
-
-        if (!row) {
-          throw new Error()
-        }
-
-        return isRowSelected(row, rowSelection, instance) === true
-      },
-
-      getRowIsSomeSelected: rowId => {
-        const { rowSelection } = instance.getState()
-        const row = instance.getRow(rowId)
-
-        if (!row) {
-          throw new Error()
-        }
-
-        return isRowSelected(row, rowSelection, instance) === 'some'
-      },
-
-      getRowCanSelect: rowId => {
-        const row = instance.getRow(rowId)
-
-        if (!row) {
-          throw new Error()
-        }
-
-        if (typeof instance.options.enableRowSelection === 'function') {
-          return instance.options.enableRowSelection(row)
-        }
-
-        return instance.options.enableRowSelection ?? true
-      },
-
-      getRowCanSelectSubRows: rowId => {
-        const row = instance.getRow(rowId)
-
-        if (!row) {
-          throw new Error()
-        }
-
-        if (typeof instance.options.enableSubRowSelection === 'function') {
-          return instance.options.enableSubRowSelection(row)
-        }
-
-        return instance.options.enableSubRowSelection ?? true
-      },
-
-      getRowCanMultiSelect: rowId => {
-        const row = instance.getRow(rowId)
-
-        if (!row) {
-          throw new Error()
-        }
-
-        if (typeof instance.options.enableMultiRowSelection === 'function') {
-          return instance.options.enableMultiRowSelection(row)
-        }
-
-        return instance.options.enableMultiRowSelection ?? true
-      },
-
       // getGroupingRowCanSelect: rowId => {
       //   const row = instance.getRow(rowId)
 
@@ -416,21 +328,6 @@ export const RowSelection: TableFeature = {
           : !!paginationFlatRows?.length
       },
 
-      getToggleRowSelectedHandler: rowId => {
-        const row = instance.getRow(rowId)
-
-        const isSelected = row.getIsSelected()
-        const isSomeSelected = row.getIsSomeSelected()
-        const canSelect = row.getCanSelect()
-
-        return (e: unknown) => {
-          if (!canSelect) return
-          row.toggleSelected(
-            ((e as MouseEvent).target as HTMLInputElement)?.checked
-          )
-        }
-      },
-
       getToggleAllRowsSelectedHandler: () => {
         return (e: unknown) => {
           instance.toggleAllRowsSelected(
@@ -454,13 +351,66 @@ export const RowSelection: TableFeature = {
     instance: TableInstance<TGenerics>
   ): RowSelectionRow => {
     return {
-      getIsSelected: () => instance.getRowIsSelected(row.id),
-      getIsSomeSelected: () => instance.getRowIsSomeSelected(row.id),
-      toggleSelected: value => instance.toggleRowSelected(row.id, value),
-      getToggleSelectedHandler: () =>
-        instance.getToggleRowSelectedHandler(row.id)!,
-      getCanMultiSelect: () => instance.getRowCanMultiSelect(row.id),
-      getCanSelect: () => instance.getRowCanSelect(row.id),
+      toggleSelected: value => {
+        const isSelected = row.getIsSelected()
+
+        instance.setRowSelection(old => {
+          value = typeof value !== 'undefined' ? value : !isSelected
+
+          if (isSelected === value) {
+            return old
+          }
+
+          const selectedRowIds = { ...old }
+
+          mutateRowIsSelected(selectedRowIds, row.id, value, instance)
+
+          return selectedRowIds
+        })
+      },
+      getIsSelected: () => {
+        const { rowSelection } = instance.getState()
+        return isRowSelected(row, rowSelection, instance) === true
+      },
+
+      getIsSomeSelected: () => {
+        const { rowSelection } = instance.getState()
+        return isRowSelected(row, rowSelection, instance) === 'some'
+      },
+
+      getCanSelect: () => {
+        if (typeof instance.options.enableRowSelection === 'function') {
+          return instance.options.enableRowSelection(row)
+        }
+
+        return instance.options.enableRowSelection ?? true
+      },
+
+      getCanSelectSubRows: () => {
+        if (typeof instance.options.enableSubRowSelection === 'function') {
+          return instance.options.enableSubRowSelection(row)
+        }
+
+        return instance.options.enableSubRowSelection ?? true
+      },
+
+      getCanMultiSelect: () => {
+        if (typeof instance.options.enableMultiRowSelection === 'function') {
+          return instance.options.enableMultiRowSelection(row)
+        }
+
+        return instance.options.enableMultiRowSelection ?? true
+      },
+      getToggleSelectedHandler: () => {
+        const canSelect = row.getCanSelect()
+
+        return (e: unknown) => {
+          if (!canSelect) return
+          row.toggleSelected(
+            ((e as MouseEvent).target as HTMLInputElement)?.checked
+          )
+        }
+      },
     }
   },
 }
@@ -486,7 +436,7 @@ const mutateRowIsSelected = <TGenerics extends TableGenerics>(
   }
   // }
 
-  if (row.subRows?.length && instance.getRowCanSelectSubRows(row.id)) {
+  if (row.subRows?.length && row.getCanSelectSubRows()) {
     row.subRows.forEach(row =>
       mutateRowIsSelected(selectedRowIds, row.id, value, instance)
     )

package/src/features/Rows.ts

@@ -12,7 +12,8 @@ export type CoreRow<TGenerics extends TableGenerics> = {
   index: number
   original?: TGenerics['Row']
   depth: number
-  values: RowValues
+  valuesCache: Record<string, any>
+  getValue: (columnId: string) => any
   subRows: Row<TGenerics>[]
   getLeafRows: () => Row<TGenerics>[]
   originalSubRows?: TGenerics['Row'][]
@@ -44,7 +45,7 @@ export type RowsInstance<TGenerics extends TableGenerics> = {
     original: TGenerics['Row'] | undefined,
     rowIndex: number,
     depth: number,
-    values: Record<string, any>
+    subRows?: Row<TGenerics>[]
   ) => Row<TGenerics>
   getCoreRowModel: () => RowModel<TGenerics>
   _getCoreRowModel?: () => RowModel<TGenerics>
@@ -73,20 +74,34 @@ export const Rows = {
       ) =>
         instance.options.getRowId?.(row, index, parent) ??
         `${parent ? [parent.id, index].join('.') : index}`,
-      createRow: (id, original, rowIndex, depth, values) => {
+      createRow: (id, original, rowIndex, depth, subRows) => {
         let row: CoreRow<TGenerics> = {
           id,
           index: rowIndex,
           original,
           depth,
-          values,
-          subRows: [],
+          valuesCache: {},
+          getValue: columnId => {
+            if (row.valuesCache.hasOwnProperty(columnId)) {
+              return row.valuesCache[columnId]
+            }
+            const column = instance.getColumn(columnId)
+            if (!column.accessorFn) {
+              throw new Error()
+            }
+            row.valuesCache[columnId] = column.accessorFn(
+              row.original,
+              rowIndex
+            )
+            return row.valuesCache[columnId]
+          },
+          subRows: subRows ?? [],
           getLeafRows: () => flattenBy(row.subRows, d => d.subRows),
         }
 
         for (let i = 0; i < instance._features.length; i++) {
           const feature = instance._features[i]
-          Object.assign(row, feature.createRow?.(row, instance))
+          Object.assign(row, feature?.createRow?.(row, instance))
         }
 
         return row as Row<TGenerics>