こちらのサンプルを改造しました。
Usage -> Hello World
フォルダー構造
$ tree
.
├── index.html
└── src
└── index.js
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<link
href="https://unpkg.com/gridjs/dist/theme/mermaid.min.css"
rel="stylesheet"
/>
<title>テストコーナー</title>
</head>
<body>
<h2>テストのページ</h2>
<div id="wrapper"></div>
<script src="https://unpkg.com/gridjs/dist/gridjs.umd.js"></script>
<script src="src/index.js"></script>
Sep/02/2025 AM 09:00<br />
</body>
</html>
src/index.js
new gridjs.Grid({
columns: ["名前", "メール", "電話番号"],
data: [
["鈴木", "suzuki@example.com", "090-2222-3333"],
["高橋", "takahashi@gmail.com", "080-1234-4321"],
["山本", "yamamoto@gmail.com", "070-4422-0033"],
["大谷", "ootani@gmail.com", "090-1876-1233"],
["佐々木", "sasaki@gmail.com", "080-2287-8356"],
["松井", "matsui@gmail.com", "070-1256-4051"]
]
}).render(document.getElementById("wrapper"));
サーバーの起動
http-server
ページネーション
pagination を加えます。
src/index.js
new gridjs.Grid({
columns: ["名前", "メール", "電話番号"],
pagination: {
limit: 3
},
data: [
["鈴木", "suzuki@example.com", "090-2222-3333"],
["高橋", "takahashi@gmail.com", "080-1234-4321"],
["山本", "yamamoto@gmail.com", "070-4422-0033"],
["大谷", "ootani@gmail.com", "090-1876-1233"],
["佐々木", "sasaki@gmail.com", "080-2287-8356"],
["松井", "matsui@gmail.com", "070-1256-4051"]
]
}).render(document.getElementById("wrapper"));