How can I limit resizer translateX position with deltaOffset if a column has maxSize?

[voidtask]

Is there a way to prevent resizer from going beyond the column's size limit if I'm using onEnd? I tried to limit deltaOffset but I couldn't find a way to understand what kind of column size I would end up with after the resize is applied. My idea was to use something like min(deltaOffset, maxSize - currentSize), but I could not find an API to access column's max size, am I missing something?

That's what I'm talking about, I'm trying to prevent resizer from being moved too far from max size

<div
  @dblclick="() => header.column.resetSize()"
  @mousedown="(e) => header.getResizeHandler()(e)"
  @touchstart="(e) => header.getResizeHandler()(e)"
  :style="{
  position: 'absolute',
  right: 0,
  top: 0,
  bottom: 0,
  zIndex: 10,
  width: '6px',
  height: '100%',
  backgroundColor: 'red',
  transform: header.column.getIsResizing() ? `translateX(${table.getState().columnSizingInfo.deltaOffset}px)` : '',
  }"
 ></div>
						```

[chrisjcthomas]

You can access maxSize and minSize directly from the column definition via header.column.columnDef.maxSize and header.column.columnDef.minSize (or fallback to defaults).

During an active resize, the projected column width is column.getSize() + deltaOffset. To clamp the visual indicator so it never renders past minSize or maxSize, calculate the clamped delta before applying translateX:

<script setup>
function getClampedDeltaOffset(header) {
  const column = header.column;
  const currentSize = column.getSize();
  const minSize = column.columnDef.minSize ?? 20;
  const maxSize = column.columnDef.maxSize ?? Number.MAX_SAFE_INTEGER;
  const rawDelta = header.getContext().table.getState().columnSizingInfo.deltaOffset ?? 0;

  // The delta cannot reduce the size below minSize or expand it above maxSize
  const minDelta = minSize - currentSize;
  const maxDelta = maxSize - currentSize;

  return Math.min(Math.max(rawDelta, minDelta), maxDelta);
}
</script>

<template>
  <div
    @dblclick="() => header.column.resetSize()"
    @mousedown="(e) => header.getResizeHandler()(e)"
    @touchstart="(e) => header.getResizeHandler()(e)"
    :style="{
      position: 'absolute',
      right: 0,
      top: 0,
      bottom: 0,
      zIndex: 10,
      width: '6px',
      height: '100%',
      backgroundColor: 'red',
      transform: header.column.getIsResizing()
        ? `translateX(${getClampedDeltaOffset(header)}px)`
        : '',
    }"
  ></div>
</template>

Key points:

• header.column.getSize() returns the current starting size of the column.
• minSize - currentSize represents the maximum negative translation allowed.
• maxSize - currentSize represents the maximum positive translation allowed.
• Clamping rawDelta between these two bounds keeps the visual resizer bar constrained exactly within the column's limits.