ag-gridのLoadingオーバーレイをカスタマイズ。

ag-gridのデフォルトはLoadingと文字が表示されますが、今回は簡単に簡単なLoadingを実装する。で紹介したepic-spinnersを利用してみます。

Loadingオーバーレイ コンポーネント

epic-spinnerのコンポーネントを中央に表示します。

Loading.vue

<template>
  <div
    class="loading"
  >
    <atom-spinner :animation-duration="2000"
      :size="250"
      color="#26A69A"
      class="spinner"
    />
  </div>
</template>

<script>
import Vue from "vue";
import Numeral from "numeral";
import { AtomSpinner } from "epic-spinners";

export default Vue.extend({
  components: {
    AtomSpinner
  }
});
</script>
<style scoped>
  .loading {
      background-color: #FFFFFF
  }
  .spinner {
      margin: 0 auto;
  }
</style>

使用する。

使用するには、loadingOverlayComponentFrameworkに作成したコンポーネントを指定するだけです。
また、Loadingの表示非表示は、grid-apiのshowLoadingOverlay,hideOverlayを利用する必要があります。

以下は、データ更新ボタンを押下した際に、作成したLodingオーバーレイを表示する例です。

<template>
  <div>
    <div>
      <button
        @click="updateRowData"
      >
        データ更新
      </button>
    </div>
    <div>
      <ag-grid-vue
          class="ag-theme-material"
          style="height: 500px"
          :gridOptions="gridOptions"
          :rowDataChanged="onRowDataChanged"
          />
    </div>
  </div>
</template>
<script>
import { FingerprintSpinner } from 'epic-spinners';
import { AgGridVue } from "ag-grid-vue";
import Loading from "./ag-grid/overlay/Loading";
import { LAST_NAMES, FIRST_NAMES, PREFECTURES } from "../datas";

export default {
  name: "AgGridSample",
  components: {
    FingerprintSpinner ,
    AgGridVue
  },
  data() {
    return {
      gridOptions: null
    };
  },
  created() {
    this.gridOptions = {
      columnDefs: this.createColumnDef(),
      rowData: this.createRowData(),
      enableSorting: true,
      enableFilter: true,
      suppressDragLeaveHidesColumns: true,
      loadingOverlayComponentFramework: Loading,
    }
  },
  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)]
        };
      });
    },
    async updateRowData() {
      this.gridOptions.api.showLoadingOverlay();
      await this.timeout(10000);
      this.gridOptions.api.setRowData(this.createRowData());
      this.gridOptions.api.hideOverlay();
    },
    /**
     * setTimeoutのPromise化
     */
    timeout(ms) {
      return new Promise(resolve => setTimeout(resolve, ms));
    }
  }
};
</script>
<style scoped>
  .loading {
    margin: 0 auto;
  }

  button {
    color: #FFFFFF;
    background-color: #2196f3;
    padding: 10px 16px;
  }
</style>

奥山

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

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