Slickgrid-vue NPM

Slickgrid-Vue

!WARNING Please note that Slickgrid-Vue is still in active development and usage might change depending on feedback provided by external users like you. However, I don't expect much changes since all examples are working as expected. Give it a try and star ⭐ the project if you like it, thanks!

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>

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

Requirements

Vue >=3.4

Stackblitz

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

Visit the Docs - Quick Start and/or clone the Slickgrid-Vue-Demos repository for a 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 have a Dark Theme equivalent and even though Bootstrap is often used for live demos, it does work well with any other UI framework like Bulma, Material, Quasar...

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, 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 (40+ 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 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 run anytime a new PR is created.

Like it? ⭐ it

You like Slickgrid-Vue? Be sure to upvote ⭐, and perhaps support me with caffeine ☕ or sponsor me on GitHub and feel free to contribute at any time. Thanks