Resizer offset with useFlexLayout

[I3igI3uilder]

Describe the bug (required)
When using FlexLayout with resizers and the table width is larger (1000px+), there is a noticable offset from the mouse pointer to the resizer element.

Provide an example via Codesandbox! (required)
This is the original example for useFlexLayout
https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/full-width-resizable-table

Steps To Reproduce (required)

1. Drag the window where the table is rendered a good portion to the left
2. Try resizing the columns

Expected behavior (Recommended)
Usually the resizer should move the same delta x as the mouse does.

Screenshots
I have an x resolution of 1920

Desktop (please complete the following information):

• OS: Windows 10 64bit, Intel, Version 2004
• Browser: Chrome 87.0.4280.88, Firefox 84.0.2

I would like to help fixing this, but this is beyound my reach.
Thank you for this great project.

[gonzozavala]

+1

[ilanrot90]

same here

[Niks218]

Same

[hanvyj]

Seems much worse with fewer columns:
https://codesandbox.io/s/crazy-sea-p8ypk

I suspect that this code here in useResizeColumns will have to be 'flex aware', it needs to behave differently in a flex table, it's setting the widths from pixel delta, it'll have to translate that into a proportion of all the flex 'weights' instead somehow, probably not easy:

    const { clientX } = action
    const { startX, columnWidth, headerIdWidths = [] } = state.columnResizing

    const deltaX = clientX - startX
    const percentageDeltaX = deltaX / columnWidth

    const newColumnWidths = {}

    headerIdWidths.forEach(([headerId, headerWidth]) => {
      newColumnWidths[headerId] = Math.max(
        headerWidth + headerWidth * percentageDeltaX,
        0
      )
    })

    return {
      ...state,
      columnResizing: {
        ...state.columnResizing,
        columnWidths: {
          ...state.columnResizing.columnWidths,
          ...newColumnWidths,
        },
      },
    }
  }```
https://github.com/tannerlinsley/react-table/blob/master/src/plugin-hooks/useResizeColumns.js

[PaulSearcy]

Question, is it possible to restore the resizing logic from v6 into v7 to fix this? It works perfectly fine in v6 when using Flex.

v6 Resizing Code Snippet
https://github.com/tannerlinsley/react-table/blob/v6/src/methods.js

    resizeColumnStart (event, column, isTouch) {
        event.stopPropagation()
        const parentWidth = event.target.parentElement.getBoundingClientRect().width
  
        let pageX
        if (isTouch) {
          pageX = event.changedTouches[0].pageX
        } else {
          pageX = event.pageX
        }
  
        this.trapEvents = true
        this.setStateWithData(
          {
            currentlyResizing: {
              id: column.id,
              startX: pageX,
              parentWidth,
            },
          },
          () => {
            if (isTouch) {
              document.addEventListener('touchmove', this.resizeColumnMoving)
              document.addEventListener('touchcancel', this.resizeColumnEnd)
              document.addEventListener('touchend', this.resizeColumnEnd)
            } else {
              document.addEventListener('mousemove', this.resizeColumnMoving)
              document.addEventListener('mouseup', this.resizeColumnEnd)
              document.addEventListener('mouseleave', this.resizeColumnEnd)
            }
          }
        )
    }

    resizeColumnMoving (event) {
      event.stopPropagation()
      const { onResizedChange, column } = this.props
      const { resized, currentlyResizing, columns } = this.getResolvedState()
      const currentColumn = columns.find(
        c => c.accessor === currentlyResizing.id || c.id === currentlyResizing.id
      )
      const minResizeWidth =
        currentColumn && currentColumn.minResizeWidth != null
          ? currentColumn.minResizeWidth
          : column.minResizeWidth

      // Delete old value
      const newResized = resized.filter(x => x.id !== currentlyResizing.id)

      let pageX

      if (event.type === 'touchmove') {
        pageX = event.changedTouches[0].pageX
      } else if (event.type === 'mousemove') {
        pageX = event.pageX
      }

      const newWidth = Math.max(
        currentlyResizing.parentWidth + pageX - currentlyResizing.startX,
        minResizeWidth
      )

      newResized.push({
        id: currentlyResizing.id,
        value: newWidth,
      })

      this.setStateWithData(
        {
          resized: newResized,
        },
        () => onResizedChange && onResizedChange(newResized, event)
      )
    }

    resizeColumnEnd (event) {
      event.stopPropagation()
      const isTouch = event.type === 'touchend' || event.type === 'touchcancel'

      if (isTouch) {
        document.removeEventListener('touchmove', this.resizeColumnMoving)
        document.removeEventListener('touchcancel', this.resizeColumnEnd)
        document.removeEventListener('touchend', this.resizeColumnEnd)
      }

      // If its a touch event clear the mouse one's as well because sometimes
      // the mouseDown event gets called as well, but the mouseUp event doesn't
      document.removeEventListener('mousemove', this.resizeColumnMoving)
      document.removeEventListener('mouseup', this.resizeColumnEnd)
      document.removeEventListener('mouseleave', this.resizeColumnEnd)

      // The touch events don't propagate up to the sorting's onMouseDown event so
      // no need to prevent it from happening or else the first click after a touch
      // event resize will not sort the column.
      if (!isTouch) {
        this.setStateWithData({
          skipNextSort: true,
          currentlyResizing: false,
        })
      }
    }

[stennisrl]

Has anyone found a solution to this? I'm in the process of implementing react-table and I would love to use the flex layout if at all possible, but this offset issue makes the table agonizing to use.

[gonzozavala]

Has anyone found a solution to this? I'm in the process of implementing react-table and I would love to use the flex layout if at all possible, but this offset issue makes the table agonizing to use.

I had to rollback an almost complete implementation of this table in my work because of this bug. It seems it doesn't get too much attention, so I decided to use another table.

I went for AG-Grid (https://www.ag-grid.com/) and cannot complain so far. I suggest you explore alternatives other that react-table.

[matttk]

This is very easy to reproduce with just the default example of Full Width Resizable Table from the docs. Just open it up and click open in new window. For me, the resizing is completely unusuable from the start. Spent a while trying to debug my implementation until I realised it was broken from the start. Sadly, this is where I abandon my investigation into migrating from React Table 6 to 7 for now. Would also love a fix!

[mmahalwy]

+1 here!

[kitallen23]

+1, still not fixed and quite crippling.

[austincondiff]

I'd have to agree, this is not ideal to say the least. When using useResize in conjunction with useFlexLayout yields very unexpected results when resizing a column. Typically in any other table driven application (Finder, Explorer, etc) when you start dragging the resize handle, the handle moves with the cursor, not faster or slower than it as mentioned in #3399.

From a UX perspective, most users are not accustomed to how it currently behaves and they end up dragging the mouse to where they want the final width. This results in overshot resizing. I am even aware of this behavior and I sometimes inadvertently overshoot my target. I completely understand, this is how flexbox works, but I would imagine there is some math that can be done here to maintain normal table resizing behavior. Maybe subtract the distance that was added to the column being resized from the next column?

Let's say column A is 100 and column B is 100. The user resizes column A and moves the cursor to the right 50 pixels. Then column A would be 150 and column B would be 50. Would this work?

I am curious if there a way put in a band-aid fix using useControlState while we are waiting on a real fix (it looks like this has been going on for a year now).

[kitallen23]

Is useFlexLayout the only way to have a table that stretches to fit all avaliable width? If so, I really feel like this needs to be addressed. A large percentage of users would be using tables as a full-width element, and column resizing is one of the more important features.

It may also be worth noting that minWidth of the defaultColumn doesn't seem to be respected by useFlexLayout. I'll need to do more testing, but that's something I've noticed. I may need to create a separate issue for that.

[austincondiff]

I think I've fixed it! I put together a little POC demonstrating column resizing where the next column offsets the resized column.

Check it out in this code sandbox.

It still doesn't quite follow the mouse because the offset is a fraction instead of a pixel value due to how flexbox works. In order for it to follow the mouse I'd need to know the exact pixel width of the column being resized. I'd need to expose ref where the value is an array of elements from the hook to the useTable instance which I'd then pull out and use on my header elements. Is that worth doing? Would that be considered bad DX? If I can get this working, maybe I can throw this into a PR.

[gabrielsch]

+1, resizing doesn't work properly with useFlexLayout

[johsunds]

I got it kinda working for resizing headers here: johsunds@54333a8, you can try running the trimmed down full-width-resizable-table example there if you're interested. Definitely not PR ready as I havent bothered with subheaders yet, and I wouldn't be surprised if it breaks some other layout 😬. It works by checking the px size of the table via a ref exposed in getTableProps, uses that for px <-> flex unit conversions, and finally it adjusts the size of both of the headers adjacent to the active resizer such that the net difference in total flex units is 0 (so that other columns' sizes aren't affected by the resize).

Not sure if I'm gonna spend any more time on this as I just ran into this issue while doing some research for a future project, but thought I'd share my progress in case anyone else wants to give it a shot.