Vue: Column resizing not working

[mrddter]

TanStack Table version

8.21.3

Framework/Library version

Vue 3.5.13

Describe the bug and the steps to reproduce it

Hi all

I'm trying to configure the columns to allow resizing, but it doesn't work. The onColumnSizingChange event is never called.

Am I doing something wrong?

For convenience, I've rewritten what I'm doing in a simple way, starting from the example on the official website:

I've also uploaded the example I'm trying to modify to Stackblitz so you can see it in action:

Open code on stackblitz.com

Here the full code:

<script setup lang="ts">
import {
  FlexRender,
  getCoreRowModel,
  useVueTable,
  createColumnHelper,
} from '@tanstack/vue-table'
import { ref } from 'vue'

type Person = {
  firstName: string
  lastName: string
  age: number
  visits: number
  status: string
  progress: number
}

const defaultData: Person[] = [
  {
    firstName: 'tanner',
    lastName: 'linsley',
    age: 24,
    visits: 100,
    status: 'In Relationship',
    progress: 50,
  },
  {
    firstName: 'tandy',
    lastName: 'miller',
    age: 40,
    visits: 40,
    status: 'Single',
    progress: 80,
  },
  {
    firstName: 'joe',
    lastName: 'dirte',
    age: 45,
    visits: 20,
    status: 'Complicated',
    progress: 10,
  },
]

const columnHelper = createColumnHelper<Person>()

const columns = [
  columnHelper.accessor('firstName', {
    cell: info => info.getValue(),
    header: () => 'First Name',
    size: 150,
    minSize: 10,
    maxSize: 500,
    enableResizing: true,
  }),
  columnHelper.accessor(row => row.lastName, {
    id: 'lastName',
    cell: info => info.getValue(),
    header: () => 'Last Name',
    size: 150,
    minSize: 10,
    maxSize: 500,
    enableResizing: true,
  }),
]

const data = ref(defaultData)
const columnSizing = ref({})
const columnSizingInfo = ref({})

const rerender = () => {
  data.value = defaultData
}

const table = useVueTable({
  get data() {
    return data.value
  },
  columns,
  columnResizeMode: 'onChange',
  enableColumnResizing: true,
  state: {
    get columnSizing() {
      return columnSizing.value
    },
    get columnSizingInfo() {
      return columnSizingInfo.value
    },
  },
  onColumnSizingChange: updater => {
    console.log('onColumnSizingChange triggered');
    columnSizing.value = typeof updater === 'function' ? updater(columnSizing.value) : updater
  },
  onColumnSizingInfoChange: updater => {
    console.log('onColumnSizingInfoChange triggered');

  },
  getCoreRowModel: getCoreRowModel(),
})
</script>

<template>
  <div class="p-2 overflow-x-auto">
    <table :style="{ width: `${table.getTotalSize()}px` }">
      <thead>
        <tr v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">
          <th
            v-for="header in headerGroup.headers"
            :key="header.id"
            :colSpan="header.colSpan"
            :style="{ width: `${header.getSize()}px` }"
          >
            <div
              v-if="!header.isPlaceholder"
              :class="{
                'cursor-pointer select-none': header.column.getCanSort(),
              }"
              @click="header.column.getToggleSortingHandler()?.($event)"
            >
              <FlexRender :render="header.column.columnDef.header" :props="header.getContext()" />
            </div>
            <div
              v-if="header.column.getCanResize()"
              class="resizer"
              :class="{
                isResizing: header.column.getIsResizing(),
              }"
              @mousedown="header.getResizeHandler()"
              @touchstart="header.getResizeHandler()"
              @dblclick="() => header.column.resetSize()"
            ></div>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="row in table.getRowModel().rows" :key="row.id">
          <td
            v-for="cell in row.getVisibleCells()"
            :key="cell.id"
            :style="{ width: `${cell.column.getSize()}px` }"
          >
            <FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
          </td>
        </tr>
      </tbody>
    </table>
    <div class="h-4" />
    <button @click="rerender" class="border p-2">Rerender</button>
    <pre>columnSizing: {{ columnSizing }}</pre>
    <pre>columnSizingInfo: {{ columnSizingInfo }}</pre>
  </div>
</template>

<style>
html {
  font-family: sans-serif;
  font-size: 14px;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  border: 1px solid lightgray;
}

tbody {
  border-bottom: 1px solid lightgray;
}

th,
td {
  padding: 4px 8px;
  border-bottom: 1px solid lightgray;
  border-right: 1px solid lightgray;
  position: relative;
}

.resizer {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 5px;
  background: rgba(0, 123, 255, 0.2);
  cursor: col-resize;
  user-select: none;
  touch-action: none;
}

.resizer:hover,
.resizer.isResizing {
  background: rgba(0, 123, 255, 0.5);
}
</style>

Dependencies:

nodejs: v24.0.1 vue: 3.5.13 @tanstack/table-core: 8.21.3 @tanstack/vue-table: 8.21.3

Your Minimal, Reproducible Example - (Sandbox Highly Recommended)

https://stackblitz.com/edit/tanstack-table-slp15df9?file=src%2FApp.vue&preset=node

Screenshots or Videos (Optional)

No response

Do you intend to try to help solve this bug with your own PR?

None

Terms & Code of Conduct

• [x] I agree to follow this project's Code of Conduct
• [x] I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

[mrddter]

No reaction on this? 😞