Arsalan Khattak
6 May 2024

Using Bryntum Grid as a Salesforce Lightning web component

Salesforce Lightning web components (LWC) are custom HTML elements built using HTML, CSS, and JavaScript. They use core Web Components standards and […]

Salesforce Lightning web components (LWC) are custom HTML elements built using HTML, CSS, and JavaScript. They use core Web Components standards and allow for tailor-made Salesforce UIs.

Although Salesforce has its own data table Lightning web component, if you want a highly customizable table in your Salesforce UI, Bryntum Grid is an excellent choice.

In this tutorial, we’ll show you how to:

Prerequisites

Visual Studio Code (VS Code) is the recommended IDE for Salesforce development. Install the VS Code Salesforce Extension Pack. Please be aware that the extension pack relies on the presence of Java on your system. For guidance on configuring Java JDK with VS Code, you can find more information here.

If you don’t have a Salesforce account or if you want a Salesforce Platform playground, sign up for the Salesforce Developer Edition. It’s a free, full-featured copy of the Salesforce Platform.

To follow along with this tutorial, you’ll need the Salesforce CLI and a Salesforce scratch organization, both of which are part of the Salesforce Developer Experience (DX).

You’ll use the Salesforce CLI to create the Bryntum Grid Lightning web component and deploy it to your Salesforce organization. Install the CLI from here.

To create a Salesforce scratch organization for development and testing, log in to your Salesforce developer environment and enable Dev Hub features in your org. A scratch org is a disposable deployment of Salesforce code and metadata. Note that you should not use data containing personal information in a scratch org.

Create a Salesforce DX project

Follow these steps to create a boilerplate project:

This creates many folders and files for developing with Salesforce, such as .sfdx, config, and force-app.

Authorize Dev Hub

Open the VS Code Command Palette, and type and select SFDX: Authorize a Dev Hub. Use the default alias. The Salesforce login will open in a new browser window. Log in using your Salesforce Developer Edition account. Click the “Allow” button when prompted to allow the Salesforce CLI access to your org. The Salesforce CLI remembers your credentials once you’ve authenticated your Dev Hub in the browser.

Create a scratch org

In the VS Code command palette, type and select the following:

SFDX: Create a Default Scratch Org

Create the static resources for the Bryntum Grid Lightning web component

Before we create the Bryntum Grid Lightning web component, let’s get the static resources we need for it. The resources required for the Bryntum Grid are:

These static resources are included in the distribution folder of the free trial version of Bryntum Grid, which you can download here. If you have already bought the licensed version of Bryntum Grid, you can log in here to download the grid.

Let’s upload the static resources to your Salesforce org for your Bryntum Grid Lightning web component to access.

First, clone the Bryntum salesforce showcase project. Copy the bryntum-salesforce-showcase/force-app/main/default/staticresources/bryntum_grid.resource-meta.xml file to the /force-app/main/default/staticresources folder in your Salesforce DX project.

In this /force-app/main/default/staticresources folder, create a folder called bryntum_grid.

Copy the following files and folders from the /build folder in the Bryntum Grid distribution folder you downloaded earlier:

Now add the copied files to the /force-app/main/default/staticresources/bryntum_grid folder in your Salesforce DX project.

Push the static resources to your scratch org by typing and selecting the following in the VS Code command palette:

SFDX: Push Source to Default Org

Create a Bryntum Grid Lightning web component

Open the VS Code Command Palette, and type and select SFDX: Create Lightning Web Component. Enter grid as the name of the new component. Press Enter to accept the default directory, /force-app/main/default/lwc. This creates a grid folder in the /force-app/main/default/lwc folder.

The grid folder contains the HTML and JavaScript files of the Lightning web component. Replace the files in the grid folder with the files from the bryntum-salesforce-showcase/force-app/main/default/lwc/grid_component folder.

Among the files you have just copied to the grid folder is an XML configuration file named grid_component.js-meta.xml that defines the metadata for the component. Replace the code in the grid_component.js-meta.xml with the following:

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>57.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>Bryntum Grid</masterLabel>
    <description>Bryntum Grid sample</description>
    <targets>
      <target>lightning__AppPage</target>
    </targets>
</LightningComponentBundle>

Here we expose the web component so that we can use it in the Lightning App Builder in the Salesforce org later in the tutorial. We also set targets to specify where our Lightning web component is to be added, in this case, to a Lightning App Page.

