@tanstack/table-core 8.0.0-alpha.63 → 8.0.0-alpha.67

package/src/features/Pinning.ts

@@ -6,6 +6,7 @@ import {
   TableGenerics,
   Row,
   Cell,
+  TableFeature,
 } from '../types'
 import { makeStateUpdater, memo } from '../utils'
 
@@ -31,7 +32,6 @@ export type ColumnPinningDefaultOptions = {
 
 export type ColumnPinningColumnDef = {
   enablePinning?: boolean
-  defaultCanPin?: boolean
 }
 
 export type ColumnPinningColumn = {
@@ -47,19 +47,9 @@ export type ColumnPinningRow<TGenerics extends TableGenerics> = {
   getRightVisibleCells: () => Cell<TGenerics>[]
 }
 
-export type ColumnPinningCell<TGenerics extends TableGenerics> = {
-  getLeftVisibleCells: () => Cell<TGenerics>[]
-  getCenterVisibleCells: () => Cell<TGenerics>[]
-  getRightVisibleCells: () => Cell<TGenerics>[]
-}
-
 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
   getIsSomeColumnsPinned: () => boolean
   getLeftLeafColumns: () => Column<TGenerics>[]
   getRightLeafColumns: () => Column<TGenerics>[]
@@ -68,13 +58,14 @@ export type ColumnPinningInstance<TGenerics extends TableGenerics> = {
 
 //
 
-export const Pinning = {
-  getInitialState: (): ColumnPinningTableState => {
+export const Pinning: TableFeature = {
+  getInitialState: (state): ColumnPinningTableState => {
     return {
       columnPinning: {
         left: [],
         right: [],
       },
+      ...state,
     }
   },
 
@@ -91,10 +82,69 @@ export const Pinning = {
     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
+      },
     }
   },
 
@@ -115,7 +165,9 @@ export const Pinning = {
           return allCells.filter(d => !leftAndRight.includes(d.columnId))
         },
         {
-          key: 'row.getCenterVisibleCells',
+          key:
+            process.env.NODE_ENV === 'production' &&
+            'row.getCenterVisibleCells',
           debug: () => instance.options.debugAll ?? instance.options.debugRows,
         }
       ),
@@ -134,7 +186,8 @@ export const Pinning = {
           return cells
         },
         {
-          key: 'row.getLeftVisibleCells',
+          key:
+            process.env.NODE_ENV === 'production' && 'row.getLeftVisibleCells',
           debug: () => instance.options.debugAll ?? instance.options.debugRows,
         }
       ),
@@ -152,68 +205,8 @@ export const Pinning = {
           return cells
         },
         {
-          key: 'row.getRightVisibleCells',
-          debug: () => instance.options.debugAll ?? instance.options.debugRows,
-        }
-      ),
-    }
-  },
-
-  createCell: <TGenerics extends TableGenerics>(
-    cell: Cell<TGenerics>,
-    instance: TableInstance<TGenerics>
-  ): ColumnPinningCell<TGenerics> => {
-    return {
-      getCenterVisibleCells: memo(
-        () => [
-          cell.row._getAllVisibleCells(),
-          instance.getState().columnPinning.left,
-          instance.getState().columnPinning.right,
-        ],
-        (allCells, left, right) => {
-          const leftAndRight: string[] = [...(left ?? []), ...(right ?? [])]
-
-          return allCells.filter(d => !leftAndRight.includes(d.columnId))
-        },
-        {
-          key: 'row.getCenterVisibleCells',
-          debug: () => instance.options.debugAll ?? instance.options.debugRows,
-        }
-      ),
-      getLeftVisibleCells: memo(
-        () => [
-          cell.row._getAllVisibleCells(),
-          instance.getState().columnPinning.left,
-          ,
-        ],
-        (allCells, left) => {
-          const cells = (left ?? [])
-            .map(columnId => allCells.find(cell => cell.columnId === columnId)!)
-            .filter(Boolean)
-            .map(d => ({ ...d, position: 'left' } as Cell<TGenerics>))
-
-          return cells
-        },
-        {
-          key: 'row.getLeftVisibleCells',
-          debug: () => instance.options.debugAll ?? instance.options.debugRows,
-        }
-      ),
-      getRightVisibleCells: memo(
-        () => [
-          cell.row._getAllVisibleCells(),
-          instance.getState().columnPinning.right,
-        ],
-        (allCells, right) => {
-          const cells = (right ?? [])
-            .map(columnId => allCells.find(cell => cell.columnId === columnId)!)
-            .filter(Boolean)
-            .map(d => ({ ...d, position: 'left' } as Cell<TGenerics>))
-
-          return cells
-        },
-        {
-          key: 'row.getRightVisibleCells',
+          key:
+            process.env.NODE_ENV === 'production' && 'row.getRightVisibleCells',
           debug: () => instance.options.debugAll ?? instance.options.debugRows,
         }
       ),
@@ -230,86 +223,6 @@ export const Pinning = {
       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 ??
-            instance.options.enablePinning ??
-            d.defaultCanPin ??
-            !!d.accessorFn
-        )
-      },
-
-      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
-      },
-
       getIsSomeColumnsPinned: () => {
         const { left, right } = instance.getState().columnPinning
 
@@ -327,7 +240,7 @@ export const Pinning = {
             .filter(Boolean)
         },
         {
-          key: 'getLeftLeafColumns',
+          key: process.env.NODE_ENV === 'development' && 'getLeftLeafColumns',
           debug: () =>
             instance.options.debugAll ?? instance.options.debugColumns,
         }
@@ -344,7 +257,7 @@ export const Pinning = {
             .filter(Boolean)
         },
         {
-          key: 'getRightLeafColumns',
+          key: process.env.NODE_ENV === 'development' && 'getRightLeafColumns',
           debug: () =>
             instance.options.debugAll ?? instance.options.debugColumns,
         }
@@ -362,7 +275,7 @@ export const Pinning = {
           return allColumns.filter(d => !leftAndRight.includes(d.id))
         },
         {
-          key: 'getCenterLeafColumns',
+          key: process.env.NODE_ENV === 'development' && 'getCenterLeafColumns',
           debug: () =>
             instance.options.debugAll ?? instance.options.debugColumns,
         }

package/src/features/RowSelection.ts

@@ -5,6 +5,7 @@ import {
   Row,
   RowModel,
   Updater,
+  TableFeature,
 } from '../types'
 import { makeStateUpdater, memo } from '../utils'
 
@@ -15,10 +16,10 @@ export type RowSelectionTableState = {
 }
 
 export type RowSelectionOptions<TGenerics extends TableGenerics> = {
-  onRowSelectionChange?: OnChangeFn<RowSelectionState>
   enableRowSelection?: boolean | ((row: Row<TGenerics>) => boolean)
   enableMultiRowSelection?: boolean | ((row: Row<TGenerics>) => boolean)
   enableSubRowSelection?: boolean | ((row: Row<TGenerics>) => boolean)
+  onRowSelectionChange?: OnChangeFn<RowSelectionState>
   // enableGroupingRowSelection?:
   //   | boolean
   //   | ((
@@ -43,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
   getIsAllRowsSelected: () => boolean
   getIsAllPageRowsSelected: () => boolean
   getIsSomeRowsSelected: () => boolean
@@ -76,10 +68,11 @@ export type RowSelectionInstance<TGenerics extends TableGenerics> = {
 
 //
 
-export const RowSelection = {
-  getInitialState: (): RowSelectionTableState => {
+export const RowSelection: TableFeature = {
+  getInitialState: (state): RowSelectionTableState => {
     return {
       rowSelection: {},
+      ...state,
     }
   },
 
@@ -146,24 +139,7 @@ export const RowSelection = {
 
           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,
@@ -237,7 +213,7 @@ export const RowSelection = {
           return selectRowsFn(instance, rowModel)
         },
         {
-          key: 'getSelectedRowModel',
+          key: process.env.NODE_ENV === 'development' && 'getSelectedRowModel',
           debug: () => instance.options.debugAll ?? instance.options.debugTable,
         }
       ),
@@ -245,7 +221,7 @@ export const RowSelection = {
       getFilteredSelectedRowModel: memo(
         () => [
           instance.getState().rowSelection,
-          instance.getGlobalFilteredRowModel(),
+          instance.getFilteredRowModel(),
         ],
         (rowSelection, rowModel) => {
           if (!Object.keys(rowSelection).length) {
@@ -259,7 +235,9 @@ export const RowSelection = {
           return selectRowsFn(instance, rowModel)
         },
         {
-          key: 'getFilteredSelectedRowModel',
+          key:
+            process.env.NODE_ENV === 'production' &&
+            'getFilteredSelectedRowModel',
           debug: () => instance.options.debugAll ?? instance.options.debugTable,
         }
       ),
@@ -278,77 +256,15 @@ export const RowSelection = {
           return selectRowsFn(instance, rowModel)
         },
         {
-          key: 'getGroupedSelectedRowModel',
+          key:
+            process.env.NODE_ENV === 'production' &&
+            'getGroupedSelectedRowModel',
           debug: () => instance.options.debugAll ?? instance.options.debugTable,
         }
       ),
 
       ///
 
-      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)
 
@@ -364,8 +280,7 @@ export const RowSelection = {
       // },
 
       getIsAllRowsSelected: () => {
-        const preFilteredFlatRows =
-          instance.getPreGlobalFilteredRowModel().flatRows
+        const preFilteredFlatRows = instance.getPreFilteredRowModel().flatRows
         const { rowSelection } = instance.getState()
 
         let isAllRowsSelected = Boolean(
@@ -411,21 +326,6 @@ export const RowSelection = {
           : !!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(
@@ -449,13 +349,66 @@ export const RowSelection = {
     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
+          )
+        }
+      },
     }
   },
 }
@@ -481,7 +434,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)
     )