SlickGrid

This is the 6pac SlickGrid repo

This is the main 'base' SlickGrid repository. For specific frameworks (Angular, React and Vue) see Slickgrid-Universal which has official wrappers for all these frameworks and more.

This repo builds on the legacy of the mleibman/SlickGrid original project, which stopped being updated in 2014.

We extended the project from the original SlickGrid foundation while also including the following changes:

• added a few more Plugins: RowDetail, CellMenu, ContextMenu, GridMenu, CustomTooltip, GridState
• merged X-SlickGrid code into the project to bring permanent column/row pinning
• removed jQueryUI requirement in v3 (replaced it with SortableJS)
• removed jQuery requirement in v4
• modernized the project in v5 by migrating to TypeScript (we kept IIFE and added ES6/ESM build targets) and we also gave SlickGrid a fresh and more modern look via a new Alpine Theme (CSS/SASS)
• rewrite Pinning feature and add a new Sticky columns/rows in v6 and make it a zero dependencies project (the previous SortableJS requirement was replaced by a built-in native HTML5 drag & drop implementation for column reordering and draggable grouping)

Common Questions & Answers

• Do I need TypeScript to use version >=5.x?
  • Not at all, you can use regular JavaScript if you wish by using the dist/browser folder, ESM folder or from CDN. The Stackblitz and installation examples shown below are mostly written with JavaScript.
• Can I use it with "xyz" framework?
  • Sure we provide an ES6/ESM build which should work with most frameworks... but for more specific frameworks (Angular, React and Vue) you may want to take a look at Slickgrid-Universal which has official wrappers for all these frameworks and more.
• Do I still need jQuery?
  • Not anymore, it's totally optional since v4.0 (you can still use jQuery if you wish, but it's totally optional)

Documentation 📖

📘 Visit our new Documentation website to get started

Vite Demo

You can also see a ViteJS demo in the ./vite-demo folder (also available via the Stackblitz link below). This Vite demo was created mostly to test the project ESM build and the SASS imports as well.

Stackblitz

You can try out the live Vite demo (mentioned just above) via the Stackblitz button. You can also use it to provide bug or feature requests.

Note: the Stackblitz demo is only including a couple of examples, note however that there are a lot more examples available in the Examples Wiki page

Examples

Check out the Examples Wiki for a full list of examples demonstrating new features and use cases, such as dynamic grid creation and editors with third party controls.

Also take a look at the Wiki and Releases for documentation and recent news.

For a basic TypeScript example, take a look at the v5.0 Annoucement & Migration guide shown below and also the TypeScript Example Wiki.

Below is one of the available examples available in Stackblitz (which is mentioned just above)

Installation

There are multiple ways to use and install SlickGrid, you can use it as a standalone <script> (IIFE) or install it through NPM and then import or require SlickGrid (ESM import is preferred for tree shaking).

# Alpine style from CDN
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/styles/css/slick-alpine-theme.min.css">

# standalone scripts (IIFE) from CDN
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/browser/slick.core.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/browser/slick.interactions.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/browser/slick.grid.min.js"></script>
<script>
  const grid = new Slick.Grid("#myGrid", dataView, columns, options);
</script>
---
# or install from NPM as ESM
npm install slickgrid

<script type="module">
  import 'slickgrid/dist/styles/css/slick-alpine-theme.css';
  import { SlickGrid, SlickDataView } from 'slickgrid';
  const dataView = new SlickDataView();
  const grid = new SlickGrid("#myGrid", dataView, columns, options);
</script>

For more CDN links, like controls and plugins, just headover to jsDevlivr - SlickGrid for the full list and click on the "Files" tab (or use this jsdelivr CDN link "dist/browser").

Contributions

See Contributing Guide

E2E Tests with Cypress

A lot of our Examples now have Cypress E2E (end to end) tests in the browser. You can see here the complete list of Examples that now have E2E tests. The biggest advantage is that these tests are executed in the GitHub Actions Workflow (CI) for every Pull Request which makes sure the project is stable with every new commit. We currently have tests for +50 examples with a total of ~800 tests.

We welcome any new contributions and if you wish to add or run all the Cypress E2E tests, all you need to do is to clone the repo and run the following commands

npm install         # install all npm packages
npm run dev         # run a local development server on port 8080 in watch mode (or `npm run serve` without watch)
npm run cypress     # open Cypress UI tool

Once the Cypress UI is open, you can then click on "Run all Specs" to execute all automated E2E browser tests.

Migrations

SlickGrid	Migration Guide	Description
3.x	Announcing v3.0	dropping jQueryUI requirement and replaced it with SortableJS which is a lot more modern and touch friendly
4.x	Announcing v4.0	dropping jQuery requirement, SlickGrid is now using browser native code
5.x	Announcing v5.0	project modernization, we added ES6/ESM builds by migrating to TypeScript and also a new Alpine Theme
6.x	Announcing v6.0	Pinning rewrite, new Sticky feature and drop of SortableJS to be a zero dependencies project

CSP Compliance

The library is now, for the big part, CSP (Content Security Policy) compliant since v5.5.0, however there are some exceptions to be aware of; when using any html strings as template (for example with Custom Formatter returning an html string), you will not be fully compliant unless you return TrustedHTML. You can achieve it by using the sanitizer grid option callback in combo with DOMPurify to return TrustedHTML. For more info, please take a look at the CSP Compliance Wiki.

Quick Little Fun Survey ✨

We are conducting a small little poll just for fun, it is a single question survey about our latest releases. Thanks for taking the time to participate.

What do you think was the most exciting change(s) for you?