{"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.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install slickgrid-vue"],"cli":null},"imports":["import { SlickgridVue } from 'slickgrid-vue';","import { type Column, type GridOption } from 'slickgrid-vue';","import 'slickgrid-vue/dist/styles/css/slickgrid-theme-default.css';"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}