Build SharePoint SharePoint Framework solution with Essential JS 2

Hello All, I'm very excited to say that I build Syncfusion JavaScript components that can be used in the SharePoint Framework to build a quick and reusable responsive SharePoint solution which makes it a powerful combo. 

I have built and attached a simple PnP and Syncfusion Grid control-based web part you can download and unzip the project and start building great SharePoint Framework solutions for great business.

Prerequisites : 

• Node.js
• Visual Studio Code
• Internet connection to download Node js, SpFx, and Syncfusion components.  

How to run the project

• Download and unzip attached the project to a location on your local disk.
• Open the project in the Visual Studio Code.
• Execute the following commands,
  npm install
  gulp serve
• Run the project.

Reference links:

https://ej2.syncfusion.com/home/  

https://ej2.syncfusion.com/javascript/demos/#/material/grid/grid-overview.html

Download Project from here: https://github.com/SyncfusionExamples/ej2-and-sharepoint 

Replace the Code file with the below code. 

import { Version } from '@microsoft/sp-core-library';

import {

  IPropertyPaneConfiguration,

  PropertyPaneTextField

} from '@microsoft/sp-property-pane';

import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';

import { escape } from '@microsoft/sp-lodash-subset';

import styles from './SyncfusionWpWebPart.module.scss';

import * as strings from 'SyncfusionWpWebPartStrings';

import { sp } from "@pnp/sp/presets/all";

import { Grid, Group, Filter, Page, Sort } from '@syncfusion/ej2-grids';

import "@pnp/sp/webs";

import "@pnp/sp/lists";

import "@pnp/sp/items";

import { IItemAddResult } from "@pnp/sp/items";

import { Web } from "@pnp/sp/webs";

// add Syncfusion Essential JS 2 style reference from node_modules

require('../../../node_modules/@syncfusion/ej2/fabric.css');

// import Essential JS 2 Grid

export interface ISyncfusionWpWebPartProps {

  description: string;

  listItems: Object;

  addText: string;

  updateText: IListItem[];

}//

export interface IListItem {

  id: number;

  title: string;

}

export default class SyncfusionWpWebPart extends BaseClientSideWebPart<ISyncfusionWpWebPartProps> {

  protected onInit(): Promise<void> {

    return super.onInit().then(_ => {

      sp.setup({

        spfxContext: this.context

      });

    });

  }

  private web = Web("https://m365x067565.sharepoint.com/sites/KPandey-Public/");

  public async render() {

    this.domElement.innerHTML = `

      <div class="${styles.syncfusionWp}">

        <div class="${styles.container}">

          <div class="${styles.row}">

            <div class="${styles.column}">

              <p class="${styles.description}">${escape(this.properties.description)}</p>

                 <!--HTML DIV element, which is going to render as Essential JS 2 Grid-->

              <div id="Grid"> </div>

            </div>

          </div>

        </div>

      </div>`;

    const data: Object[] = await sp.web.lists.getByTitle("kp").items.select("CustomerID", "OrderID", "City", "Title", "Description").top(10).orderBy("OrderID", true).get();

    Grid.Inject(Group, Filter, Page, Sort);

    let grid: Grid = new Grid({

      dataSource: data,

      columns: [

        { field: 'OrderID', headerText: 'Order ID', textAlign: 'Left', width: 100, type: 'number' },

        { field: 'CustomerID', headerText: 'Customer ID', textAlign: 'Left', width: 100, type: 'number' },

        { field: 'City', headerText: 'City', textAlign: 'Left', width: 120, type: 'string' },

        { field: 'Title', width: 100, headerText: 'Title', textAlign: 'Left', type: 'string' },

        { field: 'Description', headerText: 'Description', textAlign: 'Left', width: 140, type: 'string' },

      ],

      height: 300,

      width: 622,

      allowGrouping: true,

      allowPaging: true,

      allowSorting: true,

      allowFiltering: true

    });

    grid.appendTo('#Grid');

  }

  public setState(arg0: { updateText: IListItem[]; }) {

    throw new Error('Method not implemented.');

  }

  protected get dataVersion(): Version {

    return Version.parse('1.0');

  }

  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {

    return {

      pages: [

        {

          header: {

            description: strings.PropertyPaneDescription

          },

          groups: [

            {

              groupName: strings.BasicGroupName,

              groupFields: [

                PropertyPaneTextField('Description', {

                  label: strings.DescriptionFieldLabel

                })

              ]

            }

          ]

        }

      ]

    };

  }

}

You see the web part like this on page :

Need assistance please reach out to this email: kamal_pandey@outlook.com
Good luck!