Slickgrid-Vue

[!WARNING] Please note that Slickgrid-Vue is still in active development and usage might change depending on the feedback provided by external users like you. However, I don't expect much changes, all examples seem to work as expected. Give it a try!

Documentation

📘 Documentation website powered by GitBook.

Installation

npm install slickgrid-vue

Basic Usage

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

const gridOptions = ref<GridOption>({ /*...*/ });
const columnDefinitions = ref<Column[]>([
  { id: 'username', name: 'Username', field: 'username'},
  { id: 'age', name: 'Age', field: 'age' }
]);
const dataset = ref([
  { id: 1, username: 'John', age: 20 },
  { id: 2, username: 'Jane', age: 21 }
]);
</script>

<slickgrid-vue
    v-model:options="gridOptions"
    v-model:columns="columnDefinitions"
    v-model:data="dataset"
    grid-id="grid1"
></slickgrid-vue>

Requirements

• Vue >=3.4

Stackblitz

You can even play with the Slickgrid-Vite-Demos Stackblitz live. It is recommended as a way provide a repro when opening a new bug/feature request.

Refer to the Docs - Quick Start and/or clone the Slickgrid-Vue-Demos repository. 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

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

Also note that all of these themes also have Dark Theme equivalent and even though Bootstrap if often used as the default, it also works well with any other UI framework like Bulma, Material, ...

Live Demo page

Slickgrid-Vue works with all Bootstrap versions, you can see a demo of each one below. It also works well with any other frameworks like Material or Bulma and there are also couple of 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 (40+ examples), we strongly suggest you to clone the Slickgrid-Vue Demos repository (instructions are provided in the demo repo). The repo provides multiple demos and they are updated every time a new version is out, so it is updated frequently and is also used as the GitHub live demo 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 as E2E tests and that is whenever a new PR is created.

Like it? ⭐ it

You like Slickgrid-Vue? Be sure to upvote ⭐, and perhaps support me with caffeine ☕ and feel free to contribute. 👷👷‍♀️