fix(Table): handle reactive columns

[or2e]

🔗 Linked issue

Resolves #4024

❓ Type of change

• 🐞 Bug fix (a non-breaking change that fixes an issue)

📚 Description

Added support for dynamic columns definition, according to the official vue tanstack table example.
Not to be confused with columnVisibility.

📝 Checklist

• I have linked an issue or discussion.

[pkg-pr-new]

npm i https://pkg.pr.new/@nuxt/ui@4412

commit: 510d1a4

[benjamincanac]

It did try this multiple times without success, do you have a working reproduction against this fix? 🤔

In the linked example, the columns shuffle is done like this which already works without your fix:

const randomizeColumns = () => {
  table.setColumnOrder(
    faker.helpers.shuffle(table.getAllLeafColumns().map(d => d.id))
  )
}

[or2e]

Hi!
I have attached the solution's functionality in a unit test, and I also attach 2 sandboxes:
before / after

Yes, I agree that the example from the tanstack documentation that I gave is not quite on topic

Have a nice day!

[benjamincanac]

Thanks for both use-cases, this does seem to do the trick.

(My test was to reassign a ref which didn't work)