참고 자료

준비

"dependencies": {
    "ag-grid-community": "^21.2.2",
    "ag-grid-vue": "^21.2.2",
 ...
    "vue": "^2.6.10",
 ...

.vue 파일로 하는 일

 import {AgGridVue} from "ag-grid-vue";

export default {
  components: {
    AgGridVue,
  }

<template>
  <div>
      <AgGridVue id="grid" class="ag-theme-blue" 
          :rowData="rowData"
          :gridOptions="gridOptions">
      </AgGridVue>
  </div>
</template>

<template>
  <div>
      <AgGridVue id="grid" class="ag-theme-blue" 
          v-bind:rowData="rowData"
          v-bind:gridOptions="gridOptions">
      </AgGridVue>
  </div>
</template>

  data() {
    ...
    return {
      gridData : [],
      gridOptions: { ... }
    }
  },
  computed: {
    rowData () {
      return this.gridData;
    }
  },

      gridOptions: {
        // 列の定義
        columnDefs:colDefs,

        // １行選択モード
        rowSelection: 'single', 

        // １行の高さ(タグ属性でも指定できるが、今回はオプションにした)
        rowHeight : 32, 

        // ページング機能を有効にするかの設定。タグ属性では指定できない模様
        pagination: true, 
        paginationAutoPageSize : true,

        // EVENTS - add event callback handlers
        // 行が選択されたイベント
        onRowSelected(params) { 
          params.api.redrawRows(); // 選択されたとき行の色を変える
        },
        // 行のスタイルを返すコールバック
        getRowStyle(params) {
          // 選択行のスタイル
          if (params.node.selected) {
            return { background: 'white' };
          } else { // 通常行のスタイル
            return { background: '#f1e8e8' };
          }
        },
        // グリッドの準備完了イベント
        onGridReady(params) {
          this.gridApi = params.api;
          this.columnApi = params.columnApi;

          // カラム幅を全体幅に合わせる.
          // これを呼ばないとcolumnDefが反映されません。
          this.gridApi.sizeColumnsToFit(); 

          console.log('gridReady is called.'); 
        },
      },

    const colDefs = [{
        headerName: '#', 
        field: 'order', 
        maxWidth:50, 
        cellStyle: {textAlign: 'center'}
      },{
        headerName: '商品番号', 
        field: 'productCd', 
        maxWidth: 85,
        cellStyle: {textAlign: 'left'}
      },{
        headerName: '商品名称', 
        field: 'name', 
        cellStyle: {textAlign: 'left'}
      }];

실제 표시

주의: 제목 부분의 텍스트가 센터로 정렬되어도 제목 텍스트가 중간에 있지 않습니다.

  .ag-header-cell-text {
    flex: 1; /* ヘッダのテキストの位置を変更するにはこれが超重要らしい */
  }