ag-gridでは簡単にソートやフィルタを利用することが可能です。
簡単に追加可能ですので、ag-gridの列幅をgrid幅に合わせて表示する。のコードに追加してみましょう。

ソートを追加する。

enableSortingを指定をtrueに設定するだけでソート機能が付加されます。
Shift + clickで複数列でのソートが可能です。

<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";

export default {
  name: "AgGridSample",
  components: {
    AgGridVue
  },
  data() {
    return {
      gridOptions: null
    };
  },
  created() {
    this.gridOptions = {
      columnDefs: this.createColumnDef(),
      rowData: this.createRowData(),
      enableSorting: true
    }
  },
  methods: {
    createColumnDef() {
      return [
        {
          headerName: "苗字",
          field: "lastName"
        },
        {
          headerName: "名",
          field: "firstName"
        },
        {
          headerName: "性別",
          field: "sex"
        },
        {
          headerName: "年齢",
          field: "age"
        },
        {
          headerName: "都道府県",
          field: "prefecture"
        }
      ];
    },
    /**
     * 行データ変更時の処理。
     */
    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)]
        };
      });
    }
  }
};

フィルタを追加する。

enableFilterを指定をtrueに設定するだけでフィルタ機能が付加されます。

<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";

export default {
  name: "AgGridSample",
  components: {
    AgGridVue
  },
  data() {
    return {
      gridOptions: null
    };
  },
  created() {
    this.gridOptions = {
      columnDefs: this.createColumnDef(),
      rowData: this.createRowData(),
      enableSorting: true,
      enableFilter: true
    }
  },
  methods: {
    createColumnDef() {
      return [
        {
          headerName: "苗字",
          field: "lastName"
        },
        {
          headerName: "名",
          field: "firstName"
        },
        {
          headerName: "性別",
          field: "sex"
        },
        {
          headerName: "年齢",
          field: "age"
        },
        {
          headerName: "都道府県",
          field: "prefecture"
        }
      ];
    },
    /**
     * 行データ変更時の処理。
     */
    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)]
        };
      });
    }
  }
};

奥山

ECMAScript,Javaを扱います。
最近は、vue.jsなどフロントエンドの技術に興味あり！

中日ドラゴンズを応援してます。