slickgrid

To help you get started, we've collected the most common ways that slickgrid is being used within popular public projects.

DonJayamanne / pythonVSCode / src / datascience-ui / data-explorer / reactSlickGrid.tsx View on Github

args.node.tabIndex = 0;
            });

            // Unbind the slickgrid key handler from the canvas code
            // We want to keep EnableCellNavigation on so that we can use the slickgrid
            // public navigations functions, but we don't want the slickgrid keyhander
            // to eat tab keys and prevent us from tabbing to input boxes or column headers
            const canvasElement = grid.getCanvasNode();
            slickgridJQ(canvasElement).off('keydown');

            if (this.containerRef && this.containerRef.current) {
                // slickgrid creates empty focus sink div elements that capture tab input we don't want that
                // so unhook their key handlers and remove their tabindex
                const firstFocus = slickgridJQ('.react-grid-container').children().first();
                const lastFocus = slickgridJQ('.react-grid-container').children().last();
                slickgridJQ(firstFocus).off('keydown').removeAttr('tabindex');
                slickgridJQ(lastFocus).off('keydown').removeAttr('tabindex');

                // Set our key handling on the actual grid viewport
                slickgridJQ('.react-grid').on('keydown', this.slickgridHandleKeyDown).attr('role', 'grid').on('focusin', this.slickgridFocus);
                slickgridJQ('.grid-canvas').on('keydown', this.slickgridHandleKeyDown);
            }

            // Setup the sorting
            grid.onSort.subscribe(this.sort);

            // Init to force the actual render.
            grid.init();

            // Set the initial sort column to our index column
            const indexColumn = columns.find(c => c.field === this.props.idProperty);
            if (indexColumn && indexColumn.id) {

View more ways to use slickgrid

This is the 6pac SlickGrid repo

Check out the NEW SlickGrid Website! https://slickgrid.net/

This is the acknowledged and most active fork of SlickGrid.

It aims to be a viable alternative master repo, building on the legacy of the mleibman/SlickGrid master branch, keeping dependencies up to date and applying, safe core patches and enhancements to keep the project up to date.

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 Frozen Columns/Rows (aka 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)
• the project now has only 1 required small dependency which is SortableJS

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 also the SASS imports as well.

Stackblitz

You can also try out the Vite demo (mentioned just above) live via Stackblitz

> Note: the Stackblitz demo only includes 2 examples, however there are a lot more example 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 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 from Stackblitz which is mentioned just above

Installation

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

# Alpine style from CDN


# standalone scripts (IIFE) from CDN




---
# or install from NPM
npm install slickgrid

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 and that is to avoid committing changes that might break the library. We currently have tests for over 35+ examples with about 400 tests.

We welcome any new contributions and if you wish to add 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 E2E browser tests.

Migrations

CSP Compliance

The library is now, at least for the most 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 this by using the sanitizer method in combo with DOMPurify to return TrustedHTML and for more info, you can take a look at the CSP Compliance Wiki.

Quick Little Fun Survey ✨

We are conducting a small little poll 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?