Introduction
NuGrid is a feature-rich data grid component built for Nuxt applications. It combines a lightweight built-in engine with Nuxt UI components to provide a seamless, highly customizable grid experience.
Key Features
High Performance
Built-in virtualization for smooth rendering of thousands of rows with minimal memory footprint.
Cell Editing
Inline cell editing with support for various data types, validation, and custom editors.
Row Grouping
Group data by one or more columns with expandable groups and aggregate functions.
Keyboard Navigation
Full keyboard support including Excel-like navigation, editing triggers, and shortcuts.
Theming
Fully customizable themes with built-in support for Nuxt UI's design system.
Built-in Engine
Lightweight data engine for powerful sorting, filtering, pagination, and column management.
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