大家好,很高興又見面了,我是" 高級前端進階 ",由我帶著大家一起關註前端前沿、深入前端底層技術,大家一起進步,也歡迎大家關註、點贊、收藏、轉發!

什麽是 Spread Grid
JS library for creating high-performance grid-based applications
Spread Grid 是一個 JavaScript 庫,可讓開發者輕松建立高效能、可客製且深度互動的基於網格的應用程式和視覺化。
Spread Grid 的主要目標是效率、功能和效能,因此不一定適用於視覺豐富且面向設計的應用程式。原則上,其不提供其他庫可能提供的一些花哨功能,例如:動畫和過渡,這些功能是為了速度和效能而犧牲的。該框架的理想用例是建立數據密集型工具,幫助使用者在即時系統中監控和處理大量數據。

Spread Grid 的主要功能包括:
目前 Spread Grid 在 Github 透過 MIT 協定開源,是一個值得關註的前端開源計畫。
如何使用 Spread Grid
對於 React 應用程式,建議透過 npm 安裝庫。
npm install react-spread-grid
其會將庫添加到 package.json 檔中,並透過 react-spread-grid 模組使其可用。如果是 Vanilla javascript,開發者可以直接從 CDN 包含庫。
https://unpkg.com/js-spread-grid@latest/dist/index.js
下面可以看到如何使用 SpreadGrid 元件建立網格的簡單範例:
import React from 'react';import ReactDOM from 'react-dom/client';import SpreadGrid from 'react-spread-grid';const root = ReactDOM.createRoot(document.getElementById('root'));root.render( <SpreadGrid data={[ {name: 'John', age: 25, score: 100, registered: true, team: 'red'}, {name: 'Alice', age: 24, score: 70, registered: false, team: 'blue'}, {name: 'Bob', age: 26, score: 35, registered: true, team: 'blue'}, {name: 'Charlie', age: 27, score: 60, registered: false, team: 'red'}, {name: 'David', age: 18, score: 60, registered: true, team: 'red'}, {name: 'Eve', age: 29, score: 80, registered: false, team: 'green'}, {name: 'Frank', age: 30, score: 50, registered: true, team: 'blue'} ]} />);
Spread Grid 會根據提供的數據自動檢測列和行,其還帶有一組預設的行為和功能,例如:標題生成、單元格選擇和復制、列大小調整和排序等等。
開發者還可以使用格式規則中的 text 內容來定義單元格的文本內容。其可以是靜態字串,也可以是基於單元格上下文動態生成文本的函式。
當 text 內容是函式時,其接受包含以下內容的上下文物件:{data、rows、columns、row、column、value、newValue、text}。newValue 內容僅在單元格被編輯後可用。
如果單元格已被編輯,則 text 內容的預設值為 ${newValue},否則為 ${value}。值得一提的是,開發者可以在文本中使用 unicode 字元(例如 「 ✓ 」)作為圖示。
<SpreadGrid // data 為網格數據 data={[ {name: 'John', age: 25, score: 100, registered: true, team: 'red'}, {name: 'Alice', age: 24, score: 70, registered: false, team: 'blue'}, {name: 'Bob', age: 26, score: 35, registered: true, team: 'blue'}, {name: 'Charlie', age: 27, score: 60, registered: false, team: 'red'}, {name: 'David', age: 18, score: 60, registered: true, team: 'red'}, {name: 'Eve', age: 29, score: 80, registered: false, team: 'green'}, {name: 'Frank', age: 30, score: 50, registered: true, team: 'blue'} ]} // 透過format 格式化文本 formatting={[ { column: {id: 'score'}, text: ({value}) => `${value}%` }, { column: {id: 'registered'}, text: '' }, { column: {id: 'registered'}, condition: ({value}) => value, text: ' ✓ ' } ]}/>
更多關於 Spread Grid 的用法和範例可以參考文末資料,本文不再過多展開。
參考資料
https://github.com/TomaszRewak/js-spread-grid
https://developer.mescius.com/spreadjs
https://spread-grid.tomasz-rewak.com/error-handling/error-overlay