Theming

Custom Theme

Build your own theme with custom styling.

NuGrid's theming system allows you to create custom themes that match your application's design.

Interactive Demo

Using the UI Prop

The simplest way to customize styling is with the ui prop:

<template>
  <NuGrid
    :data="data"
    :columns="columns"
    :ui="{
      base: 'border-separate border-spacing-0',
      thead: '[&>tr]:bg-gray-100 dark:[&>tr]:bg-gray-800',
      th: 'py-3 px-4 font-semibold text-left',
      td: 'py-2 px-4 border-b border-gray-200',
      tr: 'hover:bg-gray-50 dark:hover:bg-gray-800/50',
    }"
  />
</template>

UI Slots Reference

Slot	Description
`root`	Root container element
`base`	Table element itself
`thead`	Table header
`tbody`	Table body
`tfoot`	Table footer
`tr`	Table rows
`th`	Header cells
`td`	Body cells

Registering a Custom Theme

For reusable themes, register them globally:

// plugins/nugrid-themes.ts
import { registerTheme } from '@nu-grid/nuxt'

registerTheme('corporate', {
  theme: {
    slots: {
      root: 'font-sans',
      base: 'border-collapse',
      thead: 'bg-blue-900 text-white',
      th: 'py-3 px-4 font-bold uppercase text-sm tracking-wide',
      tbody: '',
      tr: 'hover:bg-blue-50 dark:hover:bg-blue-900/20',
      td: 'py-2 px-4 border-b border-gray-200',
    },
  },
})

Then use it:

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

Extending the Default Theme

Build on top of the default theme:

import { getTheme, registerTheme } from '@nu-grid/nuxt'

const defaultTheme = getTheme('default')

registerTheme('my-theme', {
  theme: {
    ...defaultTheme.theme,
    slots: {
      ...defaultTheme.theme.slots,
      // Override specific slots
      th: 'py-4 px-6 font-bold bg-primary text-white',
      td: 'py-3 px-6',
    },
  },
})

Dark Mode Support

Themes automatically support dark mode through Tailwind's dark: variant:

registerTheme('dual-mode', {
  theme: {
    slots: {
      thead: 'bg-gray-100 dark:bg-gray-900',
      th: 'text-gray-900 dark:text-gray-100',
      tr: 'hover:bg-gray-50 dark:hover:bg-gray-800',
      td: 'border-gray-200 dark:border-gray-700',
    },
  },
})

Focus and Selection Styling

Customize focus and selection appearance:

<template>
  <NuGrid
    :data="data"
    :columns="columns"
    :ui="{
      td: `
        border-b border-gray-200
        [tr[data-focused=true]_&]:bg-blue-100
        [tr[data-focused=true]_&]:dark:bg-blue-900/30
        [tr[data-selected=true]_&]:bg-green-100
        [tr[data-selected=true]_&]:dark:bg-green-900/30
      `,
    }"
  />
</template>

Complete Custom Theme Example

registerTheme('dashboard', {
  theme: {
    slots: {
      root: 'rounded-lg overflow-hidden shadow-lg',
      base: 'w-full border-collapse',
      thead: 'bg-gradient-to-r from-purple-600 to-blue-600 text-white',
      th: 'py-4 px-6 font-semibold text-left text-sm uppercase tracking-wider',
      tbody: 'divide-y divide-gray-200 dark:divide-gray-700',
      tr: `
        transition-colors duration-150
        hover:bg-gray-50 dark:hover:bg-gray-800/50
        [&[data-selected=true]]:bg-purple-50 dark:[&[data-selected=true]]:bg-purple-900/20
      `,
      td: 'py-3 px-6 text-sm',
      tfoot: 'bg-gray-50 dark:bg-gray-800 font-medium',
    },
  },
})

NuGrid uses tailwind-variants internally for theme composition, allowing powerful variant-based styling patterns.

Compact Theme

Dense layout for data-heavy applications.

Row Animation

Animated row transitions and effects.