fix(Table): handle reactive columns (#4412)

Author: or2e

src/runtime/components/Table.vue

@@ -233,7 +233,9 @@ const tableRef = ref<HTMLTableElement | null>(null)
 const tableApi = useVueTable({
   ...reactiveOmit(props, 'as', 'data', 'columns', 'caption', 'sticky', 'loading', 'loadingColor', 'loadingAnimation', 'class', 'ui'),
   data,
-  columns: columns.value,
+  get columns() {
+    return columns.value
+  },
   meta: meta.value,
   getCoreRowModel: getCoreRowModel(),
   ...(props.globalFilterOptions || {}),

test/components/Table.spec.ts

@@ -1,5 +1,7 @@
-import { h } from 'vue'
+import { h, ref, computed } from 'vue'
 import { describe, it, expect } from 'vitest'
+import { flushPromises } from '@vue/test-utils'
+import { mountSuspended } from '@nuxt/test-utils/runtime'
 import { UCheckbox, UButton, UBadge, UDropdownMenu } from '#components'
 import Table, { type TableProps, type TableSlots, type TableColumn } from '../../src/runtime/components/Table.vue'
 import ComponentRender from '../component-render'
@@ -168,4 +170,46 @@ describe('Table', () => {
     const html = await ComponentRender(nameOrHtml, options, Table)
     expect(html).toMatchSnapshot()
   })
+
+  it('reactive columns', async () => {
+    const wrapper = await mountSuspended({
+      components: { Table },
+      setup() {
+        const filter = ref<1 | 2>(1)
+
+        const columns = computed<TableColumn<typeof data[number]>[]>(() => [
+          {
+            accessorKey: 'id'
+          },
+          ...(filter.value === 2
+            ? [
+                {
+                  accessorKey: 'amount',
+                  header: () => h('div', { ['data-test-th']: 'amount' }, 'Amount')
+                } satisfies TableColumn<typeof data[number]>
+              ]
+            : [])
+        ])
+
+        function onClick() {
+          filter.value = 2
+        }
+
+        return { data, columns, onClick }
+      },
+      template: `
+            <div>
+              <button @click="onClick">Change filter</button>
+              <Table :data :columns />
+            </div>
+          `
+    })
+
+    expect(wrapper.find('[data-test-th="amount"]').exists()).toBeFalsy()
+
+    wrapper.find('button').trigger('click')
+    await flushPromises()
+
+    expect(wrapper.find('[data-test-th="amount"]').exists()).toBeTruthy()
+  })
 })