Installation Salesforce (LWC)

Installation Instructions for Salesforce

This document shows how to get this Slickgrid bundle working with Salesforce LWC (Lighning Web Component).

Step 1. install dependencies (static resources) only once in your org

The first thing you'll need to do is to add 3 different dependencies as static resources, you can see below the name of each static resources we use in our Salesforce org. The resource named Sf_SlickGrid comes from the zip file that gets created every time a new dist build is updated, the zip file can be downloaded here.

Here are the 3 static resource files

Click on the zip link and then the Download button on the top right to download it locally, then upload it to your org.

Static Resource Name	Zip	Notes
jQuery3	zip	jQuery version 3.4.1
jQueryUI	zip	jQuery UI version 1.12.x
Sf_SlickGrid	zip	filename is slickgrid-vanilla-bundle.zip but we named our static resource Sf_SlickGrid

Step 2. load Slickgrid

Create all the Static Resources that are required by Slickgrid as shown below (they could be different names in your org). NOTE: We now use the simpler and Easier Implementation

View

<template>
    <!-- show a spinner -->
    <div if:false={isLoaded} class="slds-is-relative">
          <lightning-spinner alternative-text="Loading...">
          </lightning-spinner>
    </div>

    <!-- slickGrid container-->
    <div class="grid-container slds-p-horizontal">
          <div class="user-grid"></div>
    </div>
</template>

In the same file, load all external files with connectedCallback and get your data through a @wire method. Technically the @wire method will be processed before the connectedCallback and so you can assume that when calling the initializeGrid method we will already have the dataset ready.

Notice below that in the gridOptions, there is a flag useSalesforceDefaultGridOptions that was added specifically for Salesforce project, it will internally use these grid options for Salesforce (these options are merged with the following default grid options).

Component

import { LightningElement, api, wire } from 'lwc';
import { loadStyle, loadScript } from 'lightning/platformResourceLoader';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

// Static Resources (jQuery, jQueryUI, Slickgrid, and Icon Font)
import jQuery_bundle from '@salesforce/resourceUrl/jQuery3';
import jQueryUI_bundle from '@salesforce/resourceUrl/jQueryUI';
import sf_slickGrid_bundle from '@salesforce/resourceUrl/Sf_SlickGrid'; // the zip described at step 1.1

import getSomeData from '@salesforce/apex/SomeService.getSomeData';

export default class YourComponent extends LightningElement {
  slickGridInitialized = false;
  sgb;
  isLoaded = false;
  dataset = []; // load your data through an Apex Controller with @wire

  @api recordId;

  @wire(getSomeData, { recordId: '$recordId' })
  wiredGetSomeData({ error, data }) {
    if (data) {
        this.dataset = data || [];
        
        if (window.Slicker && window.Slicker.Utilities && this.sgb) {
            this.sgb.dataset = this.dataset;
        }
    } else if (error) {}
    this.isLoaded = true; // stop the spinner
  }

  async connectedCallback() {
    if (this.slickGridInitialized) {
        return;
    }

    try {
        this.slickGridInitialized = true;

        // load all CSS Styles
        await loadStyle(this, `${sf_slickGrid_bundle}/styles/css/slickgrid-theme-salesforce.css`);

        // load all JS files
        await loadScript(this, `${jQuery_bundle}/jquery.min.js`);
        await loadScript(this, `${jQueryUI_bundle}/jquery-ui.min.js`);
        await loadScript(this, `${sf_slickGrid_bundle}/slickgrid-vanilla-bundle.js`);

        // create the grid (column definitions, grid options & dataset)
        this.initializeGrid();        
    } catch (error) {
        this.dispatchEvent(new ShowToastEvent({ title: 'Error loading SlickGrid', message: error && error.message || '', variant: 'error', }));
    }
  }

  initializeGrid() {
    this.columnDefinitions = [
      { id: 'firstName', name: 'First Name', field: 'firstName' },
      { id: 'lastName', name: 'Last Name', field: 'lastName' },
      // ...
   ];

    this.gridOptions = { 
      useSalesforceDefaultGridOptions: true,  // enable this flag to use regular grid options used for SF project

      autoResize: {
        container: '.grid-container',
        minHeight: 250,
        rightPadding: 50,
        bottomPadding: 75,
      },

      // or use fixed size
      // gridHeight: 300,
      // gridWidth: 800,

      // datasetIdPropertyName: 'someOtherId', // default is "Id" (case sensitive)

      /** other options... */ 
    };

    // find your HTML slickGrid container & pass it to the Slicker.GridBundle instantiation
    const gridContainerElement = this.template.querySelector(`.user-grid`);
    this.sgb = new Slicker.GridBundle(gridContainerElement, this.columnDefinitions, this.gridOptions, this.dataset);
  }
}

Easier Implementation

NOTE: in our implementation, we moved all the common css/script loading into a slickGridHelper LWC component and we then use a much simpler import.

import jQuery_bundle from '@salesforce/resourceUrl/jQuery3';
import jQueryUI_bundle from '@salesforce/resourceUrl/jQueryUI';
import sf_slickGrid_bundle from '@salesforce/resourceUrl/Sf_SlickGrid';
import { loadStyle, loadScript } from 'lightning/platformResourceLoader';

export const Aggregators = {};
export const BindingService = {};
export const Editors = {};
export const Enums = {};
export const Filters = {};
export const Formatters = {};
export const GroupTotalFormatters = {};
export const SortComparers = {};
export const Utilities = {};
export const GridBundle = {};

/** Load all necessary SlickGrid resources (css/scripts) */
export async function loadResources(component) {
    await loadStyle(component, `${sf_slickGrid_bundle}/styles/css/slickgrid-theme-salesforce.css`);
    await loadScript(component, `${jQuery_bundle}/jquery.min.js`);
    await loadScript(component, `${jQueryUI_bundle}/jquery-ui.min.js`);
    await loadScript(component, `${sf_slickGrid_bundle}/slickgrid-vanilla-bundle.js`);
    Aggregators = Slicker.Aggregators;
    BindingService = Slicker.BindingService;
    Editors = Slicker.Editors;
    Enums = Slicker.Enums;
    Filters = Slicker.Filters;
    Formatters = Slicker.Formatters;
    GroupTotalFormatters = Slicker.GroupTotalFormatters;
    SortComparers = Slicker.SortComparers;
    Utilities = Slicker.Utilities;
    GridBundle = Slicker.GridBundle;
}

and then it becomes easier for us to simply call the following lines of code (and also this way is more aligned with all the other Wikis)

import { Editors, Filters, Formatters, GridBundle, loadResources } from 'c/slickGridHelper';

export default class SlickGridDemo extends LightningElement {
  isResourceLoaded = false;

  async connectedCallback() {
    if (this.isResourceLoaded) {
      return; // load only once
    }
    await loadResources(this);
    this.initializeGrid();
    this.isResourceLoaded = true;
  }
}