Syncfusion AI Assistant

How can I help you?

Getting Started with React Spreadsheet component

26 Apr 20263 minutes to read

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

Prerequisites

System requirements for Syncfusion® 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 React Spreadsheet package from npm using the following command:

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

Add CSS references

Add the following style references to the src/App.css file.

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

Note: Refer to the Themes topic to learn more about built-in themes and different ways to refer to themes in a React project.

Add the Syncfusion® React Spreadsheet component to the application

Now, import the SpreadsheetComponent into your src/App.jsx or src/App.tsx file and render it.

import * as React from 'react';
import { createRoot } from 'react-dom/client';
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' />);
}
const root = createRoot(document.getElementById('root'));
root.render(<App />);
import * as React from 'react';
import { createRoot } from 'react-dom/client';
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' />);
}
const root = createRoot(document.getElementById('root')!);
root.render(<App />);

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 local URL shown in the terminal to view the React Spreadsheet Editor in the browser.

Use the following live preview to explore the Spreadsheet component.

Video tutorial

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

See also