V8: onResizeEnd event

[fknop]

Hello,

I have a use case which I think the library doesn't support (yet?).
I would like to store the column sizing values in local storage at the end of the resizing event while still having the onChange behavior. I want to load values from localStorage and pass it to the initialState. I do not want to have the value controlled (for performance reason). However, I do not have access to (only) the resizing end event.

Would there be a way to hook into the end of the resizing event while in onChange mode so I can store the new values in local storage ? Passing onColumnSizingChange makes the columnSizing controlled automatically.

Making the component controlled cause a little bit of UI lag compared to the uncontrolled version, which I would like to avoid.

Maybe the solution would be to add a onColumnSizingEnd ?

The code I think of would look something like this:

const [columnSizing, setColumnSizing] =
  useLocalStorageState<ColumnSizingState>(
    `local-storage-id`,
    {
      defaultValue: {},
    }
  )

const table = useReactTable({
    data,
    columns,
    initialState: {
      columnSizing,
    },
    columnResizeMode: 'onChange',
    onColumnSizingEnd: setColumnSizing,
    getCoreRowModel: getCoreRowModel(),
   // ...
  })

[fknop]

Well, I kinda feel dumb as I didn't think about that earlier,
But I simply ended up adding this on the resizer element :)

onMouseUp={() => {
  setColumnSizing(table.getState().columnSizing)
}}

[vaziliybober]

This event isn't fired when you release the mouse button outside of the actual resizer, unfortunately

[vaziliybober]

However this seems to work ok

onMouseDown={(e) => {
  document.addEventListener(
    "mouseup",
    () => console.log(header.getSize()),
    { once: true }
  );
  header.getResizeHandler()(e);
}}

[fknop]

You're right, I just had the issue :)

[tannerlinsley]

You could also watch the table state for changes and trigger a side effect.

…

On Jul 27, 2022, 2:54 PM -0600, Florian Knop ***@***.***>, wrote: Well, I kinda feel dumb as I didn't think about that earlier, But I simply ended up adding this on the resizer element :) onMouseUp={() => { setColumnSizing(table.getState().columnSizing) }} — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>