Getting Started with React Spreadsheet in SharePoint

27 Aug 20262 minutes to read

This article provides a step-by-step guide for setting up a SharePoint project and integrating the React Spreadsheet Editor component.

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 WebPart 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? WebPart
Add 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 establish trust for the certificate in the development environment, execute the following command:

gulp trust-dev-cert

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

Add Syncfusion® Spreadsheet packages

To install the React Spreadsheet component package, use the following command:

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

Import the required CSS styles

Themes for Spreadsheet 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 guide uses the Tailwind 3 theme as an example, sourced from the theme package. In this package, each component includes an index.css file that automatically loads all the required dependency styles. To install the Tailwind 3 theme package, use the following command:

npm install @syncfusion/ej2-tailwind3-theme

Add the required Spreadsheet theme style reference to ~/src/webparts/app/components/App.tsx file.

require('@syncfusion/ej2-tailwind3-theme/styles/spreadsheet/index.css');

Add Spreadsheet Component

Add the following code in the App.tsx file inside the ~/src/webparts/app/components folder to render the spreadsheet.

import * as React from 'react';
import { IAppProps } from './IAppProps';
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';

require('@syncfusion/ej2-base/styles/tailwind3.css');
require('@syncfusion/ej2-inputs/styles/tailwind3.css');
require('@syncfusion/ej2-buttons/styles/tailwind3.css');
require('@syncfusion/ej2-splitbuttons/styles/tailwind3.css');
require('@syncfusion/ej2-lists/styles/tailwind3.css');
require('@syncfusion/ej2-navigations/styles/tailwind3.css');
require('@syncfusion/ej2-popups/styles/tailwind3.css');
require('@syncfusion/ej2-dropdowns/styles/tailwind3.css');
require('@syncfusion/ej2-grids/styles/tailwind3.css');
require('@syncfusion/ej2-react-spreadsheet/styles/tailwind3.css');

export default class App extends React.Component<IAppProps, {}> {
  
  public render(): React.ReactElement<IAppProps> {
    return  (<SpreadsheetComponent/>);
  }
}

Run the project

To run the project, use the following command:

gulp serve

See Also