Theming

Built-in Themes

Use built-in themes to style NuGrid.

NuGrid comes with built-in themes that integrate with Nuxt UI's design system.

Default Theme

The default theme provides a clean, modern look:

<template>
  <NuGrid :data="data" :columns="columns" />
</template>

Compact Theme

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:

Smaller cell padding
Reduced row height
Tighter spacing
Smaller fonts

Theme Structure

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
}

Applying Themes

Per Grid: the Theme Prop

theme takes the name of a registered theme: 'default', 'compact', or one you registered (see Custom Themes).

<template>
  <NuGrid :data="data" :columns="columns" theme="compact" />
</template>

App-Wide: app.config

Set the theme once for every grid that doesn't pass its own theme prop:

app.config.ts

export default defineAppConfig({
  nuGrid: {
    theme: 'compact',
  },
})

The prop still wins, so one grid can opt back into theme="default".

App-Wide Overrides: `nuGrid.ui`

Adjust any slot for every grid, in the same shape as a Nuxt UI component's entry in app.config. This includes NuGrid's own slots (resize handles, group headers, focus and editing) that ui.table doesn't know about:

app.config.ts

export default defineAppConfig({
  nuGrid: {
    ui: {
      slots: {
        colResizer: 'bg-primary/40',
        groupHeader: 'bg-elevated',
      },
    },
  },
})

Per Grid: the UI Prop

Override specific parts of one grid:

<template>
  <NuGrid
    :data="data"
    :columns="columns"
    :ui="{
      th: 'bg-primary text-inverted',
      td: 'border-b border-default',
    }"
  />
</template>

How the Layers Combine

Each layer adds to the ones below it, and wins where they set the same property:

The theme: the theme prop, else app.config nuGrid.theme, else 'default'.
app.config ui.table: shared with Nuxt UI's UTable, so a grid picks up your table styling and can stand in for UTable.
app.config nuGrid.ui: app-wide overrides for NuGrid.
The ui prop: per grid.

<template>
  <!-- compact theme, then ui.table, then nuGrid.ui, then this -->
  <NuGrid
    :data="data"
    :columns="columns"
    theme="compact"
    :ui="{
      th: 'bg-primary/10',
    }"
  />
</template>

Dark Mode

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>

Theme Examples

Striped Rows

<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>

Bordered

<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>

Hover Effects

<template>
  <NuGrid
    :data="data"
    :columns="columns"
    :ui="{
      tbody: '[&>tr]:hover:bg-gray-50 dark:[&>tr]:hover:bg-gray-800/50',
    }"
  />
</template>

Rounded

<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>

Next Steps

Custom Themes

Create your own themes.

UI Customization

Fine-tune the grid appearance.

Show/Hide Headers

Control column header visibility.

Custom Themes

Create custom themes for NuGrid.