Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
SlickgridVue
✓ import { SlickgridVue } from 'slickgrid-vue';
✗ const SlickgridVue = require('slickgrid-vue');
Slickgrid-Vue is an ES Module-first library. Use named `import` for the component. CommonJS `require` is not supported for modern Vue 3 components.
Column, GridOption
✓ import { type Column, type GridOption } from 'slickgrid-vue';
✗ import { Column, GridOption } from 'slickgrid-vue';
These are TypeScript interfaces/types. Best practice in modern TypeScript/ESM projects is to use `import type` to clearly distinguish type-only imports, preventing runtime bundling of non-existent values.
Slickgrid-Vue Styles
✓ import 'slickgrid-vue/dist/styles/css/slickgrid-theme-default.css';
Import the default CSS theme or any other provided themes (e.g., `slickgrid-theme-bootstrap.css`) in your main application file or component. Customization is also possible with SASS.
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>
Errors
Common errors & fixes
TypeError: Cannot read properties of undefined (reading 'registerPlugin')
This error typically means a required SlickGrid plugin or an extension from Slickgrid-Universal was not properly imported, initialized, or provided in the grid options.
fixVerify that all necessary plugins and extensions (e.g., `RowSelectionExtension`, `CellEditingExtension`) are imported and correctly included in `gridOptions.externalResources` or `gridOptions.plugins` as per the documentation.
Failed to resolve component: slickgrid-vue
The `SlickgridVue` component was not correctly imported or registered within the Vue application or the parent component.
fixEnsure `import { SlickgridVue } from 'slickgrid-vue';` is present in your component's script section (especially in `<script setup>`) and that Vue can resolve it. If using Options API, ensure it's listed in the `components` option. SyntaxError: Named export 'SlickgridVue' not found. The requested module 'slickgrid-vue' is a CommonJS module, which may not support all module.exports as named exports.
Attempting to use `require()` or incorrect named `import` syntax for a library primarily distributed as ES Modules in a modern Vue 3/TypeScript environment.
fixUse ES Module `import` syntax: `import { SlickgridVue } from 'slickgrid-vue';`. Ensure your build tool (e.g., Vite) is configured for ESM. If encountering issues with `import type` for interfaces, ensure your TypeScript configuration and build process support it. Property 'id' is missing in type 'YourDataType' but required in type 'Column'.
A mismatch exists between the structure of your dataset objects and the expected type definitions for `Column` or other Slickgrid-Vue interfaces, often concerning the primary key `id` or `field` properties.
fixEnsure your dataset objects (`User` in the quickstart) contain a unique `id` property (or specify `datasetIdPropertyName` in `GridOption` if using another key). Verify that `Column` definitions accurately reflect your data's fields and types, and use `import type` for clarity with interfaces.
Cannot read properties of undefined (reading 'alwaysShowVerticalScroll')
This can occur when SlickGrid has difficulty calculating column widths, especially with CSS styles like `overflow-y: scroll` on the grid container, causing visual misalignments or rendering issues.
fixIf experiencing column width problems or scrollbar collisions, try setting `gridOptions.alwaysShowVerticalScroll = true` to force the scrollbar to always be present, which can help with layout calculations.
Audit
Dependencies
vuerequiredRequired peer dependency for the Vue 3 framework.
@slickgrid-universal/excel-exportoptionalOptional package for enabling Excel export functionality.
@slickgrid-universal/graphqloptionalOptional package for GraphQL backend service integration.
@slickgrid-universal/odataoptionalOptional package for OData backend service integration.
@slickgrid-universal/sql-backend-serviceoptionalOptional package for SQL backend service integration (new in v10.4.0).
@slickgrid-universal/pdf-exportoptionalOptional package for PDF export functionality (introduced in v9.13.0).
jspdf-autotableoptionalOptional dependency for enhanced PDF exports via `@slickgrid-universal/pdf-export` (mentioned in v10.1.0).
@slickgrid-universal/commonrequiredContains core features, extensions, and interfaces for Slickgrid-Universal. While often implicitly installed, it's the foundation for many features.