Getting Started with React Data Grid in SharePoint Framework

24 Jul 20266 minutes to read

The React Data Grid component can be integrated into a SharePoint Framework (SPFx) project using the techniques outlined in this article. These steps will walk you through the process of adding a robust data grid to your SharePoint solutions.

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

Before you start using Syncfusion® React UI components, ensure that your system meets the following prerequisites by referring to the system requirements documentation. This documentation provides information about supported browsers, Node.js versions, and other dependencies required for using Syncfusion® React UI components and SharePoint Framework effectively.

Set up the SharePoint project

Follow these steps to install and set up SharePoint Framework for your project:

1. Create a New Project: Create a new directory called ej2-share-point, open the command prompt from that directory.

2. Install Gulp: Gulp is a JavaScript-based task runner used to automate repetitive tasks. Install the Gulp CLI globally using the following command:

npm install gulp-cli --global

3. Install Yeoman: Yeoman helps you kick-start new projects and prescribes best practices and tools to help you stay productive. Install Yeoman globally using the following command:

npm install yo --global

4. Install SharePoint Dependency: Install the SharePoint dependency for the project using the following command:

npm install @microsoft/generator-sharepoint

5. Create a New Client-Side Web Part: Then, create a new client-side web part by running the following Yeoman SharePoint Generator command line.

yo @microsoft/sharepoint

After executing the above command, you will be prompted to configure the project settings. Follow the prompts and provide the necessary information:

1. Solution Name: Enter the name for your solution, such as “ej2-share-point”.

What is your solution name? **ej2-share-point**

2. Client-Side Component Type: Choose the type of client-side component you want to create:

Which type of client-side component to create? (Use arrow keys)
>   WebPart 
    Extension
    Library
    Adaptive Card Extension

3. Web Part Name: Specify a name for your web part, for example, “ReactGridComponent”.

What is your Web part name? ReactGridComponent

4. Template Selection: Select the template you would like to use for your project:

Which template would you like to use?
    Minimal
    No framework
>   React

This generates the necessary files as shown in the below image.

SharePoint Setup

6. Change Serve JSON Path: Update the initial path of the config/serve.json to your SharePoint site instead of {tenantDomain}. Modify it to https://your-share-point-site/_layouts/workbench.aspx.

7. Establish Trust for Certificate: After the project is created, establish trust for the development certificate by executing the following command: To establish trust for the certificate in the development environment, execute the provided command:

gulp trust-dev-cert

8. Run the project: To preview your SharePoint project, run the following command:

gulp serve

Adding React Data Grid packages

To utilize React Data Grid component in your project, you need to install the necessary npm package.

npm install @syncfusion/ej2-react-grids

Adding CSS reference

Themes for Syncfusion® Data Grid component can be applied using CSS files provided through npm theme packages. For available themes, refer to the Themes documentation.

Install the Material 3 theme package using the following command:

npm install @syncfusion/ej2-material3-theme --save

This example imports the material3 theme CSS in ~src/webparts/reactGridComponent/components/ReactGridComponent.tsx:

require('@syncfusion/ej2-material3-theme/styles/grid/index.css');

Adding Data Grid component

The data grid code should be added to the ReactGridComponent.tsx file.

import * as React from 'react';
import styles from './ReactGridComponent.module.scss';
import type { IReactGridComponentProps } from './IReactGridComponentProps';
import { escape } from '@microsoft/sp-lodash-subset';
import { ColumnDirective, ColumnsDirective, GridComponent,} from '@syncfusion/ej2-react-grids';

const ReactGridComponent: React.FC<IReactGridComponentProps> = (props) => {
    const {
      hasTeamsContext,
    } = props;
    // Defines the data to be displayed in the Data Grid.
    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 (
      <section className={`${styles.reactGridComponent} ${hasTeamsContext ? styles.teams : ''}`}>
        <div>
          <h3>Welcome to React Data Grid component in the SharePoint Framework!</h3>
        </div>
          <link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/32.1.19/ej2/material3.css" />
          {/* Assigns the dataset to the Data Grid component */}
          <GridComponent id='grid' dataSource={data} >
          {/* Define the columns to be displayed */}
            <ColumnsDirective>
              <ColumnDirective field='OrderID' isPrimaryKey={true} width='90' />
              <ColumnDirective field='CustomerID' width='100' />
              <ColumnDirective field='ShipCountry' width='120' />
            </ColumnsDirective>
          </GridComponent>
      </section>
    );
  }
export default ReactGridComponent;

3. Run the project: To preview your SharePoint project with the integrated React Data Grid component, run the following commands:

gulp trust-dev-cert
gulp serve

The output will appear as follows:

Data Grid Component

See also