AG Gridという表ライブラリ

概要

AG Gridは表ライブラリです。

生JavaScript/Angular/Vue.js/Reactに対応しており、
英語ではありますが豊富なドキュメントが整備されています。

拡張性が非常に高く、ライブラリ使っているからこの機能はできないよね？
ってのが割と無いです。

顧客に無茶な要求をされても対応できてしまうくらい
柔軟性が高いライブラリだということですね。

使い方

インストール方法はドキュメントを参考にしてください。
この記事ではVue.js(3系)での利用方法の一例を解説します。

<template>
  <ag-grid-vue
    :columnDef="columnDef"
    :rowData="rowDataList"
  />
</template>

<script setup lang="ts">
import { AgGridVue } from 'ag-grid-vue3'

/** カラム設定 */
const columnDef = ref<ColDef[]>([
  { field: 'name' },
  { field: 'age' }
])
/** 表に表示するデータ */
const rowDataList = ref<RowData[]>([
  {
    name: 'hayashi',
    age: 28
  },
  {
    name: 'rinyu',
    age: 5
  }
])
</script>

カラム設定のfieldはフィールド名（カラム名）で、
カラム名と同じプロパティ名で宣言されたrowData内の要素を
表のセル内に描画してくれます。

ヘッダー名をつける時は、
カラム設定にこのように追加します。

/** カラム設定 */
const columnDef = ref<ColDef[]>([
  {
     field: 'name',
     headerName: '名前'
  },
  {
    field: 'age',
    headerName: '年齢'
  }
])

コンポーネント埋め込み

表のセル内にVueコンポーネントを埋め込むようなこともできます。

import DeleteButton from 'src/components/DeleteButton.vue'

/** カラム設定 */
const columnDef = ref<ColDef[]>([
  {
     field: 'deleteButton',
     headerName: '削除',
     cellRenderer: DeleteButton
  }
])

おすすめ

他にも色々できることがあるので、
プロジェクトの要件に合うようであれば
是非利用してみてください。