LoginSignup
3
2

More than 1 year has passed since last update.

概要

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

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

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

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

スクリーンショット 2022-12-02 15.36.46.png

使い方

インストール方法はドキュメントを参考にしてください。
この記事では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
  }
])

おすすめ

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

3
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
2