feat: add reset column resizing (#2461)

Co-authored-by: Garg, Rohit <[email protected]>
TanStack · Jul 17, 2020 · c4120e6 · c4120e6 · vercel · Jul 17, 2020
1 parent 0981670
commit c4120e6
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 32 deletions.
diff --git a/examples/column-resizing/src/App.js b/examples/column-resizing/src/App.js
@@ -72,6 +72,8 @@ function Table({ columns, data }) {
     headerGroups,
     rows,
     prepareRow,
+    state,
+    resetResizing,
   } = useTable(
     {
       columns,
@@ -83,41 +85,51 @@ function Table({ columns, data }) {
   )
 
   return (
-    <div {...getTableProps()} className="table">
+    <>
+      <button onClick={resetResizing}>Reset Resizing</button>
       <div>
-        {headerGroups.map(headerGroup => (
-          <div {...headerGroup.getHeaderGroupProps()} className="tr">
-            {headerGroup.headers.map(column => (
-              <div {...column.getHeaderProps()} className="th">
-                {column.render('Header')}
-                {/* Use column.getResizerProps to hook up the events correctly */}
-                <div
-                  {...column.getResizerProps()}
-                  className={`resizer ${column.isResizing ? 'isResizing' : ''}`}
-                />
+        <div {...getTableProps()} className="table">
+          <div>
+            {headerGroups.map(headerGroup => (
+              <div {...headerGroup.getHeaderGroupProps()} className="tr">
+                {headerGroup.headers.map(column => (
+                  <div {...column.getHeaderProps()} className="th">
+                    {column.render('Header')}
+                    {/* Use column.getResizerProps to hook up the events correctly */}
+                    <div
+                      {...column.getResizerProps()}
+                      className={`resizer ${
+                        column.isResizing ? 'isResizing' : ''
+                      }`}
+                    />
+                  </div>
+                ))}
               </div>
             ))}
           </div>
-        ))}
-      </div>
 
-      <div {...getTableBodyProps()}>
-        {rows.map((row, i) => {
-          prepareRow(row)
-          return (
-            <div {...row.getRowProps()} className="tr">
-              {row.cells.map(cell => {
-                return (
-                  <div {...cell.getCellProps()} className="td">
-                    {cell.render('Cell')}
-                  </div>
-                )
-              })}
-            </div>
-          )
-        })}
+          <div {...getTableBodyProps()}>
+            {rows.map((row, i) => {
+              prepareRow(row)
+              return (
+                <div {...row.getRowProps()} className="tr">
+                  {row.cells.map(cell => {
+                    return (
+                      <div {...cell.getCellProps()} className="td">
+                        {cell.render('Cell')}
+                      </div>
+                    )
+                  })}
+                </div>
+              )
+            })}
+          </div>
+        </div>
       </div>
-    </div>
+      <pre>
+        <code>{JSON.stringify(state, null, 2)}</code>
+      </pre>
+    </>
   )
 }
 
@@ -164,7 +176,7 @@ function App() {
     []
   )
 
-  const data = React.useMemo(() => makeData(20), [])
+  const data = React.useMemo(() => makeData(10), [])
 
   return (
     <Styles>

diff --git a/src/plugin-hooks/useResizeColumns.js b/src/plugin-hooks/useResizeColumns.js
@@ -1,9 +1,12 @@
+import React from 'react'
+
 import {
   actions,
   defaultColumn,
   makePropGetter,
   useGetLatest,
   ensurePluginOrder,
+  useMountedLayoutEffect,
 } from '../publicUtils'
 
 import { getFirstDefined, passiveEventSupported } from '../utils'
@@ -15,6 +18,7 @@ defaultColumn.canResize = true
 actions.columnStartResizing = 'columnStartResizing'
 actions.columnResizing = 'columnResizing'
 actions.columnDoneResizing = 'columnDoneResizing'
+actions.resetResize = 'resetResize'
 
 export const useResizeColumns = hooks => {
   hooks.getResizerProps = [defaultGetResizerProps]
@@ -144,6 +148,15 @@ function reducer(state, action) {
     }
   }
 
+  if (action.type === actions.resetResize) {
+    return {
+      ...state,
+      columnResizing: {
+        columnWidths: {},
+      },
+    }
+  }
+
   if (action.type === actions.columnStartResizing) {
     const { clientX, columnId, columnWidth, headerIdWidths } = action
 
@@ -217,7 +230,10 @@ const useInstanceBeforeDimensions = instance => {
     )
 
     header.canResize = canResize
-    header.width = columnResizing.columnWidths[header.id] || header.width
+    header.width =
+      columnResizing.columnWidths[header.id] ||
+      header.originalWidth ||
+      header.width
     header.isResizing = columnResizing.isResizingColumn === header.id
 
     if (canResize) {
@@ -229,8 +245,26 @@ const useInstanceBeforeDimensions = instance => {
   })
 }
 
-function useInstance({ plugins }) {
+function useInstance(instance) {
+  const { plugins, dispatch, autoResetResize = true, columns } = instance
+
   ensurePluginOrder(plugins, ['useAbsoluteLayout'], 'useResizeColumns')
+
+  const getAutoResetResize = useGetLatest(autoResetResize)
+  useMountedLayoutEffect(() => {
+    if (getAutoResetResize()) {
+      dispatch({ type: actions.resetResize })
+    }
+  }, [columns])
+
+  const resetResizing = React.useCallback(
+    () => dispatch({ type: actions.resetResize }),
+    [dispatch]
+  )
+
+  Object.assign(instance, {
+    resetResizing,
+  })
 }
 
 function getLeafHeaders(header) {

diff --git a/src/utils.js b/src/utils.js
@@ -77,6 +77,11 @@ export function decorateColumn(column, userDefaultColumn) {
     ...userDefaultColumn,
     ...column,
   })
+
+  Object.assign(column, {
+    originalWidth: column.width,
+  })
+
   return column
 }