ag-gridの列表示をCellRendrerを作成して変更する。
ag-gridでは列の表示方法を変更することが可能です。
また、vue,react,angularなどを利用して作成することが可能となっています。
今回は、vueを使用して作成してみます。
コードの一部は、ag-gridの列幅をgrid幅に合わせて表示する。を流用しています。
CellRendererを作成
数値を3桁区切りで表示するCellRendererを作成してみます。
NumericFormat.vue
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<template> <div class="numeric"> {{ formatedValue }} </div> </template> import Vue from "vue"; import numeral from "numeral"; export default Vue.extend({ computed: { formatedValue() { return numeral(this.params.value).format("0,0"); } } }); <style scoped> .numeric { text-align: right; } </style> |
NumericFormat.vueを利用してみる。
importしたNumericFormatをcolumnDefsの列定義情報に追加します。cellRendererFramework`に指定することで利用することが可能です。
今回数値を扱うために貯金列を追加しました。
作成したCellRendererは
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 |
<template> <ag-grid-vue class="ag-theme-material" style="height: 500px" :gridOptions="gridOptions" :rowDataChanged="onRowDataChanged" /> </template> import { AgGridVue } from "ag-grid-vue"; import { LAST_NAMES, FIRST_NAMES, PREFECTURES } from "../datas"; import NumericFormat from "./ag-grid/renderer/NumericFormat"; 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" }, { headerName: "貯金", field: "deposit", cellRendererFramework: NumericFormat } ]; }, /** * 行データ変更時の処理。 */ onRowDataChanged() { this.$nextTick(() =>{ // 列幅をgridに合わせる。 this.gridOptions.api.sizeColumnsToFit(); }); }, /** * 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)], deposit: Math.floor( Math.random() * 10000000) }; }); } } }; |
ECMAScript,Javaを扱います。
最近は、vue.jsなどフロントエンドの技術に興味あり！
中日ドラゴンズを応援してます。
