@tanstack/table-core 8.9.7 → 8.9.8

package/src/features/ColumnSizing.ts

@@ -110,281 +110,270 @@ export const ColumnSizing: TableFeature = {
   createColumn: <TData extends RowData, TValue>(
     column: Column<TData, TValue>,
     table: Table<TData>
-  ): ColumnSizingColumn => {
-    return {
-      getSize: () => {
-        const columnSize = table.getState().columnSizing[column.id]
-
-        return Math.min(
-          Math.max(
-            column.columnDef.minSize ?? defaultColumnSizing.minSize,
-            columnSize ?? column.columnDef.size ?? defaultColumnSizing.size
-          ),
-          column.columnDef.maxSize ?? defaultColumnSizing.maxSize
-        )
-      },
-      getStart: position => {
-        const columns = !position
-          ? table.getVisibleLeafColumns()
-          : position === 'left'
-          ? table.getLeftVisibleLeafColumns()
-          : table.getRightVisibleLeafColumns()
+  ): void => {
+    column.getSize = () => {
+      const columnSize = table.getState().columnSizing[column.id]
+
+      return Math.min(
+        Math.max(
+          column.columnDef.minSize ?? defaultColumnSizing.minSize,
+          columnSize ?? column.columnDef.size ?? defaultColumnSizing.size
+        ),
+        column.columnDef.maxSize ?? defaultColumnSizing.maxSize
+      )
+    }
+    column.getStart = position => {
+      const columns = !position
+        ? table.getVisibleLeafColumns()
+        : position === 'left'
+        ? table.getLeftVisibleLeafColumns()
+        : table.getRightVisibleLeafColumns()
 
-        const index = columns.findIndex(d => d.id === column.id)
+      const index = columns.findIndex(d => d.id === column.id)
 
-        if (index > 0) {
-          const prevSiblingColumn = columns[index - 1]!
+      if (index > 0) {
+        const prevSiblingColumn = columns[index - 1]!
 
-          return (
-            prevSiblingColumn.getStart(position) + prevSiblingColumn.getSize()
-          )
-        }
-
-        return 0
-      },
-      resetSize: () => {
-        table.setColumnSizing(({ [column.id]: _, ...rest }) => {
-          return rest
-        })
-      },
-      getCanResize: () => {
         return (
-          (column.columnDef.enableResizing ?? true) &&
-          (table.options.enableColumnResizing ?? true)
+          prevSiblingColumn.getStart(position) + prevSiblingColumn.getSize()
         )
-      },
-      getIsResizing: () => {
-        return table.getState().columnSizingInfo.isResizingColumn === column.id
-      },
+      }
+
+      return 0
+    }
+    column.resetSize = () => {
+      table.setColumnSizing(({ [column.id]: _, ...rest }) => {
+        return rest
+      })
+    }
+    column.getCanResize = () => {
+      return (
+        (column.columnDef.enableResizing ?? true) &&
+        (table.options.enableColumnResizing ?? true)
+      )
+    }
+    column.getIsResizing = () => {
+      return table.getState().columnSizingInfo.isResizingColumn === column.id
     }
   },
 
   createHeader: <TData extends RowData, TValue>(
     header: Header<TData, TValue>,
     table: Table<TData>
-  ): ColumnSizingHeader => {
-    return {
-      getSize: () => {
-        let sum = 0
-
-        const recurse = (header: Header<TData, TValue>) => {
-          if (header.subHeaders.length) {
-            header.subHeaders.forEach(recurse)
-          } else {
-            sum += header.column.getSize() ?? 0
-          }
+  ): void => {
+    header.getSize = () => {
+      let sum = 0
+
+      const recurse = (header: Header<TData, TValue>) => {
+        if (header.subHeaders.length) {
+          header.subHeaders.forEach(recurse)
+        } else {
+          sum += header.column.getSize() ?? 0
         }
+      }
 
-        recurse(header)
+      recurse(header)
 
-        return sum
-      },
-      getStart: () => {
-        if (header.index > 0) {
-          const prevSiblingHeader =
-            header.headerGroup.headers[header.index - 1]!
-          return prevSiblingHeader.getStart() + prevSiblingHeader.getSize()
+      return sum
+    }
+    header.getStart = () => {
+      if (header.index > 0) {
+        const prevSiblingHeader = header.headerGroup.headers[header.index - 1]!
+        return prevSiblingHeader.getStart() + prevSiblingHeader.getSize()
+      }
+
+      return 0
+    }
+    header.getResizeHandler = () => {
+      const column = table.getColumn(header.column.id)
+      const canResize = column?.getCanResize()
+
+      return (e: unknown) => {
+        if (!column || !canResize) {
+          return
         }
 
-        return 0
-      },
-      getResizeHandler: () => {
-        const column = table.getColumn(header.column.id)
-        const canResize = column?.getCanResize()
+        ;(e as any).persist?.()
 
-        return (e: unknown) => {
-          if (!column || !canResize) {
+        if (isTouchStartEvent(e)) {
+          // lets not respond to multiple touches (e.g. 2 or 3 fingers)
+          if (e.touches && e.touches.length > 1) {
             return
           }
+        }
 
-          ;(e as any).persist?.()
+        const startSize = header.getSize()
 
-          if (isTouchStartEvent(e)) {
-            // lets not respond to multiple touches (e.g. 2 or 3 fingers)
-            if (e.touches && e.touches.length > 1) {
-              return
-            }
-          }
+        const columnSizingStart: [string, number][] = header
+          ? header.getLeafHeaders().map(d => [d.column.id, d.column.getSize()])
+          : [[column.id, column.getSize()]]
 
-          const startSize = header.getSize()
+        const clientX = isTouchStartEvent(e)
+          ? Math.round(e.touches[0]!.clientX)
+          : (e as MouseEvent).clientX
 
-          const columnSizingStart: [string, number][] = header
-            ? header
-                .getLeafHeaders()
-                .map(d => [d.column.id, d.column.getSize()])
-            : [[column.id, column.getSize()]]
+        const newColumnSizing: ColumnSizingState = {}
 
-          const clientX = isTouchStartEvent(e)
-            ? Math.round(e.touches[0]!.clientX)
-            : (e as MouseEvent).clientX
-
-          const newColumnSizing: ColumnSizingState = {}
+        const updateOffset = (
+          eventType: 'move' | 'end',
+          clientXPos?: number
+        ) => {
+          if (typeof clientXPos !== 'number') {
+            return
+          }
 
-          const updateOffset = (
-            eventType: 'move' | 'end',
-            clientXPos?: number
-          ) => {
-            if (typeof clientXPos !== 'number') {
-              return
-            }
+          table.setColumnSizingInfo(old => {
+            const deltaOffset = clientXPos - (old?.startOffset ?? 0)
+            const deltaPercentage = Math.max(
+              deltaOffset / (old?.startSize ?? 0),
+              -0.999999
+            )
 
-            table.setColumnSizingInfo(old => {
-              const deltaOffset = clientXPos - (old?.startOffset ?? 0)
-              const deltaPercentage = Math.max(
-                deltaOffset / (old?.startSize ?? 0),
-                -0.999999
-              )
-
-              old.columnSizingStart.forEach(([columnId, headerSize]) => {
-                newColumnSizing[columnId] =
-                  Math.round(
-                    Math.max(headerSize + headerSize * deltaPercentage, 0) * 100
-                  ) / 100
-              })
-
-              return {
-                ...old,
-                deltaOffset,
-                deltaPercentage,
-              }
+            old.columnSizingStart.forEach(([columnId, headerSize]) => {
+              newColumnSizing[columnId] =
+                Math.round(
+                  Math.max(headerSize + headerSize * deltaPercentage, 0) * 100
+                ) / 100
             })
 
-            if (
-              table.options.columnResizeMode === 'onChange' ||
-              eventType === 'end'
-            ) {
-              table.setColumnSizing(old => ({
-                ...old,
-                ...newColumnSizing,
-              }))
+            return {
+              ...old,
+              deltaOffset,
+              deltaPercentage,
             }
-          }
-
-          const onMove = (clientXPos?: number) =>
-            updateOffset('move', clientXPos)
+          })
 
-          const onEnd = (clientXPos?: number) => {
-            updateOffset('end', clientXPos)
-
-            table.setColumnSizingInfo(old => ({
+          if (
+            table.options.columnResizeMode === 'onChange' ||
+            eventType === 'end'
+          ) {
+            table.setColumnSizing(old => ({
               ...old,
-              isResizingColumn: false,
-              startOffset: null,
-              startSize: null,
-              deltaOffset: null,
-              deltaPercentage: null,
-              columnSizingStart: [],
+              ...newColumnSizing,
             }))
           }
+        }
 
-          const mouseEvents = {
-            moveHandler: (e: MouseEvent) => onMove(e.clientX),
-            upHandler: (e: MouseEvent) => {
-              document.removeEventListener('mousemove', mouseEvents.moveHandler)
-              document.removeEventListener('mouseup', mouseEvents.upHandler)
-              onEnd(e.clientX)
-            },
-          }
-
-          const touchEvents = {
-            moveHandler: (e: TouchEvent) => {
-              if (e.cancelable) {
-                e.preventDefault()
-                e.stopPropagation()
-              }
-              onMove(e.touches[0]!.clientX)
-              return false
-            },
-            upHandler: (e: TouchEvent) => {
-              document.removeEventListener('touchmove', touchEvents.moveHandler)
-              document.removeEventListener('touchend', touchEvents.upHandler)
-              if (e.cancelable) {
-                e.preventDefault()
-                e.stopPropagation()
-              }
-              onEnd(e.touches[0]?.clientX)
-            },
-          }
+        const onMove = (clientXPos?: number) => updateOffset('move', clientXPos)
 
-          const passiveIfSupported = passiveEventSupported()
-            ? { passive: false }
-            : false
-
-          if (isTouchStartEvent(e)) {
-            document.addEventListener(
-              'touchmove',
-              touchEvents.moveHandler,
-              passiveIfSupported
-            )
-            document.addEventListener(
-              'touchend',
-              touchEvents.upHandler,
-              passiveIfSupported
-            )
-          } else {
-            document.addEventListener(
-              'mousemove',
-              mouseEvents.moveHandler,
-              passiveIfSupported
-            )
-            document.addEventListener(
-              'mouseup',
-              mouseEvents.upHandler,
-              passiveIfSupported
-            )
-          }
+        const onEnd = (clientXPos?: number) => {
+          updateOffset('end', clientXPos)
 
           table.setColumnSizingInfo(old => ({
             ...old,
-            startOffset: clientX,
-            startSize,
-            deltaOffset: 0,
-            deltaPercentage: 0,
-            columnSizingStart,
-            isResizingColumn: column.id,
+            isResizingColumn: false,
+            startOffset: null,
+            startSize: null,
+            deltaOffset: null,
+            deltaPercentage: null,
+            columnSizingStart: [],
           }))
         }
-      },
+
+        const mouseEvents = {
+          moveHandler: (e: MouseEvent) => onMove(e.clientX),
+          upHandler: (e: MouseEvent) => {
+            document.removeEventListener('mousemove', mouseEvents.moveHandler)
+            document.removeEventListener('mouseup', mouseEvents.upHandler)
+            onEnd(e.clientX)
+          },
+        }
+
+        const touchEvents = {
+          moveHandler: (e: TouchEvent) => {
+            if (e.cancelable) {
+              e.preventDefault()
+              e.stopPropagation()
+            }
+            onMove(e.touches[0]!.clientX)
+            return false
+          },
+          upHandler: (e: TouchEvent) => {
+            document.removeEventListener('touchmove', touchEvents.moveHandler)
+            document.removeEventListener('touchend', touchEvents.upHandler)
+            if (e.cancelable) {
+              e.preventDefault()
+              e.stopPropagation()
+            }
+            onEnd(e.touches[0]?.clientX)
+          },
+        }
+
+        const passiveIfSupported = passiveEventSupported()
+          ? { passive: false }
+          : false
+
+        if (isTouchStartEvent(e)) {
+          document.addEventListener(
+            'touchmove',
+            touchEvents.moveHandler,
+            passiveIfSupported
+          )
+          document.addEventListener(
+            'touchend',
+            touchEvents.upHandler,
+            passiveIfSupported
+          )
+        } else {
+          document.addEventListener(
+            'mousemove',
+            mouseEvents.moveHandler,
+            passiveIfSupported
+          )
+          document.addEventListener(
+            'mouseup',
+            mouseEvents.upHandler,
+            passiveIfSupported
+          )
+        }
+
+        table.setColumnSizingInfo(old => ({
+          ...old,
+          startOffset: clientX,
+          startSize,
+          deltaOffset: 0,
+          deltaPercentage: 0,
+          columnSizingStart,
+          isResizingColumn: column.id,
+        }))
+      }
     }
   },
 
-  createTable: <TData extends RowData>(
-    table: Table<TData>
-  ): ColumnSizingInstance => {
-    return {
-      setColumnSizing: updater => table.options.onColumnSizingChange?.(updater),
-      setColumnSizingInfo: updater =>
-        table.options.onColumnSizingInfoChange?.(updater),
-      resetColumnSizing: defaultState => {
-        table.setColumnSizing(
-          defaultState ? {} : table.initialState.columnSizing ?? {}
-        )
-      },
-      resetHeaderSizeInfo: defaultState => {
-        table.setColumnSizingInfo(
-          defaultState
-            ? getDefaultColumnSizingInfoState()
-            : table.initialState.columnSizingInfo ??
-                getDefaultColumnSizingInfoState()
-        )
-      },
-      getTotalSize: () =>
-        table.getHeaderGroups()[0]?.headers.reduce((sum, header) => {
-          return sum + header.getSize()
-        }, 0) ?? 0,
-      getLeftTotalSize: () =>
-        table.getLeftHeaderGroups()[0]?.headers.reduce((sum, header) => {
-          return sum + header.getSize()
-        }, 0) ?? 0,
-      getCenterTotalSize: () =>
-        table.getCenterHeaderGroups()[0]?.headers.reduce((sum, header) => {
-          return sum + header.getSize()
-        }, 0) ?? 0,
-      getRightTotalSize: () =>
-        table.getRightHeaderGroups()[0]?.headers.reduce((sum, header) => {
-          return sum + header.getSize()
-        }, 0) ?? 0,
+  createTable: <TData extends RowData>(table: Table<TData>): void => {
+    table.setColumnSizing = updater =>
+      table.options.onColumnSizingChange?.(updater)
+    table.setColumnSizingInfo = updater =>
+      table.options.onColumnSizingInfoChange?.(updater)
+    table.resetColumnSizing = defaultState => {
+      table.setColumnSizing(
+        defaultState ? {} : table.initialState.columnSizing ?? {}
+      )
+    }
+    table.resetHeaderSizeInfo = defaultState => {
+      table.setColumnSizingInfo(
+        defaultState
+          ? getDefaultColumnSizingInfoState()
+          : table.initialState.columnSizingInfo ??
+              getDefaultColumnSizingInfoState()
+      )
     }
+    table.getTotalSize = () =>
+      table.getHeaderGroups()[0]?.headers.reduce((sum, header) => {
+        return sum + header.getSize()
+      }, 0) ?? 0
+    table.getLeftTotalSize = () =>
+      table.getLeftHeaderGroups()[0]?.headers.reduce((sum, header) => {
+        return sum + header.getSize()
+      }, 0) ?? 0
+    table.getCenterTotalSize = () =>
+      table.getCenterHeaderGroups()[0]?.headers.reduce((sum, header) => {
+        return sum + header.getSize()
+      }, 0) ?? 0
+    table.getRightTotalSize = () =>
+      table.getRightHeaderGroups()[0]?.headers.reduce((sum, header) => {
+        return sum + header.getSize()
+      }, 0) ?? 0
   },
 }