Introduction

NuGrid is a feature-rich data grid component built for Nuxt applications. It combines the power of TanStack Table with Nuxt UI components to provide a seamless, highly customizable grid experience.

Key Features

Quick Example

Here's a simple example to get you started:

<script setup lang="ts">
import type { NuGridColumn } from '#nu-grid/types'

interface User {
  id: number
  name: string
  email: string
}

const data = ref<User[]>([
  { id: 1, name: 'Alice', email: 'alice@example.com' },
  { id: 2, name: 'Bob', email: 'bob@example.com' },
  { id: 3, name: 'Carol', email: 'carol@example.com' },
])

const columns: NuGridColumn<User>[] = [
  { accessorKey: 'id', header: 'ID' },
  { accessorKey: 'name', header: 'Name' },
  { accessorKey: 'email', header: 'Email' },
]
</script>

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

What's Included

NuGrid provides everything you need to build powerful data grids:

• Data Display: Render tabular data with customizable columns and cells
• Selection: Single and multi-row selection with checkbox support
• Editing: Inline cell editing with validation and custom editors
• Sorting & Filtering: Column sorting and filtering out of the box
• Pagination: Client-side pagination with configurable page sizes
• Grouping: Group rows by columns with expand/collapse functionality
• Virtualization: Efficient rendering for large datasets
• Theming: Built-in themes and full customization support
• Excel Export: Export data to Excel with formatting support
• Drag & Drop: Row reordering and column reordering
• State Persistence: Save and restore grid state

Next Steps