SlickGrid-Vue is a custom component created specifically for VueJS framework, it is a wrapper on top of Slickgrid-Universal library which contains the core functionalities. Slickgrid-Universal is written with TypeScript in browser native code, it is framework agnostic and is a monorepo that includes all Editors, Filters, Extensions and Services related to SlickGrid usage with also a few optional packages (like GraphQL, OData, Export to Excel, ...).
📘 Documentation website is powered by GitBook.
You can also play with the live Stackbliz Slickgrid-Vue-Demos. Stackblitz is also the recommended way to provide a repro when opening a new bug or feature request.
Visit the Docs - Quick Start and/or clone the Slickgrid-Vue-Demos repository for a fully working local demo. Please make sure to read the documentation before opening any new issue and also consider asking installation and/or general questions on Stack Overflow unless you think there's a bug with the library.
npm install slickgrid-vueInstall any optional Slickgrid-Universal dependencies, for example Excel Export
npm install @slickgrid-universal/excel-export- Vue >=3.5
<script setup lang="ts">
import { type Column, type GridOption, SlickgridVue } from 'slickgrid-vue';
interface User {
firstName: string;
lastName: string;
age: number;
}
// it could also be `Column<User>[]`
const columnDefinitions: Ref<Column[]> = ref([
{ id: 'firstName', name: 'First Name', field: 'firstName', sortable: true },
{ id: 'lastName', name: 'Last Name', field: 'lastName', sortable: true },
{ id: 'age', name: 'Age', field: 'age', type: 'number', sortable: true },
]);
const dataset = ref<User[]>([
{ id: 1, firstName: 'John', lastName: 'Doe', age: 20 },
{ id: 2, firstName: 'Jane', lastName: 'Smith', age: 21 },
]);
const gridOptions = ref<GridOption>({ /*...*/ }); // optional grid options
</script>
<template>
<slickgrid-vue
grid-id="grid1"
v-model:columns="columnDefinitions"
v-model:data="dataset"
v-model:options="gridOptions"
></slickgrid-vue>
</template>You like Slickgrid-Vue? Be sure to upvote ⭐ the project, and perhaps support me with caffeine ☕ or sponsor me on GitHub. Any contributions are also very welcome. Thanks
Check out the Releases section for all latest News & Releases.
Tested with Cypress (E2E Tests)
Slickgrid-Universal has 100% Unit Test Coverage and all Slickgrid-Vue Examples are tested with Cypress for E2E testing and they are running on every new PR.