在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} />;
}