Slickgrid-Vue

10.5.0 · active · verified Sun Apr 19

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.

Common errors

Warnings

Install

Imports

Quickstart

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.

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

interface User {
  id: number; // SlickGrid typically expects an 'id' field
  firstName: string;
  lastName: string;
  age: number;
}

// It could also be `Column<User>[]`
const columns: Ref<Column<User>[]> = ref([
  { id: 'firstName', name: 'First Name', field: 'firstName', sortable: true, minWidth: 100 },
  { id: 'lastName', name: 'Last Name', field: 'lastName', sortable: true, minWidth: 100 },
  { id: 'age', name: 'Age', field: 'age', type: 'number', sortable: true, minWidth: 80 },
]);

const options = ref<GridOption>({
  enableAutoResize: true,
  enableColumnPicker: true,
  enableGridMenu: true,
  enablePagination: true,
  pagination: { pageSizes: [10, 25, 50], pageSize: 10 },
  enableFiltering: true,
  enableSorting: true,
  gridId: 'my-vue-grid',
  datasetIdPropertyName: 'id' // Essential for data keying
});

const dataset = ref<User[]>([
  { id: 1, firstName: 'John', lastName: 'Doe', age: 20 },
  { id: 2, firstName: 'Jane', lastName: 'Smith', age: 21 },
  { id: 3, firstName: 'Peter', lastName: 'Jones', age: 35 },
  { id: 4, firstName: 'Alice', lastName: 'Williams', age: 28 },
  { id: 5, firstName: 'Robert', lastName: 'Brown', age: 42 },
]);

// Add a few more rows for better demonstration of pagination/scrolling
for (let i = 6; i <= 25; i++) {
  dataset.value.push({
    id: i,
    firstName: `First${i}`,
    lastName: `Last${i}`,
    age: 20 + (i % 30)
  });
}
</script>

<template>
  <div class="my-grid-container" style="height: 500px; width: 100%;">
    <slickgrid-vue
      grid-id="grid1"
      v-model:columns="columns"
      v-model:dataset="dataset"
      v-model:grid-options="options"
    ></slickgrid-vue>
  </div>
</template>

<style>
@import 'slickgrid-vue/dist/styles/css/slickgrid-theme-default.css';
.my-grid-container {
  border: 1px solid #ccc;
}
</style>

view raw JSON →