<script src="https://cdn.jsdelivr.net/npm/gridjs@latest/dist/gridjs.production.min.js"></script>

基本的なテーブルの作成

Grid.jsを使用して最初のテーブルを作成するには、以下のステップに従います。

1. HTMLにテーブルを表示するためのコンテナを作成します。

   <div id="wrapper"></div>

2. JavaScriptでGrid.jsのインスタンスを作成し、データとカラムを設定します。

   const grid = new Grid({
   data: [
   ["John", 30, "Engineer"],
   ["Jane", 25, "Designer"]
   ],
   columns: ["Name", "Age", "Occupation"]
   });

3. インスタンスをレンダリングして、テーブルを表示します。

   grid.render(document.getElementById("wrapper"));
   

.gridjs-table {
border: 1px solid #ddd;
border-collapse: collapse;
}

.gridjs-th, .gridjs-td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}

このコードを適用すると、テーブルの罫線やセルのパディングが変更され、見た目が改善されます。

列と行のカスタマイズ

列や行の表示をカスタマイズすることもできます。例えば、特定の列に条件に基づいて異なるスタイルを適用することが可能です。

const grid = new Grid({
columns: [
"Name",
{
name: "Age",
formatter: (cell) => cell > 30 ? `<span style="color:red;">${cell}</span>` : cell
},
"Occupation"
],
data: [
["John", 35, "Engineer"],
["Jane", 25, "Designer"]
]
});

高度な機能 - ソート、検索、ページネーション

Grid.jsでは、テーブルに高度な機能を簡単に追加できます。このセクションでは、データのソート、フィルタリング、そしてページネーションの設定に焦点を当てます。

データのソート

データのソートは、テーブルの利便性を大幅に向上させます。Grid.jsでは、列ヘッダーをクリックするだけでソートが可能です。

const grid = new Grid({
columns: ["Name", "Age", "Occupation"],
sort: true,
data: [
["John", 35, "Engineer"],
["Jane", 25, "Designer"]
]
});

grid.updateConfig({
search: true
}).forceRender();

const grid = new Grid({
pagination: {
limit: 5
},
// その他の設定...
});

const grid = new Grid({
search: true,
sort: true,
pagination: {
limit: 5
},
columns: ["Name", "Age", "Occupation"],
server: {
url: 'https://example.com/api/data',
then: data => data.map(item => [item.name, item.age, item.occupation])
}
});

const grid = new Grid({
server: {
url: 'https://example.com/api/data',
then: data => data.map(item => [item.name, item.age, item.occupation])
},
columns: ["Name", "Age", "Occupation"]
});

grid.on('rowClick', (row) => {
alert(`Clicked row: ${JSON.stringify(row.cells[0].data)}`);
});

grid.on('cellClick', (cell) => {
console.log(`Clicked cell: ${JSON.stringify(cell.data)}`);
});

grid.on('rowClick', (row) => {
document.getElementById('details').textContent = `Selected: ${JSON.stringify(row.cells.map(cell => cell.data))}`;
});

const grid = new Grid({
columns: ["商品名", "価格", "カテゴリ"],
server: {
url: 'https://example.com/api/products',
then: data => data.map(item => [item.name, item.price, item.category])
},
search: true,
sort: true
});

const grid = new Grid({
columns: ["学生名", "科目", "成績"],
data: [
// データ配列...
],
pagination: {
limit: 10
},
sort: true
});