如何在 ReactJS 中创建电子表格？

在本文中，我们将学习如何在 ReactJs 中创建 SpreadSheet。电子表格是存在于行和列中的单元格的文件，可以帮助排列、计算和排序数据。

React 是一个免费的开源前端 JavaScript 库，用于构建用户界面或 UI 组件。它由 Facebook 和一个由个人开发者和公司组成的社区维护。

方法：为了创建我们的电子表格，我们将使用 react-spreadsheet 包，因为它功能强大、轻量级且完全可定制。之后，我们将使用已安装的软件包在我们的主页上添加一个电子表格。

创建 ReactJs 应用程序：您可以使用以下命令创建一个新的 ReactJs 项目：

npx create-react-app gfg

安装所需的包：现在我们将使用以下命令安装 react-spreadsheet 包：

npm install react-spreadsheet

项目结构：它看起来像这样。

添加电子表格：在此示例中，我们将使用我们安装的包在应用程序的主页上添加电子表格。为此，在App.js文件中添加以下内容。

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(
  
    SpreadSheet - GeeksforGeeks
    
   
  )
    
};

说明：在上面的示例中，我们首先从 react-spreadsheet 包中导入电子表格组件。之后，我们使用我们的 useState 添加初始数据并更新数据。然后我们使用电子表格组件添加我们的电子表格。

运行应用程序的步骤：在终端中运行以下命令来运行应用程序。

npm start

如何在 ReactJS 中创建电子表格？

Javascript

SpreadSheet - GeeksforGeeks

输出：