Resizing rightmost column of table.

[martin19]

Hi all,
I want to resize (grow) the rightmost column of a table using the useColumnResize hook. When I hit the right border of the screen while dragging the resizing stops. Does anyone have suggestion how to address this requirement in a nice way without much fiddly code?
kind regards, Martin

[pwhipp]

Not sure what you are looking for. I use a resizable header TH replacement:

const ResizableTH = ({children, useWidth, setWidth, ...rest}) => {
  const that = React.useRef(null);

  useResizeObserver(that, () => {
    if (that){
      setWidth(that.current.style.width)}})

  const resizableStyle = {
    resize: 'horizontal',
    overflow: 'auto',
    padding: '0px',
    margin: '0px',
    width: useWidth}
  return <th ref={that} style={resizableStyle} {...rest}>{children}</th>}

This works (the setWidth function is for persisting the width change but you may not need it depending upon your requirement). Once you drag past the edge of the window, the width will continue increasing indefinitely which may need error handling but never has in my application.

[martin19]

Thanks for the reply.

To clear up my requirement I'll try to explain it better: I'm looking for a solution to increase the width of the rightmost column interactively. Usually my table takes the whole browser window width and the window is maximized. Thus, the mouse cursor can only move as far as the right bound of the screen. This "limitation" is also present with react-table demo at https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/column-resizing: just maximize the window and drag the rightmost column handle to the right - and you "hit the wall".

I want the column to grow further - maybe at constant rate - as soon as I hit the edge of the screen while dragging.

This is definitely not specific for react-table and not a limitation in the library - I just wanted to see if someone has come up with a solution that is simple, solves the usecase and works with useColumnResize.

I'm not sure if the code above achieves what I want already and if it works with useBlockLayout (which I am using) as well.
I guess by "drag past the edge of the window" you mean the case the browser window is not maximized and there is still available screen space around the window?

[pwhipp]

Sorry, given your detailed requirement; the resize example above does just resize to the edge because the default resize behaviour sets the width of the header based upon the cursor coordinates. After that, in the case where the user wants to squash up the other columns and continue growing the right-most column, the user has to manually resize the other columns to be smaller, leaving the right most column space (or delete some columns if supported).

[vaziliybober]

Here's what I did:
I pinned the resizer of the rightmost column to its left border, not to the right one. This way there's enough space for resizing it.