在React JS中创建类似Excel的数据表格

在这篇文章中，我们将学习如何在React JS前端创建一个类似Excel的数据表格。我们将使用一个名为**react-data-grid**的第三方包。如果您正在处理数据并希望创建一个仪表板应用程序，这是一个非常有用的包。

首先创建一个React项目：

npx create-react-app tutorialpurpose

进入项目目录：

cd tutorialpurpose

示例

下载并安装**react-data-grid**包：

npm i --save react-data-grid

我们可以使用这个包来添加默认样式的网格表，或者说是预制的数据表格。

在**App.js**中添加以下代码：

import DataGrid from "react-data-grid";

const columns = [
   { key: "id", name: "ID" },
   { key: "title", name: "Title" },
];

const rows = [
   { id: 0, title: "Example" },
   { id: 1, title: "Demo" },
   { id: 2, title: "React JS" },
   { id: 3, title: "Tutorialspoint" },
   { id: 4, title: "Ath Tripathi" },
   { id: 5, title: "Kiran Kumar Panigrahi" },
];

export default function App() {
   return <DataGrid columns={columns} rows={rows} />;
}