Getting Started with Syncfusion® React Components in SharePoint

14 Aug 20267 minutes to read

This article provides a step-by-step guide for setting up a SharePoint project and integrating the Syncfusion® React components.

The SharePoint Framework (SPFx) is a development model and framework provided by Microsoft for building custom solutions and extensions for SharePoint and Microsoft Teams. It is a modern, client-side framework that allows developers to create web parts, extensions, and customizations that can be deployed and used within SharePoint sites and Teams applications.

Prerequisites

Set up the SharePoint project

Create a new SPFx project using the following command:

Step 1: To initiate the creation of a new SharePoint project, use the following command:

yo @microsoft/sharepoint

Step 2: Specify the name of the project as my-project and the name of the Web part as App for this article. You will be prompted with a series of configuration questions as shown below:

Let's create a new Microsoft 365 solution.
? What is your solution name? my-project
? Which type of client-side component to create? Web part
Add a new web part to solution my-project.
? What is your web part name? App
? Which template would you like to use? React

Step 3: To trust the development certificate, run the following command:

heft trust-dev-cert

With these steps complete, your my-project SharePoint Framework solution is ready for Syncfusion® component integration.

Add Syncfusion® React packages

Syncfusion® React component packages are available at npmjs.com. To use Syncfusion® React components in the project, install the corresponding npm package.

This guide uses the React Grid component as an example. To install the React Grid component package, use the following command:

npm install @syncfusion/ej2-react-grids --save

Import Syncfusion® CSS styles

Themes for Syncfusion® React components can be applied using CSS or SASS files from the npm theme packages, CDN, CRG, or Theme Studio. For more information, see the themes documentation.

This example imports the tailwind3 theme CSS in ~/src/webparts/app/AppWebPart.ts:

import { SPComponentLoader } from '@microsoft/sp-loader';

...
...

protected onInit(): Promise<void>{
  // Load Syncfusion Tailwind 3 theme
  SPComponentLoader.loadCss('https://cdn.syncfusion.com/ej2/34.1.29/tailwind3.css');
    return this._getEnvironmentMessage().then(message => {
    this._environmentMessage = message;
  });
}

Add Syncfusion® React components

Follow these steps to add the React Grid component:

Step 1: In the App.tsx file inside the ~/src/webparts/app/components folder, declare the values for the dataSource property.

const data = [
  {
    OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, ShipCountry: 'France', Freight: 32.38 
  },
  {
    OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, ShipCountry: 'Germany', Freight: 11.61 
  },
  {
    OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, ShipCountry: 'Brazil', Freight: 65.83 
  }
];

Step 2: Define the Grid component with the dataSource property and column definitions.

import * as React from 'react';
import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';

export default class App extends React.Component<IAppProps, {}> {
  
  public render(): React.ReactElement<IAppProps> {
    return (
      <GridComponent dataSource={data}>
        <ColumnsDirective>
          <ColumnDirective field='OrderID' width='100' textAlign="Right" />
          <ColumnDirective field='CustomerID' width='100' />
          <ColumnDirective field='EmployeeID' width='100' textAlign="Right" />
          <ColumnDirective field='Freight' width='100' format="C2" textAlign="Right" />
          <ColumnDirective field='ShipCountry' width='100' />
        </ColumnsDirective>
      </GridComponent>
    );
  }
}

Here is the complete code for the above steps:

import * as React from 'react';
import { IAppProps } from './IAppProps';
import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';

export default class App extends React.Component<IAppProps, {}> {
  
  public render(): React.ReactElement<IAppProps> {
    const data = [
      {
        OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, ShipCountry: 'France', Freight: 32.38 
      },
      {
        OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, ShipCountry: 'Germany', Freight: 11.61 
      },
      {
        OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, ShipCountry: 'Brazil', Freight: 65.83 
      }
    ];

    return (
      <GridComponent dataSource={data}>
        <ColumnsDirective>
          <ColumnDirective field='OrderID' width='100' textAlign="Right" />
          <ColumnDirective field='CustomerID' width='100' />
          <ColumnDirective field='EmployeeID' width='100' textAlign="Right" />
          <ColumnDirective field='Freight' width='100' format="C2" textAlign="Right" />
          <ColumnDirective field='ShipCountry' width='100' />
        </ColumnsDirective>
      </GridComponent>
    );
  }
}

Set your tenant domain in the serve.json file located in the config folder.

{
  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/spfx-serve.schema.json",
  "port": 4321,
  "https": true,
  "initialPage": "https://{tenantDomain}/_layouts/workbench.aspx"
}

Run the project

To run the project, use the following command:

npm start

The output will appear as follows:

Grid Component