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

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

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

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

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

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

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-vueimportして利用します。



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)] }; }); } } };

コメント

タイトルとURLをコピーしました