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 😬