Vue resizing

[lucatk]

Hi!

First of all, I love the work on Table v8 and it works very good and performant even in Vue!
I have tried adapting the React Column Sizing example to work in Vue, however I can't get the sizing to work. Since the widths are accessed via a function on the table/cell, this does not get updated in Vue, because they are not reactive properties.

Has anyone found a solution for this? I tried to react to onStateChange, calling the getTotalSize in there and updating a ref, however I always end up with width:0px; on mount.

[nkutinha]

Expressing my interest in this issue as well. Can't get the resize feature working with Vue. @lucatk is this caused due to the methods being non-reactive? because method calls such as header.column.getIsSorted() work fine.

[janhoogeveen]

<th
  v-for="header in headerGroup.headers"
  :key="header.id"
  :colSpan="header.colSpan"
  class="font-bold"
  :style="{ width: header.getSize() + 'px' }"
>

This example work for me.

The resize handlers are a bit iffy, took me some time to figure that out.

<div
  @mousedown="header.getResizeHandler()?.($event)"
  @touchstart="header.getResizeHandler()?.($event)"
>

[jdodlsuw]

working, thank you

[RSchmitzHH]

@janhoogeveen / @jdodlsuw I do not get this working :/
Can you perhaps show how you defined the table and columns and how your entire <th> looks like, so where you set the <div> with the getResizeHandler() ?
Thank you so much in advance

[bbhhainx]

@RSchmitzHH try this:

<th
  class="border border-black relative"
  v-for="header in headerGroup.headers"
  :key="header.id"
  :colSpan="header.colSpan"
  :style="{ width: header.getSize() + 'px' }"
>
  <FlexRender
    v-if="!header.isPlaceholder"
    :render="header.column.columnDef.header"
    :props="header.getContext()"
  />
  <div class="resizer right-0" @mousedown="header.getResizeHandler()?.($event)"></div>
</th>