Dynamic table columns

[tkamstra]

Environment

• Operating System: Windows_NT
• Node Version: v22.14.0
• Nuxt Version: 3.16.2
• CLI Version: 3.25.0
• Nitro Version: 2.11.9
• Package Manager: npm@10.9.2
• Builder: -
• User Config: compatibilityDate, devtools, modules, css, colorMode, build, runtimeConfig, app, lodash, vite, router, nitro
• Runtime Modules: @pinia/nuxt@0.9.0, pinia-plugin-persistedstate/nuxt@4.2.0, @nuxt/test-utils/module@3.17.2, @vueuse/nuxt@11.3.0, nuxt-
  countdown@1.2.0, nuxt-lodash@2.5.3, nuxt-monaco-editor@1.3.1, @nuxt/eslint@1.3.0, @nuxt/eslint@1.3.0, @nuxt/fonts@0.11.1, @nuxt/icon@1.12
  .0, @nuxt/image@1.10.0, @nuxt/scripts@0.11.6, @nuxt/test-utils@3.17.2, @nuxt/ui@3.1.0
• Build Modules: -

Is this bug related to Nuxt or Vue?

Nuxt

Version

v3.1.0

Reproduction

https://codesandbox.io/p/devbox/fervent-ptolemy-6njy2z?workspaceId=ws_SZ9iN2xj3x4VbwxN8x8baL&embed=1&file=%2Fapp%2Fpages%2Findex.vue

Description

You cannot dynamically add/remove columns, top toggle should control the visibility of the Status column

Additional context

No response

Logs

[benjamincanac]

Why don't you use the Column Visibility API to achieve that? 🤔 https://ui.nuxt.com/components/table#with-column-visibility

[Fan-iX]

I have similar needs.

I want to render a table with data from a user picked csv file. The total number and names of the columns are arbitrary.

The Column Visibility API requires a well defined table scheme, which is not suitable in my case.

I'd appreciate it if you could provide an example of dynamically rendering an arbitrary number of table columns.

My attempt:

import { useFileDialog } from '@vueuse/core'
const csv = ref("name,email\nAlice,alice@example.com")
const { open, onChange } = useFileDialog()
onChange(async (files) => {
    if (files.length > 0) csv.value = await files[0].text()
    // for example: csv.value="id,name,group\n3,Bob,user\n4,Dave,admin"
})

columns = computed(() => {
    let header = csv.value.split("\n")[0].split(",")
    return header.map((col, i) => ({
        id: col,
        header: col,
        cell: ({ row }) => row.original[i]
    }))
})
data = computed(() => csv.value.split("\n").slice(1).map(line => line.split(",")))

<UTable :columns="columns" :data="data">
<UButton label="pick file" @click="open"/>

[tkamstra]

Why don't you use the Column Visibility API to achieve that? 🤔 https://ui.nuxt.com/components/table#with-column-visibility

@benjamincanac this does work thank you, I missed this in the docs (it would be nice however to have the table columns reactive like data tho)

[eyopa21]

@benjamincanac Isn't it better to use it the old way? with just a dynamic/computed columns?

[benjamincanac]

I agree it would be nice to have the columns dynamic but I'm not sure it's possible with TanStack Table, I quickly tried without success 😬

[mdavo6]

I have been wrestling with columns all day trying to get some code to add a column. I now appreciate that columns are not reactive due to a limitation of tanstack (see following: TanStack/table#4455 (comment)). Could this be made clearer in the Nuxt UI documentation. I didn't see any mention of it.

[jwoertink]

Also just landed on this. Just to add my use case, I have a report for users where they can sort the report by date, or by a "campaign". So the first sort column has to be one or the other, but it can't be both since you can have many campaigns on a single day, or a campaign can be spread across multiple days...

The visibility API sort of works here...

const columnVisibility = computed(() => {
    return {
      campaign: currentFilter.value == "campaign",
      date: currentFilter.value == "date"
    }
  })
const tableColumns = [
    {
      accessorKey: "campaign",
      header: "Campaign",
    },
    {
      accessorKey: "date",
      header: "Date",
    },
    {
      accessorKey: "signups",
      header: "New Signups",
    },
  ]

Hope this helps for anyone else that might land here.

[justgigio]

In my case, i get the list of columns from an external API, so visibility API definitively doesn't work for me.

The columns were updating but the rows were all blank but id (id is a fixed column)

I managed to make it work in my wrapper component by updating options like this:

watch(() => props.columns, () => {
  tableColumns.value = [...getTableColumns()]
  // console.log('columns', tableColumns.value)
  const options = tableApi.value?.options
  tableApi.value?.setOptions({
    ...options,
    columns: tableColumns.value
  })
}, { immediate: true })

AND setting the columns after setting the data, like this:

    // ATENZIONE: rows must be set before columns
    rows.value = response
    await nextTick()
    columns.value = getColumns(response)

I know this workaround seems very nasty but it is what its working for me now, and, maybe, i can help someone by sharing this here.

[JoaoPedroAS51]

Hi @benjamincanac, I hope you're doing well :)
I believe the reactivity should work as expected if you make columns a getter, like this:

useVueTable({
  get columns() {
    return columns.value
  }
})

Same for meta—it should also be a getter to stay reactive.