The grid_component.html file uses a LWC HTML template to render components efficiently using a virtual DOM. In most cases, it’s best to let the Lightning web component manipulate the DOM instead of using JavaScript. For our Bryntum Grid Lightning web component, however, lwc: is set to dom="manual" because the JavaScript code in the grid_component.js file manipulates the DOM in the appendTo property of the createGrid method. This adds the grid component to the <div> with a class of “container”.

The LightningElement class is the base class for Lightning web components. We extend the LightningElement class to create the Grid_component class that creates the Bryntum Grid.

We use the loadScript and loadStyle methods of the platformResourceLoader module to import the third-party Bryntum Grid JavaScript and CSS files. We import the Bryntum Grid static resources that we pushed to our scratch org using the @salesforce/resourceUrl scoped module.

We call the renderedCallback() method after every render of the component. Once the Bryntum Grid JavaScript and CSS static resources are loaded, the createGrid method is called to create a Bryntum Grid instance. You can set the configuration of your Bryntum Grid Lightning web component here.

Then the rowReorder and search features are added and the data store and columns are populated using the example data from the data.js file.

Now you can rename grid_component.css to grid.css, grid_component.html to grid.html, grid_component.js to grid.js, and grid_component.js-meta.xml to grid.js-meta.xml. In the grid.js file, rename the Grid_component class to Grid.

Right-click on the /force-app/main/default/lwc/grid folder and select SFDX: Deploy Source to Org.

Add the Bryntum Grid component to a Salesforce Lightning App

Open the VS Code Command Palette, and type and select SFDX: Open Default Org to open your Salesforce scratch org in a browser window. In the “Quick Find” input at the top left of the page in the navigation column, search for “Lightning App Builder” and click on it.

Follow these steps to create a Lightning Page with your Bryntum Grid Lightning web component:

Now click the back button in the top left corner of the page. Open the App Launcher by clicking the nine-dot button at the top left of the page and search for “Bryntum Grid”. You should see the simple grid demo running in the Lightning Page:

Display leads data from Salesforce in the Bryntum Grid Lightning web component

We’ll add leads data from Salesforce as an example of how you can add Salesforce data to a Bryntum Grid Lightning web component. First, we’ll import leads data into Salesforce from a CSV file.

Create custom Salesforce leads fields

Copy and paste the following data into an example-leads.csv file:

Name,Company,Email,Status,Rating,Progress
Phyllis Cotton,Abbott Insurance,pcotton@abbottins.net,Open - Not Contacted,Hot,10%
Jeff Glimpse,Jackson Controls,jeffg@jackson.com,Open - Not Contacted,Warm,5%
Mike Braund,Metropolitan Health Services,likeb@metro.com,Open - Not Contacted,Cold,100%
Patricia Feager,International Shipping Co.,patricia_feager@is.com,Open - Not Contacted,Cold,44%
Brenda Mcclure,Cadinal Inc.,brenda@cardinal.net,Open - Not Contacted,Warm,33%
Violet Maccleod,Emerson Transport,violetm@emersontransport.com,Open - Not Contacted,Hot,10%
Kathy Snyder,TNR Corp.,ksynder@tnr.net,Working - Contacted,Warm,0%
Tom James,Delphi Chemicals,tom.james@delphi.chemicals.com,Working - Contacted,Cold,11%
Shelly Brownell,Western Telecommunications Corp.,shellyb@westerntelecom.com,Working - Contacted,Hot,90%
Norm May,Greenwich Media,norm_may@greenwich.net,Working - Contacted,Hot,60%
David Monaco,Blues Entertainment Corp.,david@blues.com,Working - Contacted,Warm,20%
Kristen Akin,Aethna Home Products,kakin@athenahome.com,Working - Contacted,Cold,74%
Sandra Eberhard,Highland Manufacturing Ltd.,sandra_e@highland.net,Working - Contacted,Hot,50%
Betty Bair,American Banking Corp.,bblair@abankingco.com,Working - Contacted,Cold,79%

There are six headings in this CSV file: Name, Company, Email, Status, Rating, and Progress. Progress is a custom Salesforce field. Create this field for the leads in your Salesforce scratch org by following these steps:

Import leads data

Click the App Launcher icon at the top left of the page. Find and select “Leads”. Click the “Import” button at the top right of the page. Then follow these steps:

Now return to the “Leads” tab. Click on the button with the gear icon to “List View Controls”. Select “New”. Create a new list view called “View All”. You’ll be able to see the imported example leads in this new list view:

