チャートも含める事が出来るテーブルライブラリ・「AnyGrids」

AnyGrids

AnyGridsはチャートも含める事が出来るテーブル生成JavaScriptライブラリです。サンプルのように簡単なチャートをテーブルに含める事が出来ます

テーブルといっても厳密にはtable要素ではなくdivをflexboxで並べているのでテーブルでは無いのですが便宜上このように書いてます

以下使用方法です

<script src="https://unpkg.com/anygrids@latest/anygrids.js"></script>

AnyGridsを読み込みます

チャートのデータはJSONで書きます

const data = [
	{
		id: 1,
		email: "hogehoge",
		first_name: "foo",
		last_name: "bar",
		avatar: "https://picsum.photos/100/100",
		linear: [0, 30, 5, 29, 34],
		bar: [0, 30, 5, 29, 34],
		pie: [0.25, 0.3, 0.45],
		orders: 5
	},
	{
		id: 2,
		email: "piyopiyo",
		first_name: "huga",
		last_name: "hugahuga",
		avatar: "https://picsum.photos/50/50",
		linear: [10, 30, 50, 9, 34],
		bar: [10, 30, 50, 9, 34],
		pie: [0.25, 0.3, 0.45],
		orders: 25
	}
];

テーブルの雛型は以下のように設定します

document.addEventListener("DOMContentLoaded", function () {
	new AnyGrids({
		container: "anygrids", //テーブルを挿入する要素
		data, //JSONデータ
		pagination: {//ページネーション設定
			perPage: 2
		},
		rows: {
			child: {//雛型
				template:
					'<div><img src="avatar"> <div style="display:flex;">first_name last_name</div></div>pie_render'
			}
		},
		columns: [//各カラム設定
			{ field: "id", title: "ID", type: "string", width: 30, sortable: true },
			{ field: "email", title: "メールアドレス", type: "string", width: 200 },
			{
				field: "first_name",
				title: "姓",
				type: "string",
				width: 200,
				sortable: true
			},
			{
				field: "last_name",
				title: "名",
				type: "string",
				width: 100,
				sortable: true
			},
			{
				field: "avatar",
				title: "画像",
				type: "image",
				width: 50,
				class: "avatar"
			},
			{
				field: "linear",
				title: "線グラフ",
				type: "sparklines-linear",
				width: 150
			},
			{ field: "bar", title: "棒グラフ", type: "sparklines-bar", width: 150 },
			{ field: "pie", title: "円グラフ", type: "sparklines-pie", width: 150 },
			{
				field: "orders",
				title: "数",
				type: "number",
				width: 150,
				total: { show: true, label: "合計: " }
			}
		]
	});
});

CSSは書かなくてもスタイリングしてくれましたのでライブラリ側で読み込んでるっぽいです。スタイルを変える時は便宜調整してください。ライセンスは独自ライセンスのようなので使用する場合は目を通してください

AnyGrids