Slickgrid-Vue

Description

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

📘 Documentation website is powered by GitBook.

Installation

npm install slickgrid-vue

Basic Usage

<script setup lang="ts">
import { type Column, type GridOption, SlickgridVue } from 'slickgrid-vue';

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([
  { 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>

Requirements

• Vue >=3.4

Stackblitz

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.

Styling Themes

Multiple styling themes are available

• Default (UI agnostic)
• Bootstrap (see all Slickgrid-Vue live demos)
• Material (see Slickgrid-Universal)
• Salesforce (see Slickgrid-Universal)

Also note that all of these themes also include a Dark Theme equivalent and even though Bootstrap is often used in the live demos, it also works well with any other UI framework like Bulma, Material, Quasar...

Live Demo page

Slickgrid-Vue works with Bootstrap or any other UI frameworks like Material, Bulma, Quasar... and there are also extra styling themes based on Material & Salesforce which are also available. You can also use different SVG icons, you may want to look at the Docs - SVG Icons

• Bootstrap 5 demo / examples repo

Working Demos

For a complete set of working demos (45+ examples), we strongly suggest you to clone the Slickgrid-Vue Demos repository (instructions are provided in it). The repo comes with multiple examples and are updated frequently (basically every time a new version is out) and it is also used as the GitHub [live demo](https://github.com/ghiscoding/slickgrid-vue-demos page.

License

MIT License

Latest News & Releases

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.

Like it? ⭐ it

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