Now let’s change the table columns to match our example leads data. Click on the “List View Controls” button, then select “Select Fields to Display”. Remove the “State/Province” field from the visible fields column and add the “Rating” and “Progress” fields to the visible fields column:

Add Salesforce leads data to the Bryntum Grid Lightning web component

We’ll now add the leads data to your Bryntum Grid.

When working with Salesforce data, you can use the Lightning Data Service to load, create, edit, or delete a Salesforce record. For more complex data operations such as making a Salesforce Object Query Language (SOQL) query to select certain records, you can use Apex to write server-side controller classes.

Let’s create an Apex class to get our example leads data.

public with sharing class LeadController {
    @AuraEnabled(cacheable=true)
    public static List<Lead> getLeads() {
        return [
            SELECT Name, Company, State, Email, Status, Rating,  Progress__c
            FROM Lead
            WITH SECURITY_ENFORCED
            ORDER BY Status
        ];
    }
}

The AuraEnabled annotation enables Lightning web components to use Apex methods and properties. We set cacheable=true so that the results are cached to improve runtime performance. The getLeads Apex method performs a read operation to get the leads data. We use the Salesforce naming convention __c to indicate a custom field.

Now right-click on the classes folder and select SFDX: Deploy Source to Org.

We’ll create a grid wrapper Lightning web component to get the leads data. We’ll compose this component with our grid web component. The wrapper web component will pass the leads data to the grid as a property.

Right-click on the lwc folder in the VS Code Explorer pane and select SFDX: Create Lightning Web Component. Name the component gridWrapper.

Replace the contents of the gridWrapper.js file with the following lines of code:

import { LightningElement, wire } from 'lwc';
import getLeads from '@salesforce/apex/LeadController.getLeads';
export default class Grid_wrapper extends LightningElement {  
    @wire(getLeads)
    leads;
}

We import the getLeads method from the LeadController class that we created. The Salesforce wire service provisions data to the component. We use @wire with the getLeads function to get the leads data, which is stored in the leads property.

Replace the contents of the gridWrapper.html file with the following:

<template>
    <lightning-card>
        <template if:true={leads.data}>
            <c-grid leadsdata={leads.data}>
            </c-grid>   
        </template>
    </lightning-card>
</template>

If there is leads data, we render our grid component. Lightning web components are all part of a namespace that is separated from the folder name by a hyphen. The default namespace is c.

Now add the following line of code to the Grid class of the /force-app/main/default/lwc/grid/grid.js file, above the renderedCallback method:

    @api leadsdata;

Import the api decorator from lwc at the top of the /force-app/main/default/lwc/grid/grid.js file:

import { LightningElement, api } from 'lwc';

The leadsdata property is passed into the grid component from the gridWrapper component. To make leadsdata accessible, we annotate it with the @api decorator, which publicly exposes the property.

In the createGrid function, locate store, and set the data property to the leads data:

    data: this.leadsdata

Set the columns property to the following:

 columns: [
   { field: 'Name', width: 190, text: "Name" },
   { field: 'Company', width: 190, text: "Company" },
   { field: 'Email', width: 190, text: "Email" },
   { field: 'Status', width: 190, text: "Status" },
   { field: 'Rating', width: 190, text: "Rating" },
   { field: 'Progress__c', width: 190, text: "Progress" },
]

Remove the following lines of code:

fields : [
    { name : 'start', type : 'date' }
],

Replace the code in the gridWrapper.js-meta.xml file with the following lines of code:

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>57.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>Bryntum Grid Wrapper</masterLabel>
    <description>Bryntum Grid Wrapper sample</description>
    <targets>
      <target>lightning__AppPage</target>
    </targets>
</LightningComponentBundle>

Now right-click on the grid folder and select SFDX: Deploy Source to Org. Do the same for the gridWrapper Lightning web component.

Open your scratch org and create a Lightning Page with your gridWrapper Lightning web component. You should see a Bryntum Grid that looks like this:

Customize the cell rendering of the Bryntum Grid Lightning web component

Now we can add custom rendering to rows in the “Status”, “Rating”, and “Progress” columns to improve the table data visualization.

In the /force-app/main/default/lwc/grid/grid.js file, we’ll change the columns property of the Bryntum Grid Lightning web component in the createGrid method.

Replace the Status object of the columns property with the following object:

{ field: 'Status', width: 190, text: "Status", type: "template", editor: false,
    template: (data) => {
        const color = data.value === 'Working - Contacted' ? 'green' : 'red';
        const value = data.value === 'Working - Contacted' ? 'Working - Contacted' : 'Open - Not Contacted';
        return `<div style="color: ${color}">${value}</div>`;
    }
},

