VueのAG Gridでテーブルの初期表示時に右端までスクロールした状態にする方法

やりたいこと

Table ComponentであるAG Gridを使用してTableを描画する際に、初期表示時に右端までスクロールした状態にしたい。

背景

ユーザにとって直近のデータに一番強い関心がある時系列データを表示したい場面に直面しました。また時系列データを表示する際に、左から右に向かってデータが新しくなっていく方が自然であると考えました。そこで左端に一番古いデータ、右端に一番新しいデータとなるように配置し、初期状態で右端までスクロールした状態で表示する方法を選択しました。

やり方

AG GridにはGrid Eventsという概念があり、あらかじめ決められたタイミングで動作させられるように設定することができます。今回はfirstDataRenderedというイベント内で右端にスクロースするという動作を追加することで初期表示時にテーブルを右端までスクロールした状態に設定しました。右端にスクロールする際にスクロールする量を取得するため一旦描画を待ちたいのでthis.$nextTickのアロー関数内でgridElement.scrollWidthを取得しています。

実際のコード

実際に使ったコードで該当部分だけ抜き出しています。Vue2のコードなのでVue3や他のフレームワークの場合は適宜読み替えてください。動作確認はしていないのでご注意ください。(もし動作しなければコメントいただけるとありがたいです。すぐに修正します。)

<template>
  <div>
      <ag-grid-vue
        ref="table"
        :columnDefs="columnDefs"
        :rowData="rowData"
        @first-data-rendered="onFirstDataRendered"
      >
      </ag-grid-vue>
  </div>
</template>
<script>
import { AgGridVue } from 'ag-grid-vue';

export default {
  name: 'App',
  data() {
    return {
      columnDefs: [],
      rowData: [],
      gridApi: null,
    };
  },
  components: {
    AgGridVue,
  },
  mounted() {
    this.rowData = apiでデータを取得
  },
  methods: {
    onFirstDataRendered(params) {
      this.gridApi = params.api;
      this.$nextTick(() => {
        const gridElement = this.$refs.table.$el.querySelector('.ag-center-cols-viewport');
        if (gridElement) {
          gridElement.scrollLeft = gridElement.scrollWidth;
        }
      });
    },
  },
};
</script>