{"id":12043,"library":"slickgrid-vue","title":"Slickgrid-Vue","description":"Slickgrid-Vue is a dedicated Vue 3 component that wraps the core functionalities of Slickgrid-Universal, a TypeScript-written, framework-agnostic data grid library. It provides a comprehensive set of features, including various editors, filters, extensions, and services, enhancing the classic SlickGrid experience for modern Vue applications. The library is currently stable at version 10.5.0, with minor releases typically occurring every 2-4 weeks and major releases, such as v10.0.0, approximately annually. Key differentiators include its extensive suite of optional backend services (OData, GraphQL, and a newly introduced SQL Backend Service), robust export capabilities (Excel, PDF), and strong TypeScript support, making it suitable for complex enterprise-grade data visualization and manipulation within the Vue ecosystem. It aims to offer a highly configurable and performant data table solution, capable of handling large datasets efficiently.","status":"active","version":"10.5.0","language":"javascript","source_language":"en","source_url":"https://github.com/ghiscoding/slickgrid-universal","tags":["javascript","OData","GraphQL","vue","vue3","plugin","data grid","datagrid","datatable","typescript"],"install":[{"cmd":"npm install slickgrid-vue","lang":"bash","label":"npm"},{"cmd":"yarn add slickgrid-vue","lang":"bash","label":"yarn"},{"cmd":"pnpm add slickgrid-vue","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required peer dependency for the Vue 3 framework.","package":"vue","optional":false},{"reason":"Optional package for enabling Excel export functionality.","package":"@slickgrid-universal/excel-export","optional":true},{"reason":"Optional package for GraphQL backend service integration.","package":"@slickgrid-universal/graphql","optional":true},{"reason":"Optional package for OData backend service integration.","package":"@slickgrid-universal/odata","optional":true},{"reason":"Optional package for SQL backend service integration (new in v10.4.0).","package":"@slickgrid-universal/sql-backend-service","optional":true},{"reason":"Optional package for PDF export functionality (introduced in v9.13.0).","package":"@slickgrid-universal/pdf-export","optional":true},{"reason":"Optional dependency for enhanced PDF exports via `@slickgrid-universal/pdf-export` (mentioned in v10.1.0).","package":"jspdf-autotable","optional":true},{"reason":"Contains core features, extensions, and interfaces for Slickgrid-Universal. While often implicitly installed, it's the foundation for many features.","package":"@slickgrid-universal/common","optional":false}],"imports":[{"note":"Slickgrid-Vue is an ES Module-first library. Use named `import` for the component. CommonJS `require` is not supported for modern Vue 3 components.","wrong":"const SlickgridVue = require('slickgrid-vue');","symbol":"SlickgridVue","correct":"import { SlickgridVue } from 'slickgrid-vue';"},{"note":"These are TypeScript interfaces/types. Best practice in modern TypeScript/ESM projects is to use `import type` to clearly distinguish type-only imports, preventing runtime bundling of non-existent values.","wrong":"import { Column, GridOption } from 'slickgrid-vue';","symbol":"Column, GridOption","correct":"import { type Column, type GridOption } from 'slickgrid-vue';"},{"note":"Import the default CSS theme or any other provided themes (e.g., `slickgrid-theme-bootstrap.css`) in your main application file or component. Customization is also possible with SASS.","symbol":"Slickgrid-Vue Styles","correct":"import 'slickgrid-vue/dist/styles/css/slickgrid-theme-default.css';"}],"quickstart":{"code":"<script setup lang=\"ts\">\nimport { ref, type Ref } from 'vue';\nimport { type Column, type GridOption, SlickgridVue } from 'slickgrid-vue';\n\ninterface User {\n  id: number; // SlickGrid typically expects an 'id' field\n  firstName: string;\n  lastName: string;\n  age: number;\n}\n\n// It could also be `Column<User>[]`\nconst columns: Ref<Column<User>[]> = ref([\n  { id: 'firstName', name: 'First Name', field: 'firstName', sortable: true, minWidth: 100 },\n  { id: 'lastName', name: 'Last Name', field: 'lastName', sortable: true, minWidth: 100 },\n  { id: 'age', name: 'Age', field: 'age', type: 'number', sortable: true, minWidth: 80 },\n]);\n\nconst options = ref<GridOption>({\n  enableAutoResize: true,\n  enableColumnPicker: true,\n  enableGridMenu: true,\n  enablePagination: true,\n  pagination: { pageSizes: [10, 25, 50], pageSize: 10 },\n  enableFiltering: true,\n  enableSorting: true,\n  gridId: 'my-vue-grid',\n  datasetIdPropertyName: 'id' // Essential for data keying\n});\n\nconst dataset = ref<User[]>([\n  { id: 1, firstName: 'John', lastName: 'Doe', age: 20 },\n  { id: 2, firstName: 'Jane', lastName: 'Smith', age: 21 },\n  { id: 3, firstName: 'Peter', lastName: 'Jones', age: 35 },\n  { id: 4, firstName: 'Alice', lastName: 'Williams', age: 28 },\n  { id: 5, firstName: 'Robert', lastName: 'Brown', age: 42 },\n]);\n\n// Add a few more rows for better demonstration of pagination/scrolling\nfor (let i = 6; i <= 25; i++) {\n  dataset.value.push({\n    id: i,\n    firstName: `First${i}`,\n    lastName: `Last${i}`,\n    age: 20 + (i % 30)\n  });\n}\n</script>\n\n<template>\n  <div class=\"my-grid-container\" style=\"height: 500px; width: 100%;\">\n    <slickgrid-vue\n      grid-id=\"grid1\"\n      v-model:columns=\"columns\"\n      v-model:dataset=\"dataset\"\n      v-model:grid-options=\"options\"\n    ></slickgrid-vue>\n  </div>\n</template>\n\n<style>\n@import 'slickgrid-vue/dist/styles/css/slickgrid-theme-default.css';\n.my-grid-container {\n  border: 1px solid #ccc;\n}\n</style>\n","lang":"typescript","description":"This quickstart demonstrates rendering a basic Slickgrid-Vue data table component with defined columns, a dataset, and essential grid configurations using the Vue 3 Composition API. It includes basic sorting, filtering, and pagination."},"warnings":[{"fix":"Refer to the specific 'Migration Guide 10.0' available in the Slickgrid-Universal documentation for your framework (e.g., Slickgrid-Vue Migration Guide 10.0) to understand and apply necessary code changes.","message":"Version 10.0.0 introduced significant breaking changes. Projects upgrading from v9.x or earlier will require migration steps.","severity":"breaking","affected_versions":">=10.0.0"},{"fix":"Avoid using `optionItems` in Menu Options. Re-evaluate menu customization using alternative configuration methods or `commandListBuilder` where applicable.","message":"The `optionItems` list within Menu Options has been deprecated and is scheduled for removal in v11.","severity":"deprecated","affected_versions":">=10.3.0"},{"fix":"Transition to using the new `columnListBuilder` for advanced column manipulation and sorting features.","message":"The `columnSort` property in ColumnPicker/GridMenu has been deprecated in favor of the more flexible `columnListBuilder`.","severity":"deprecated","affected_versions":">=10.2.0"},{"fix":"After upgrading, carefully review your application's styling. Adjust any custom CSS that might conflict with the updated default themes or internal styling changes.","message":"CSS styling fixes and potential theme changes introduced in v10.3.0 may impact custom CSS overrides or existing themes.","severity":"gotcha","affected_versions":">=10.3.0"},{"fix":"Ensure your project's `vue` dependency is updated to `^3.5.0` or later. Older Vue 3 versions or Vue 2 are not supported.","message":"Slickgrid-Vue (and its underlying Slickgrid-Universal) requires Vue.js version 3.5.0 or higher.","severity":"breaking","affected_versions":"<3.5.0 (Vue)"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Verify that all necessary plugins and extensions (e.g., `RowSelectionExtension`, `CellEditingExtension`) are imported and correctly included in `gridOptions.externalResources` or `gridOptions.plugins` as per the documentation.","cause":"This error typically means a required SlickGrid plugin or an extension from Slickgrid-Universal was not properly imported, initialized, or provided in the grid options.","error":"TypeError: Cannot read properties of undefined (reading 'registerPlugin')"},{"fix":"Ensure `import { SlickgridVue } from 'slickgrid-vue';` is present in your component's script section (especially in `<script setup>`) and that Vue can resolve it. If using Options API, ensure it's listed in the `components` option.","cause":"The `SlickgridVue` component was not correctly imported or registered within the Vue application or the parent component.","error":"Failed to resolve component: slickgrid-vue"},{"fix":"Use ES Module `import` syntax: `import { SlickgridVue } from 'slickgrid-vue';`. Ensure your build tool (e.g., Vite) is configured for ESM. If encountering issues with `import type` for interfaces, ensure your TypeScript configuration and build process support it.","cause":"Attempting to use `require()` or incorrect named `import` syntax for a library primarily distributed as ES Modules in a modern Vue 3/TypeScript environment.","error":"SyntaxError: Named export 'SlickgridVue' not found. The requested module 'slickgrid-vue' is a CommonJS module, which may not support all module.exports as named exports."},{"fix":"Ensure your dataset objects (`User` in the quickstart) contain a unique `id` property (or specify `datasetIdPropertyName` in `GridOption` if using another key). Verify that `Column` definitions accurately reflect your data's fields and types, and use `import type` for clarity with interfaces.","cause":"A mismatch exists between the structure of your dataset objects and the expected type definitions for `Column` or other Slickgrid-Vue interfaces, often concerning the primary key `id` or `field` properties.","error":"Property 'id' is missing in type 'YourDataType' but required in type 'Column'."},{"fix":"If experiencing column width problems or scrollbar collisions, try setting `gridOptions.alwaysShowVerticalScroll = true` to force the scrollbar to always be present, which can help with layout calculations.","cause":"This can occur when SlickGrid has difficulty calculating column widths, especially with CSS styles like `overflow-y: scroll` on the grid container, causing visual misalignments or rendering issues.","error":"Cannot read properties of undefined (reading 'alwaysShowVerticalScroll')"}],"ecosystem":"npm"}