ag-gridで大量データを軽快に表示する。

ag-gridは高機能なグリッドライブラリで、大量データでも軽快に動作します。(デモ)
Vue.js,React,Angularなどに対応しているため、簡単に利用することができます。

今回はこのag-gridをvueで利用する方法を記載します。

ag-gridをvue.jsプロジェクトにインストール

vue.jsプロジェクトはVue CLI 3で作成していることとします。

npm install
main.js修正
1. 関連

npm install

npm install --save ag-grid ag-grid-vue

main.js修正

importを追加する。

// ag-grid
import "../node_modules/ag-grid/dist/styles/ag-grid.css";
import "../node_modules/ag-grid/dist/styles/ag-theme-balham.css";

ag-gridを利用

後は、必要なvueファイルでag-grid-vueをimportして利用します。



import { AgGridVue } from "ag-grid-vue";
import { LAST_NAMES, FIRST_NAMES, PREFECTURES } from "../datas";

export default {
name: "AgGridSample",
components: {
AgGridVue
},
data() {
return {
gridOptions: null
};
},
created() {
this.gridOptions = {
columnDefs: this.createColumnDef(),
rowData: this.createRowData()
}
},
methods: {
createColumnDef() {
return [
{
headerName: "苗字",
field: "lastName"
},
{
headerName: "名",
field: "firstName"
},
{
headerName: "性別",
field: "sex"
},
{
headerName: "年齢",
field: "age"
},
{
headerName: "都道府県",
field: "prefecture"
}
];
},
/**
* ag-gridで表示するデータを作成。
*
*/
createRowData() {
return [...Array(1000)].map(() => {
const sex = ["MALE", "FEMALE"][Math.floor(Math.random() * 2)];
return {
sex,
lastName: LAST_NAMES[Math.floor(Math.random() * LAST_NAMES.length)],
firstName:
FIRST_NAMES[sex][
Math.floor(Math.random() * FIRST_NAMES[sex].length)
],
age: Math.floor(Math.random() * 30),
prefecture:
PREFECTURES[Math.floor(Math.random() * PREFECTURES.length)]
};
});
}
}
};