Getting Started with React Spreadsheet Component

21 Jul 20263 minutes to read

This section explains how to create a simple React application and add the React Spreadsheet Editor component with the minimum required setup.

Prerequisites

System requirements for React components

Create a React application

Use Vite to create a new React application, as it provides a faster development environment, smaller bundle sizes, and optimized builds.

To create a new React application, run one of the following commands based on your preferred environment.

npm create vite@latest spreadsheet-app -- --template react
cd spreadsheet-app
npm create vite@latest spreadsheet-app -- --template react-ts
cd spreadsheet-app

Install the Syncfusion® React Spreadsheet package

Install the Syncfusion® React Spreadsheet package from npm using the following command:

npm install @syncfusion/ej2-react-spreadsheet

Register a Syncfusion License Key

Before initializing the Syncfusion React Spreadsheet component, generate a Syncfusion license key and register it in the application.

Add CSS references

Add the following Spreadsheet and dependent component styles to src/index.css file. Replace the existing content with the theme import code below.

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

Note: This example uses the Tailwind3 theme. To use a different built-in theme, replace the tailwind3.css references with the corresponding theme stylesheets. Refer to the Themes documentation for information about the available themes and the different ways to include theme styles in a React application.

Add the Syncfusion® React Spreadsheet component

Import and render the SpreadsheetComponent in src/App.jsx or src/App.tsx. Replace the existing content with the following code.

import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';

export default function App() {
    return (<SpreadsheetComponent openUrl='https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/open' 
                saveUrl='https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/save' />);
}
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';

export default function App() {
  return (<SpreadsheetComponent openUrl='https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/open' 
            saveUrl='https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/save' />);
}

Note: The openUrl and saveUrl endpoints used in this example are provided only for demonstration purposes. For development and production use, we strongly recommend configuring your own local or hosted web service for the Open and Save actions instead of relying on the online demo service. For more information, refer to the Web Services section.

Run the application

Run the following command to start the development server:

npm run dev

After the application starts, open the localhost URL shown in the terminal to view the React Spreadsheet Editor in the browser. The output will appear as follows:

React Spreadsheet Editor

You can also explore the Spreadsheet interactively using the live sample below.

View Sample in GitHub to explore the complete source code. You can also explore our React Spreadsheet example that shows you how to present and manipulate data.

Video tutorial

To get started quickly with React Spreadsheet, you can watch this video:

See also