Layout & Display
Show/Hide Headers
Control column header visibility.
NuGrid allows you to hide column headers entirely using the layout.showHeaders option. This is useful for data-only views, dashboards, or cases where column headers are redundant.
Hiding Headers
Set layout.showHeaders to false to hide all column headers:
<template>
<NuGrid
:data="data"
:columns="columns"
:layout="{ showHeaders: false }"
/>
</template>
By default, showHeaders is true and headers are visible.
Dynamic Toggle
Allow users to toggle header visibility at runtime:
<script setup lang="ts">
const showHeaders = ref(true)
</script>
<template>
<div class="mb-4">
<UButton
:color="showHeaders ? 'primary' : 'neutral'"
@click="showHeaders = !showHeaders"
>
Headers: {{ showHeaders ? 'Visible' : 'Hidden' }}
</UButton>
</div>
<NuGrid
:data="data"
:columns="columns"
:layout="{ showHeaders }"
/>
</template>
With Grouping
Hidden headers work with all layout modes including grouped and split-group:
<script setup lang="ts">
const grouping = ref(['category'])
</script>
<template>
<NuGrid
v-model:grouping="grouping"
:data="data"
:columns="columns"
:layout="{ mode: 'group', showHeaders: false }"
/>
</template>
In split-group mode, per-group column headers are also hidden:
<template>
<NuGrid
v-model:grouping="grouping"
:data="data"
:columns="columns"
:layout="{ mode: 'splitgroup', showHeaders: false }"
/>
</template>
With Virtualization
Hidden headers integrate with virtualization. When headers are hidden, no virtual row items are allocated for column headers, keeping the layout tight:
<template>
<div class="h-[600px]">
<NuGrid
:data="data"
:columns="columns"
:layout="{ showHeaders: false }"
virtualization
/>
</div>
</template>
Complete Example
<script setup lang="ts">
interface Product {
id: number
name: string
category: string
price: number
stock: number
}
const data = ref<Product[]>([
{ id: 1, name: 'Widget A', category: 'Electronics', price: 29.99, stock: 150 },
{ id: 2, name: 'Widget B', category: 'Electronics', price: 49.99, stock: 75 },
{ id: 3, name: 'Gadget X', category: 'Accessories', price: 19.99, stock: 200 },
// ... more data
])
const columns: NuGridColumn<Product>[] = [
{ accessorKey: 'category', header: 'Category' },
{ accessorKey: 'name', header: 'Name' },
{ accessorKey: 'price', header: 'Price' },
{ accessorKey: 'stock', header: 'Stock' },
]
const showHeaders = ref(true)
</script>
<template>
<NuGrid
:data="data"
:columns="columns"
:layout="{ showHeaders }"
/>
</template>