Open In App

How to create SpreadSheet in ReactJS ?

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we are going to learn how we can create SpreadSheet in ReactJs. A spreadsheet is a file that exists of cells in rows and columns and can help arrange, calculate and sort data.

React is a free and open-source front-end JavaScript library for building user interfaces or UI components. It is maintained by Facebook and a community of individual developers and companies.

Approach: To create our Spreadsheet we are going to use the react-spreadsheet package because it is powerful, lightweight, and fully customizable. After that, we will add a spreadsheet on our homepage using the installed package.

Create ReactJs Application: You can create a new ReactJs project using the below command:

npx create-react-app gfg

Install the required package: Now we will install the  react-spreadsheet package using the below command:

npm install react-spreadsheet

Project Structure: It will look like this.

Adding SpreadSheet: In this example, we are going to add the spreadsheet on the homepage of our app using the package that we installed. For this, add the below content in the App.js file.

Javascript




import Spreadsheet from "react-spreadsheet";
import { useState } from "react";
  
export default function Sheet(){
  const [data, setData] = useState([
    [{ value: "GfG1" }, { value: "GfG3" }],
    [{ value: "GfG2" }, { value: "GfG4" }],
  ]);
  return(
  <div>
    <h4>SpreadSheet - GeeksforGeeks</h4>
    <Spreadsheet data={data} onChange={setData} />
  </div> 
  )
    
};


Explanation: In the above example first, we are importing the Spreadsheet component from the react-spreadsheet package. After that, we are using our useState to add the initial data and update the data. Then we are adding our spreadsheet using the Spreadsheet component.

Steps to run the application: Run the below command in the terminal to run the app.

npm start

Output:


Last Updated : 08 Nov, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads