Enable Columns to specify custom onResizeEnd callbacks

[ryanatallah]

I'm trying to save column width after it's been resized so that it becomes the new default width for future sessions. The naïve solution is to add an onMouseUp event to the resizer to save the new width, like so:

<div
  {...column.getResizerProps()}
  onMouseUp={saveColumnWidth(column)}
/>

This method is flawed, however, because the onMouseUp event only fires if it occurs while the mouse is over the resizer, which often times isn't the case if the user moves their mouse up or down beyond the header row while they're dragging left or right.

What would be ideal is if we could specify saveColumnWidth as a callback on a Column (ideally specified on defaultColumn) for side effects when resizing is done, e.g.:

const defaultColumn = {
  width: 150,
  onResizeEnd: (col) => saveColumnWidth(column),
};

Instead, we need to implement it manually. To do this, we could add a mouseup event listener on document to detect when resizing is done, and clean up the listener when we're done:

<div
  {...column.getResizerProps()}
  onMouseDown={onResizeStart(column)}
/>

and

const onResizeStart = (column) => {
  return (e) => {
    column.getResizerProps().onMouseDown(e);
    const upHandler = () => {
      saveColumnWidth(column);
      document.removeEventListener("mouseup", upHandler);
    };
    document.addEventListener("mouseup", upHandler);
  };
};

This is a slightly simpler implementation to what is done in getResizerProps() in withColumnResizing.oldts, which also handles touch events and passive events. For parity in coverage and to reduce the complexity of these kinds of manual solutions, it would be preferable to pass the callback into react-table's internals.