The “Status” column uses a template field to render a custom string in the cells. If a lead has been contacted, the text will be green. If not, the text will be red.

Now replace the Rating object with the following object:

{
	field: 'Rating',
	width: 190,
	text: 'Rating',
	type: 'rating',
	cellCls: 'satisfaction',
	max: 3,
},

We set type to a rating column, which displays a star rating. We need to convert the rating data string to numbers. At the top of the createGrid function, add the following variable:

const dataMod = this.leadsdata.map((item) => {
    return {
        ...item,
        Rating: item.Rating === 'Cold' ? 1 : item.Rating === 'Warm' ? 2 : 3,
    }
});

We modify the leads data by converting the Rating values to numbers. If the rating is “cold”, we set the value to one. If the rating is “warm”, we set the value to two. If the rating is “hot”, we set the value to three.

In the createGrid function, set the data property of the Bryntum Grid to this modified data array:

data: dataMod

In the Bryntum Grid columns, replace the Progress object with the following object:

{ field: 'Progress__c',  width: 190, text: 'Progress', type: 'percent' },

We make the type of our custom “Progress” field percent to display column values as progress bars.

Right-click on the grid folder and select SFDX: Deploy Source to Org and then create a Lightning Page with the Bryntum Grid Wrapper Lightning web component. You should see a Lightning Page that looks like the following:

Display Salesforce and external data in the Bryntum Grid Lightning web component

Suppose we have the LinkedIn URL for each of the leads in an external data source and we’d like to add this information to the grid in an extra column.

First, we can add the external data to the data.js file in the grid folder. Add the following external data variable to the data.js file:

export const externalData = [
    { linkedInUrl: 'https://ca.linkedin.com/in/linkedinyourname1'},
    { linkedInUrl: 'https://ca.linkedin.com/in/linkedinyourname2'},
    { linkedInUrl: 'https://ca.linkedin.com/in/linkedinyourname3'},
    { linkedInUrl: 'https://ca.linkedin.com/in/linkedinyourname4'},
    { linkedInUrl: 'https://ca.linkedin.com/in/linkedinyourname5'},
    { linkedInUrl: 'https://ca.linkedin.com/in/linkedinyourname6'},
    { linkedInUrl: 'https://us.linkedin.com/in/linkedinyourname7'},
    { linkedInUrl: 'https://us.linkedin.com/in/linkedinyourname8'},
    { linkedInUrl: 'https://us.linkedin.com/in/linkedinyourname9'},
    { linkedInUrl: 'https://us.linkedin.com/in/linkedinyourname10'},
    { linkedInUrl: 'https://us.linkedin.com/in/linkedinyourname11'},
    { linkedInUrl: 'https://us.linkedin.com/in/linkedinyourname12'},
    { linkedInUrl: 'https://us.linkedin.com/in/linkedinyourname13'},
    { linkedInUrl: 'https://us.linkedin.com/in/linkedinyourname14'},
];

In the /force-app/main/default/lwc/grid/grid.js file, modify the dataMod variable as shown below:

const dataMod = this.leadsdata.map((item, i) => {
  return {
    ...item,
    LinkedInUrl: externalData[i].linkedInUrl,
    Rating: item.Rating === 'Cold' ? 1 : item.Rating === 'Warm' ? 2 : 3,
  }
});

Import externalData at the top of the /force-app/main/default/lwc/grid/grid.js file:

import { columns, data, externalData } from './data';

Now we add an extra LinkedInUrl property to the modified data. In the createGrid function, add the following object to the columns property:

{ field: 'LinkedInUrl', width: 190, text: "LinkedIn URL" },

Right-click on the grid folder and select SFDX: Deploy Source to Org and then create a Lightning Page with the Bryntum Grid Wrapper Lightning web component. You should see a Lightning Page with a Bryntum Grid featuring a “LINKEDIN URL” column:

Next steps

Now that you’ve integrated a Bryntum Grid with Salesforce, take a look at our list of Bryntum Grid Features to see all the features you can add to your Bryntum Grid.

Note that Salesforce Lightning web components use Lightning Locker, which is a security architecture for Lightning web components. Lightning Locker only allows access to supported web APIs. Bryntum Grid relies on a number of native web APIs, some of which are modified or completely blocked by Lightning Locker. We have tested and verified most of the features we support, including:

If you find a broken feature, please report it on our forum or GitHub and we will investigate it.

Arsalan Khattak

Bryntum Grid