N
Nuxt•this hour
i.wont.tell

How to hide columns with UTable?

I'm trying with 
<script setup lang="ts">
import { ref } from "vue";

const columns = [
  { id: "id", accessorKey: "id", header: "ID"},
  { id: "name", accessorKey: "name", header: "Name" }
];

const data = ref([
  { id: 1, name: "Something" },
  { id: 2, name: "AnotherThing" }
]);
</script>

<template>
  <UTable
    :columns="columns"
    :data="data"
    :initial-state="{ columnVisibility: { id: false } }"
  />
</template>
<script setup lang="ts">
import { ref } from "vue";

const columns = [
  { id: "id", accessorKey: "id", header: "ID"},
  { id: "name", accessorKey: "name", header: "Name" }
];

const data = ref([
  { id: 1, name: "Something" },
  { id: 2, name: "AnotherThing" }
]);
</script>

<template>
  <UTable
    :columns="columns"
    :data="data"
    :initial-state="{ columnVisibility: { id: false } }"
  />
</template>
but it doesn't work, ID is still shown. I have also tried with :state instead and it's the same. I'm using UI v3 Nuxt v4
3 Replies
kapa.ai
kapa.ai•this hour
Hi @i.wont.tell. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Use the column-visibility feature (v-model or prop) instead of initial-state for Nuxt UI’s UTable. Option A — bind visibility via v-model: 
<script setup lang="ts">
import { ref } from 'vue'

const columns = [
  { id: 'id', accessorKey: 'id', header: 'ID' },
  { id: 'name', accessorKey: 'name', header: 'Name' }
]

const data = ref([
  { id: 1, name: 'Something' },
  { id: 2, name: 'AnotherThing' }
])

const columnVisibility = ref({ id: false }) // hide ID
</script>

<template>
  <UTable
    v-model:column-visibility="columnVisibility"
    :columns="columns"
    :data="data"
  />
</template>
<script setup lang="ts">
import { ref } from 'vue'

const columns = [
  { id: 'id', accessorKey: 'id', header: 'ID' },
  { id: 'name', accessorKey: 'name', header: 'Name' }
]

const data = ref([
  { id: 1, name: 'Something' },
  { id: 2, name: 'AnotherThing' }
])

const columnVisibility = ref({ id: false }) // hide ID
</script>

<template>
  <UTable
    v-model:column-visibility="columnVisibility"
    :columns="columns"
    :data="data"
  />
</template>
(This is the documented way to control visibility state and can be toggled at runtime) (With column visibility). Option B — set the columnVisibility state prop: 
<UTable
  :column-visibility="{ id: false }"
  :columns="columns"
  :data="data"
/>
<UTable
  :column-visibility="{ id: false }"
  :columns="columns"
  :data="data"
/>
Notes: - UTable exposes column-visibility as a first-class prop/v-model. The docs show wiring a dropdown to toggle columns and binding v-model:column-visibility to a ref object (With column visibility). - The props section confirms columnVisibility is a supported state prop (VisibilityState) you can pass/bind directly (Props). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•this hour
<@450429685122334730> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
i.wont.tell
i.wont.tellOP•this hour
damn so I had to use ":column-visibility", but as far as I have seen there is nothing about that in the docs, what I understood is what I wrote, using an object in initial-state or state

Did you find this page helpful?