ag-gridの列表示をCellRendrerを作成して変更する。

ag-gridでは列の表示方法を変更することが可能です。
また、vue,react,angularなどを利用して作成することが可能となっています。
今回は、vueを使用して作成してみます。
コードの一部は、ag-gridの列幅をgrid幅に合わせて表示する。を流用しています。

CellRendererを作成

数値を3桁区切りで表示するCellRendererを作成してみます。

NumericFormat.vue

<template>
    
        {{ formatedValue }}
    
</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の列定義情報に追加します。今回数値を扱うために貯金列を追加しました。作成したCellRendererはcellRendererFramework`に指定することで利用することが可能です。

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