{"id":42618694,"url":"https://github.com/nu-grid/nu-grid-nuxt","last_synced_at":"2026-01-29T04:13:32.881Z","repository":{"id":331742948,"uuid":"1131960567","full_name":"nu-grid/nu-grid-nuxt","owner":"nu-grid","description":"A powerful data grid component for Nuxt with virtualization, cell editing, and more","archived":false,"fork":false,"pushed_at":"2026-01-27T01:33:34.000Z","size":861,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-01-27T13:38:15.934Z","etag":null,"topics":["grid","nuxt","nuxt-module","nuxtui"],"latest_commit_sha":null,"homepage":"https://www.nu-grid.dev","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nu-grid.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-01-11T03:08:24.000Z","updated_at":"2026-01-27T01:33:30.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/nu-grid/nu-grid-nuxt","commit_stats":null,"previous_names":["nu-grid/nu-grid-nuxt"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/nu-grid/nu-grid-nuxt","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nu-grid%2Fnu-grid-nuxt","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nu-grid%2Fnu-grid-nuxt/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nu-grid%2Fnu-grid-nuxt/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nu-grid%2Fnu-grid-nuxt/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nu-grid","download_url":"https://codeload.github.com/nu-grid/nu-grid-nuxt/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nu-grid%2Fnu-grid-nuxt/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28862142,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-28T22:56:21.783Z","status":"online","status_checked_at":"2026-01-29T02:00:06.714Z","response_time":59,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["grid","nuxt","nuxt-module","nuxtui"],"created_at":"2026-01-29T04:13:32.406Z","updated_at":"2026-01-29T04:13:32.872Z","avatar_url":"https://github.com/nu-grid.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"nu-grid-logo.svg\" alt=\"NuGrid Logo\" width=\"400\" /\u003e\n\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003eNuGrid\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://npmjs.com/package/@nu-grid/nuxt\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/@nu-grid/nuxt/latest.svg?style=flat\u0026colorA=020420\u0026colorB=00DC82\" alt=\"npm version\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://npm.chart.dev/@nu-grid/nuxt\"\u003e\u003cimg src=\"https://img.shields.io/npm/dm/@nu-grid/nuxt.svg?style=flat\u0026colorA=020420\u0026colorB=00DC82\" alt=\"npm downloads\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://npmjs.com/package/@nu-grid/nuxt\"\u003e\u003cimg src=\"https://img.shields.io/npm/l/@nu-grid/nuxt.svg?style=flat\u0026colorA=020420\u0026colorB=00DC82\" alt=\"License\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://nuxt.com\"\u003e\u003cimg src=\"https://img.shields.io/badge/Nuxt-020420?logo=nuxt.js\" alt=\"Nuxt\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\nA powerful, feature-rich data grid component for Nuxt applications with virtualization, inline editing, and TanStack Table integration.\n\n- [Release Notes](/CHANGELOG.md)\n- [Demos](https://www.nug-rid.dev/demos)\n- [Documentation](https://www.nu-grid.dev)\n\n## Features\n\n- **High Performance** - Virtualized rendering handles thousands of rows smoothly\n- **Inline Editing** - Edit cells directly with built-in validation support\n- **Row Grouping** - Group data by columns with expandable/collapsible groups\n- **Keyboard Navigation** - Excel-like navigation and editing experience\n- **Theming** - Full customization with Nuxt UI design system integration\n- **TanStack Table** - Built on TanStack Table for sorting, filtering, and pagination\n\n### Built-in Cell Types\n\n- Text \u0026 Textarea\n- Number \u0026 Currency\n- Date (with date picker)\n- Boolean (checkbox)\n- Selection (dropdown)\n- Rating (star rating)\n- Lookup (autocomplete/search)\n- Action Menu\n\n### Additional Capabilities\n\n- Column resizing, pinning, and reordering\n- Row selection (single and multi-select)\n- Excel export\n- State persistence (save/restore column widths, sorting, filters)\n- Custom cell type support\n- Comprehensive event system\n\n## Installation\n\n```bash\n# Using pnpm\npnpm add @nu-grid/nuxt @nuxt/ui @vueuse/nuxt\n\n# Using npm\nnpm install @nu-grid/nuxt @nuxt/ui @vueuse/nuxt\n\n# Using yarn\nyarn add @nu-grid/nuxt @nuxt/ui @vueuse/nuxt\n```\n\nAdd `@nu-grid/nuxt` to your `nuxt.config.ts`:\n\n```ts\nexport default defineNuxtConfig({\n  modules: ['@nuxt/ui', '@nu-grid/nuxt'],\n})\n```\n\n### CSS Setup\n\nNuGrid requires its CSS to be imported in your application's main stylesheet. This ensures Tailwind scans the component classes for proper theming and focus styling.\n\nAdd the following to your `main.css` (or equivalent):\n\n```css\n@import \"tailwindcss\";\n@import \"@nuxt/ui\";\n@import \"@nu-grid/nuxt/css\";\n```\n\n## Quick Start\n\n```vue\n\u003cscript setup lang=\"ts\"\u003e\nimport type { NuGridColumn } from '@nu-grid/nuxt/types'\n\ninterface Person {\n  id: number\n  name: string\n  email: string\n  age: number\n}\n\nconst columns: NuGridColumn\u003cPerson\u003e[] = [\n  { accessorKey: 'name', header: 'Name' },\n  { accessorKey: 'email', header: 'Email' },\n  { accessorKey: 'age', header: 'Age', cellType: 'number' }\n]\n\nconst data = ref\u003cPerson[]\u003e([\n  { id: 1, name: 'John Doe', email: 'john@example.com', age: 32 },\n  { id: 2, name: 'Jane Smith', email: 'jane@example.com', age: 28 },\n  { id: 3, name: 'Bob Wilson', email: 'bob@example.com', age: 45 }\n])\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cNuGrid :columns=\"columns\" :data=\"data\" /\u003e\n\u003c/template\u003e\n```\n\n### Enabling Editing\n\n```vue\n\u003cscript setup lang=\"ts\"\u003e\nconst columns: NuGridColumn\u003cPerson\u003e[] = [\n  { accessorKey: 'name', header: 'Name', editable: true },\n  { accessorKey: 'email', header: 'Email', editable: true },\n  {\n    accessorKey: 'age',\n    header: 'Age',\n    cellType: 'number',\n    editable: true\n  }\n]\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cNuGrid\n    :columns=\"columns\"\n    :data=\"data\"\n    editable\n    @cell-value-changed=\"handleChange\"\n  /\u003e\n\u003c/template\u003e\n```\n\n### With Virtualization\n\nFor large datasets, enable virtualization for optimal performance:\n\n```vue\n\u003ctemplate\u003e\n  \u003cNuGrid\n    :columns=\"columns\"\n    :data=\"largeDataset\"\n    virtualized\n    :row-height=\"40\"\n    style=\"height: 600px\"\n  /\u003e\n\u003c/template\u003e\n```\n\n### Row Grouping\n\n```vue\n\u003ctemplate\u003e\n  \u003cNuGridGroup\n    :columns=\"columns\"\n    :data=\"data\"\n    :group-by=\"['department', 'status']\"\n  /\u003e\n\u003c/template\u003e\n```\n\n## Props\n\n| Prop           | Type                                | Default       | Description                |\n| -------------- | ----------------------------------- | ------------- | -------------------------- |\n| `columns`      | `NuGridColumn\u003cT\u003e[]`                 | required      | Column definitions         |\n| `data`         | `T[]`                               | required      | Row data array             |\n| `editable`     | `boolean`                           | `false`       | Enable inline editing      |\n| `virtualized`  | `boolean`                           | `false`       | Enable virtualization      |\n| `rowHeight`    | `number`                            | `40`          | Row height in pixels       |\n| `rowSelection` | `boolean \\| 'single' \\| 'multiple'` | `false`       | Enable row selection       |\n| `theme`        | `NuGridTheme`                       | default theme | Custom theme configuration |\n\n## Events\n\n| Event                   | Payload                               | Description             |\n| ----------------------- | ------------------------------------- | ----------------------- |\n| `cell-click`            | `{ row, column, value }`              | Cell was clicked        |\n| `cell-double-click`     | `{ row, column, value }`              | Cell was double-clicked |\n| `cell-value-changed`    | `{ row, column, oldValue, newValue }` | Cell value was edited   |\n| `row-selection-changed` | `{ selectedRows }`                    | Row selection changed   |\n| `validation-error`      | `{ row, column, error }`              | Validation failed       |\n\nSee [EVENTS.md](/EVENTS.md) for a complete event reference.\n\n## Development\n\n```bash\n# Install dependencies\npnpm install\n\n# Generate type stubs and prepare\npnpm run dev:prepare\n\n# Start development server with playground\npnpm run dev\n\n# Start documentation site\npnpm run docs\n\n# Run tests\npnpm run test\n\n# Run tests in watch mode\npnpm run test:watch\n\n# Run E2E tests\npnpm run test:e2e\n\n# Type check\npnpm run test:types\n\n# Lint\npnpm run lint\n\n# Format\npnpm run format\n\n# Build for production\npnpm run prepack\n\n# Release\npnpm run release\n```\n\n## Project Structure\n\n```\nsrc/\n├── module.ts              # Nuxt module entry\n└── runtime/\n    ├── components/        # Vue components\n    ├── composables/       # Vue composables\n    ├── cell-types/        # Built-in cell types\n    ├── types/             # TypeScript definitions\n    └── themes/            # Theme configurations\n\ndocs/                      # Documentation site\nplaygrounds/nuxt/          # Development playground\ntest/                      # Unit tests\ne2e/                       # End-to-end tests\n```\n\n## Contributing\n\nContributions are welcome! Please read our contributing guidelines before submitting a pull request.\n\n1. Fork the repository\n2. Create your feature branch (`git checkout -b feature/amazing-feature`)\n3. Commit your changes (`git commit -m 'Add amazing feature'`)\n4. Push to the branch (`git push origin feature/amazing-feature`)\n5. Open a Pull Request\n\n## License\n\n[MIT](./LICENSE.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnu-grid%2Fnu-grid-nuxt","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnu-grid%2Fnu-grid-nuxt","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnu-grid%2Fnu-grid-nuxt/lists"}