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

react jsjavascript libraryfront end technology更新于 2025/11/19 6:04:17

在本文中，我们将了解如何在 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} />;
}