Capture column resize event

[szmarci]

I want to save column widths to localstorage, but for that I would need an onDragEnd event to the resizer.
I tried to add it myself like this:

<div
  {...column.getResizerProps()}
  className={`resizer ${column.isResizing ? 'isResizing' : ''}`}
  onDragEnd={}
/>

But it didn't not work. I also tried onDragEndCapture with the same result.
How can I catch that moment when resize ended?

[gargroh]

Observe change in state through useEffect

…

On Fri, Jul 3, 2020, 4:13 AM szmarci ***@***.***> wrote: I want to save column widths to localstorage, but for that I would need an onDragEnd event to the resizer. I tried to add it myself like this: <div {...column.getResizerProps()} className={`resizer ${column.isResizing ? 'isResizing' : ''}`} onDragEnd={} /> But it didn't not work. I also tried onDragEndCapture with the same result. How can I catch that moment when resize ended? — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#2498>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AKEG7NYU4B75AUC5J53J6YDRZUERVANCNFSM4OPJQIVA> .

[szmarci]

@barbara-lea Do you mind sharing your code? Currently I'm observing this object: state.columnResizing.columnWidths.
Do you know of something else?

[gargroh]

Currently I'm observing this object: state.columnResizing.columnWidths

This is the ideal solution

[barbara-lea]

NOTE: The solution mentioned above is so much better. For anyone coming here: please ignore this comment.

Sorry @szmarci for the late response. I am creating a new FC for every header cell that gets one column passed as prop. I have something like this:

import React, { FC, useEffect } from "react";
import _ from "lodash";
import { useToggle } from "react-use";
import { HeaderGroup } from "react-table";

type HeaderCellProps = {
	column: HeaderGroup<TableData>;
	//...
};

export const HeaderCell: FC<HeaderCellProps> = ({
	column,
	isSortedAscending,
	handleSort,
}) => {
	const { id: columnId } = column;
	const [wasResized, toggleWasResized] = useToggle(false);

	const isActionsHeader = !column.canResize;

	useEffect(() => {
		if (column.isResizing === false) {
			toggleWasResized(true);
		}
	}, [column.isResizing, toggleWasResized]);

	useEffect(() => {
		if (column.isResizing === false && wasResized) {
			localStorage.setItem(`width-${columnId}`, _.toString(column.width));
		}
	}, [column.isResizing, column.width, columnId, wasResized]);

	const { key, style } = column.getHeaderProps();
	return (
		<th key={key} style={{ ...style, position: "relative" }}>
			<div>
				<div style={{ overflow: "hidden" }}>
					{column.render("Header")}
				</div>
			</div>

			{!isActionsHeader && (
				<div {...column.getResizerProps()} className="column-resizer" />
			)}
		</th>
	);
};

I tried to delete the parts that are project specific, but had no time to try this out if it works. The column widths are set in a component that does the fetching of the data and prepares it to pass to a component that actually uses the react-table. Here I am getting the value from the localStorage, if it does not exist, I'll pass a default value.

That is interesting that as you can see I have in the DataTableHeaderCell a state to check if the component was resized. I'll need to look more into react-table why was that needed. If I have not checked for this, the columns were always rendered with the default widht, no matter that from localStorage they should've had the correct values.

[barbara-lea]

Currently I'm observing this object: state.columnResizing.columnWidths

This is the ideal solution

@gargroh but isn't that a composed object? Should it be observet with JSON.stringify, like:

useEffect(() => {
  // some widths ahve changed, save them...
}, [JSON.stringify(state.columnResizing.columnWidths)])

Or? :)

[szmarci]

I think that object is newly created, so equality check triggers in useEffect. Stringify is not necessary, and it would slow things down even further.

[barbara-lea]

Related to this discussion: what is the recommended way to implement a reset function that will revert the column sizes to their original values? only passing the columns with new witsh won't work, because react-table still renders based upon its internal state.

[gargroh]

For this you need to call resetColumnResize (which currently does not exist), it will be available after #2461 merge

[andrerpena]

I implemented a useResizeObserver that observes the state and triggers an event after a resize finishes

import * as React from "react";

export interface ExtendedTableState {
  /**
   * Column resize information. This will only have a value if ReactTable.useResizeColumns is being used
   */
  columnResizing?: ColumnResizing;
  /**
   * An array with the columns IDs in order. This will only have a value if ReactTable.useColumnOrder is being used
   */
  columnOrder?: string[];
  hiddenColumns?: string[] | null;
}
export interface ColumnResizing {
  /**
   * The default column width. This doesn't change.
   */
  columnWidth: number | null;
  /**
   * Map of column IDs to column widths.
   */
  columnWidths: Record<string, number>;
  startX: number;
  /**
   * I don't know why this exists. And I don't know why header widths vary from the column widths.
   */
  headerIdWidths?: [string, number][];
  /**
   * The ID of the column being resized. Will be null if no column is being resized.
   * This is a bit of misleading name because "is" imply it's a boolean but it is not.
   */
  isResizingColumn?: string;
}

export const useResizeObserver = (
  state: ExtendedTableState,
  callback: (columnId: string, columnSize: number) => void
) => {
  // This Ref will contain the id of the column being resized or undefined
  const columnResizeRef = React.useRef<string | undefined>();
  React.useEffect(() => {
    // We are interested in calling the resize event only when "state.columnResizing?.isResizingColumn" changes from
    // a string to undefined, because it indicates that it WAS resizing but it no longer is.
    if (
      state.columnResizing &&
      !state.columnResizing?.isResizingColumn &&
      columnResizeRef.current
    ) {
      // Trigger resize event
      callback(
        columnResizeRef.current,
        state.columnResizing.columnWidths[columnResizeRef.current]
      );
    }
    columnResizeRef.current = state.columnResizing?.isResizingColumn;
  }, [state.columnResizing?.isResizingColumn]);
};

Example of usage:

  const {
    headerGroups,
    rows,
    prepareRow,
    setColumnOrder,
    visibleColumns,
    state,
  } = ReactTable.useTable(
    { columns, data: mergedData, defaultColumn } as any,
    ReactTable.useColumnOrder,
    ReactTable.useResizeColumns
  );

  useResizeObserver(state as ExtendedTableState, (columnId, columnSize) => {
    console.log("resized");
    console.log(columnId);
    console.log(columnSize);
  });

[leefsmp]

The resize observer works great thanks for the sample. How to go about restoring or controlling the columns width then, as it would need to be done from outside of the table component? It seems not straightforward I think. Thanks for any pointer on the topic.

[FullstackJack]

Updated for latest version:

import { TableState } from "@tanstack/table-core";
import * as React from "react";

export const useResizeObserver = (
  state: TableState,
  callback: (columnId: string, columnSize: number) => void
) => {
  // This Ref will contain the id of the column being resized or undefined
  const columnResizeRef = React.useRef<string | false>();
  React.useEffect(() => {
    // We are interested in calling the resize event only when "state.columnResizingInfo?.isResizingColumn" changes from
    // a string to false, because it indicates that it WAS resizing but it no longer is.
    if (
      state.columnSizingInfo &&
      !state.columnSizingInfo?.isResizingColumn &&
      columnResizeRef.current
    ) {
      // Trigger resize event
      callback(
        columnResizeRef.current,
        state.columnSizing[columnResizeRef.current]
      );
    }
    columnResizeRef.current = state.columnSizingInfo?.isResizingColumn;
  }, [callback, state.columnSizingInfo, state.columnSizing]);
};