モジュール	情報
ag-grid-community
ag-grid-enterprise

AGグリッド

AGグリッドは、フル機能で高度にカスタマイズ可能なJavaScriptデータグリッドです。卓越したパフォーマンスを提供し、サードパーティの依存関係がなく、すべての主要なJavaScriptフレームワークとスムーズに統合されます。

複数のフィルターとグループ化を有効にした場合のグリッドの外観は次のとおりです。

特徴

グリッドに期待する標準の機能セットに加えて、次のようになります。

• 列の相互作用（列のサイズ変更、並べ替え、および固定）
• ページ付け
• 並べ替え
• 行の選択

AGグリッドを際立たせる機能のいくつかを次に示します。

• グループ化/集約*
• アクセシビリティサポート
• カスタムフィルタリング
• インプレースセル編集
• 遅延読み込みを記録します*
• サーバー側のレコード操作*
• ライブストリームの更新
• 階層データのサポートとツリービュー*
• カスタマイズ可能な外観
• カスタマイズ可能なセルの内容
• 状態の永続性
• キーボードナビゲーション
• CSVへのデータエクスポート
• Excelへのデータエクスポート*
• Excelのようなピボット*
• 行の並べ替え
• コピーペースト
• 列のスパン
• 固定された行
• 全幅の行
• 統合チャート
• スパークライン

*アスタリスクが付いている機能は、Enterpriseバージョンでのみ使用できます。

機能の完全なリストについては開発者向けドキュメントを確認するか、チュートリアルと機能デモについては公式ドキュメントにアクセスしてください。

フレームワーク固有のソリューションをお探しですか？

• Angularを使い始める
• Reactを始めよう
• Vueを使い始める

入門

依存関係をインストールする

$ npm install --save ag-grid-community

HTMLにプレースホルダーを追加する

<div id="myGrid" style="height: 150px; width: 600px" class="ag-theme-alpine"></div>

グリッドとスタイルをインポートします

import { Grid } from 'ag-grid-community';

import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-alpine.css';

構成を設定する

var gridOptions = {
	columnDefs: [
		{ headerName: 'Make', field: 'make' },
		{ headerName: 'Model', field: 'model' },
		{ headerName: 'Price', field: 'price' }
	],
	rowData: [
		{ make: 'Toyota', model: 'Celica', price: 35000 },
		{ make: 'Ford', model: 'Mondeo', price: 32000 },
		{ make: 'Porsche', model: 'Boxster', price: 72000 }
	]
};

グリッドを初期化します

var eGridDiv = document.querySelector('#myGrid');
new Grid(eGridDiv, this.gridOptions);

グリッドをプロジェクトに統合する方法の詳細については、AGグリッドアプリケーションの構築を参照してください。

問題の報告

バグを見つけた場合は、このリポジトリの問題セクションで報告してください。Enterpriseバージョンを使用している場合は、プライベートチケットシステムを使用してください。

質問をする

タグを使用してStackOverflowで同様の問題を探し

ag-grid

貢献

AG Gridは、ロンドンにある同じ場所にある開発者のチームによって開発されています。チームに参加したい場合は、ジョブボードを確認するか、アプリケーションをinfo@ag-grid.comに送信してください。

ライセンス

このプロジェクトはMITライセンスの下でライセンスされています。詳細については、LICENSEファイルを参照してください。