ag-grid - エンタープライズアプリケーションを構築するための最高のJavaScriptデータテーブル。React / Angular / Vue /PlainJavaScriptをサポートします。

(The best JavaScript Data Table for building Enterprise Applications. Supports React / Angular / Vue / Plain JavaScript.)

Created at: 2014-12-24 00:20:14
Language: TypeScript
License: NOASSERTION

AGグリッドHTML5グリッドはコミュニティから信頼されており、企業向けに構築されています

CDNJS Githubスター ツイッター

モジュール 情報
ag-grid-community npm
バンドル恐怖症
品質ゲートステータス
ag-grid-enterprise npm
バンドル恐怖症
品質ゲートステータス

AGグリッド

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

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

フィルタリングとグループ化が有効になっていることを示すAGグリッドの画像。

特徴

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

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

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

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

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

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

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

入門

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

$ 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
ます。何も関係がないと思われる場合は、そこに新しいメッセージを投稿してください。質問をするためにGitHubの問題を使用しないでください。

貢献

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

ライセンス

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