NuGrid comes with built-in themes that integrate with Nuxt UI's design system.
The default theme provides a clean, modern look:
<template>
<NuGrid :data="data" :columns="columns" />
</template>
Use the compact theme for denser data display:
<script setup lang="ts">
import { nuGridThemeCompact } from '@nu-grid/nuxt/themes'
</script>
<template>
<NuGrid
:data="data"
:columns="columns"
:theme="nuGridThemeCompact"
/>
</template>
The compact theme features:
Themes are objects that define UI classes:
interface NuGridTheme {
root?: string
base?: string
thead?: string
tbody?: string
tfoot?: string
tr?: string
th?: string
td?: string
loading?: string
empty?: string
separator?: string
}
<script setup lang="ts">
const myTheme = {
base: 'w-full border-collapse',
th: 'py-3 px-4 font-semibold text-left bg-gray-100',
td: 'py-2 px-4 border-b',
}
</script>
<template>
<NuGrid :data="data" :columns="columns" :theme="myTheme" />
</template>
Override specific parts:
<template>
<NuGrid
:data="data"
:columns="columns"
:ui="{
th: 'bg-primary text-white',
td: 'border-b border-gray-200',
}"
/>
</template>
The ui prop is merged with the theme:
<script setup lang="ts">
import { nuGridThemeCompact } from '@nu-grid/nuxt/themes'
</script>
<template>
<NuGrid
:data="data"
:columns="columns"
:theme="nuGridThemeCompact"
:ui="{
th: 'bg-primary/10', // Added to compact theme's th classes
}"
/>
</template>
NuGrid themes support dark mode automatically via Nuxt UI's color mode:
<template>
<NuGrid
:data="data"
:columns="columns"
:ui="{
thead: '[&>tr]:bg-gray-100 dark:[&>tr]:bg-gray-800',
td: 'border-gray-200 dark:border-gray-700',
}"
/>
</template>
<template>
<NuGrid
:data="data"
:columns="columns"
:ui="{
tbody: '[&>tr:nth-child(even)]:bg-gray-50 dark:[&>tr:nth-child(even)]:bg-gray-800/50',
}"
/>
</template>
<template>
<NuGrid
:data="data"
:columns="columns"
:ui="{
base: 'border border-gray-200 dark:border-gray-700',
th: 'border border-gray-200 dark:border-gray-700',
td: 'border border-gray-200 dark:border-gray-700',
}"
/>
</template>
<template>
<NuGrid
:data="data"
:columns="columns"
:ui="{
tbody: '[&>tr]:hover:bg-gray-50 dark:[&>tr]:hover:bg-gray-800/50',
}"
/>
</template>
<template>
<NuGrid
:data="data"
:columns="columns"
:ui="{
root: 'rounded-lg overflow-hidden',
base: 'border-separate border-spacing-0',
th: 'first:rounded-tl-lg last:rounded-tr-lg',
tbody: '[&>tr:last-child>td:first-child]:rounded-bl-lg [&>tr:last-child>td:last-child]:rounded-br-lg',
}"
/>
</template>