只想簡簡單單畫個表格，但 React，Vue，Angular，…，這麼多前端框架，各自都有不同的表格渲染庫。就沒有表格庫能「一次畫表，到處運行」嗎？來看看 Grid.js 這個跨框架的前端表格插件吧！
Grid.js，是 Github 上 grid-js 組織開源的前端表格插件，代碼倉庫在
https://github.com/grid-js/gridjs，目前版本為 1.4.2。Grid.js 的標語是
A table library that works everywhere
也即是一個可以到處運行的表格庫。Grid.js 沒有第三方依賴鎖定，其唯一的外部依賴已經被打包在內，意味著它能在所有的前端框架，包括沒有框架的情況下使用。
Grid.js 使用 TypeScript 開發，大小僅為 12KB，支持所有現代瀏覽器，並利用內部管線技術獲得了高速性能。
Grid.js表格插件
安裝在 Node.js 環境使用 Grid.js，可使用 npm 進行安裝：
npm install gridjs --save
使用時需要導入 Javascript 和 CSS 文件：
import { Grid } from "gridjs";
import "gridjs/dist/theme/mermaid.css";
而在瀏覽器環境中使用時，可以直接引用 CDN 使用：
<script src="https://unpkg.com/gridjs/dist/gridjs.production.min.js"></script>
<link href="https://unpkg.com/gridjs/dist/theme/mermaid.min.css" rel="stylesheet" />
使用 Grid.js 時，需要一個 div 元素的 wrapper，然後創建一個 Grid.js 的 Grid 實例，定義表格的配置參數，最後調用 render 方法，完成渲染。
一個使用瀏覽器的例子如下：
<!DOCTYPE html>
<html lang="en">
<head>
<link
href="https://unpkg.com/gridjs/dist/theme/mermaid.min.css"
rel="stylesheet"
/>
</head>
<body>
<div id="wrapper"></div>
<script src="https://unpkg.com/gridjs/dist/gridjs.production.min.js"></script>
<script>
new gridjs.Grid({
columns: ["Name", "Email", "Phone Number"],
data: [
["John", "john@example.com", "(353) 01 222 3333"],
["Mark", "mark@gmail.com", "(01) 22 888 4444"],
["Eoin", "eoin@gmail.com", "0097 22 654 00033"],
["Sarah", "sarahcdd@gmail.com", "+322 876 1233"],
["Afshin", "afshin@mail.com", "(353) 22 87 8356"]
]
}).render(document.getElementById("wrapper"));
</script>
</body>
</html>
可以看到，gridjs.Grid 使用了參數 columns 來定義列，以及 data 來添加各行的數據。類似的，Grid.js 在 React 中的例子如下：
import { Grid } from "gridjs";
import "gridjs/dist/theme/mermaid.css";
function helloWorld () {
const grid = new Grid({
columns: ['Name', 'Email', 'Phone Number'],
data: [
['John', 'john@example.com', '(353) 01 222 3333'],
['Mark', 'mark@gmail.com', '(01) 22 888 4444']
]
});
useEffect(() => {
grid.render(document.getElementById('wrapper'));
});
return (
<div id="wrapper" />
);
}
不難看出，Grid.js 的使用方法是一致的，兩份代碼都渲染出了美觀的表格。
Grid.js表格示例
Grid.js的設計十分簡潔，主要參數包括：
data：類型為 T[][] 或 Function，表格每行的數據。data 可以是一個包含各個單元格數據的二維數組，也可以是一個返回可解析為二維數組的函數，以實現異步加載（Promise）和動態加載。
from：類型為 HTMLElement，已有的 HTML 表格元素。Grid.js 可以從一個現有的 HTML 的 form 元素生成一個 Grid 表格，添加樣式和其他功能。
server：遠程數據加載。server 是一個包含 url，以及可選的 then 和 opts 的對象，可以根據從 url獲取的遠程數據渲染表格。
// 使用server參數進行遠程數據加載
const grid = new Grid({
columns: ['Title', 'Director', 'Producer'],
server: {
url: 'https://swapi.dev/api/films/',
then: data => data.results.map(movie => [movie.title, movie.director, movie.producer])
}
});
Grid.js搜索
Grid.js分頁
總結Grid.js 作為一個跨框架的前端表格插件，在各個前端框架中都能使用相同的 API 完成表格的定義和渲染，降低了使用不同框架時的學習成本，避免了各種不同依賴所帶來的問題。
同時，Grid.js 作為一個功能豐富的插件，提供了主流表格插件的大部分功能；且設計簡潔，性能優越，在一些定製化要求不高的表格應用場景中具有很大的優勢。
Grid.js 目前正處在積極開發的階段，版本號更新較快，有興趣的開發者可以參與開源貢獻。而作為一個 TypeScript 項目，Grid.js 代碼結構清晰，值得進一步研究學習。
來源：
https://www.toutiao.com/i6837266007539581454/
「IT大咖說」歡迎廣大技術人員投稿，投稿郵箱：aliang@itdks.com
IT大咖說 | 關於版權
由「IT大咖說（ID：itdakashuo）」原創的文章，轉載時請註明作者、出處及微信公眾號。投稿、約稿、轉載請加微信：ITDKS10（備註：投稿），茉莉小姐姐會及時與您聯繫！
感謝您對IT大咖說的熱心支持！