ag gridダウンロード - ag gridソースコードのダウンロード

ag grid

その他のソースコード

ダウンロード

JavaScript データグリッド | JavaScript テーブル

AGグリッドロゴ

? Webサイト • ？ドキュメント • ⁉️ コミュニティ

GitHub フォーク

AG Grid は、完全な機能を備え、高度にカスタマイズ可能なJavaScript データグリッドです。優れたパフォーマンスを提供し、サードパーティへの依存関係がなく、次のサポートが付属しています。 反応する、角度とビュー。

概要

JavaScript データグリッド | JavaScript テーブル

エンタープライズサポート
バグレポート
質問
貢献する
ツールと拡張機能
ショーケース
スターゲイザー
カスタムコンポーネント
テーマ
カスタムテーマ
インストール
設定
シードプロジェクト
特徴
例
?概要
⚡️ クイックスタート
⁉️カスタマイズ
?コミュニティ
?サポート
⚠️
ライセンス

AG Grid は、コミュニティとエンタープライズの 2 つのバージョンで利用できます。

ag-grid-community無料で、MIT ライセンスの下で利用でき、並べ替え、フィルタリング、ページネーション、編集、カスタムコンポーネント、テーマ設定など、JavaScript データグリッドに期待されるすべてのコア機能が付属しています。
ag-grid-enterprise商用ライセンスで利用でき、エンジニアリングチームによる専用サポートに加えて、統合グラフ作成、行グループ化、集計、ピボット、マスター/詳細、サーバー側行モデル、エクスポートなどの高度な機能が付属しています。

特徴

特徴	AG グリッドコミュニティ	AG グリッドエンタープライズ
フィルタリング	✅	✅ (上級)
仕分け	✅	✅
セルの編集	✅	✅
CSVエクスポート	✅	✅
ドラッグ＆ドロップ	✅	✅
テーマとスタイル	✅	✅
選択	✅	✅
アクセシビリティ	✅	✅
無限スクロール	✅	✅
ページネーション	✅	✅
サーバー側のデータ	✅	✅ (上級)
カスタムコンポーネント	✅	✅
統合されたチャート作成	❌	✅
範囲選択	❌	✅
行のグループ化と集計	❌	✅
ピボット	❌	✅
Excel エクスポート	❌	✅
クリップボードの操作	❌	✅
マスター/詳細	❌	✅
ツリーデータ	❌	✅
コラムメニュー	❌	✅
コンテキストメニュー	❌	✅
ツールパネル	❌	✅
サポート	❌	✅

ℹ️注意:
完全な比較については、価格ページにアクセスしてください。

例

さまざまなユースケースにわたる AG Grid の豊富な機能セットを紹介するために、いくつかのデモを作成しました。以下で実際の動作をご覧いただくか、デモページで操作してください。

財務デモ

ライブアップデートとスパークラインを特徴とする財務データの例:

ライブデモ • ソースコード

在庫デモ

製品を表示および管理するための在庫データの例:

ライブデモ • ソースコード

HR デモ

階層的な従業員データを示す HR データの例:

ライブデモ • ソースコード

⚡️ クイックスタート

AG Grid はセットアップが簡単です。データを指定して列構造を定義するだけです。バニラ JavaScript のインストール手順を読むか、フレームワーク固有のガイドを参照してください。 反応する、角度とビュー。

インストール

$ npm install --save ag-grid-community

設定

1. コンテナを用意する

AG Grid ライブラリをロードし、コンテナ div を作成します。データグリッドは親コンテナーのサイズを満たすため、div には高さが必要です。

 <html lang="en"> <head> <!-- JavaScript Data Grid のすべての JS と CSS が含まれます --> <script src="https://cdn.jsdelivr.net/npm/ag-grid-community /dist/ag-grid-community.min.js"></script> </head> <body> <!-- Data Grid コンテナ --> <div id="myGrid" style="height: 500px"></div> </body></html>

2. JavaScript データグリッドのインスタンス化

createGridを使用してコンテナ div 内にデータグリッドを作成します。

 // グリッド オプション: すべてのデータ グリッド構成が含まれますsconst GridOptions = {};// データ グリッドを作成するための Javascript コードconst myGridElement = document.querySelector('#myGrid');agGrid.createGrid(myGridElement, GridOptions);

3. 行と列を定義する

// グリッド オプション: すべてのデータ グリッド構成が含まれます。sconst GridOptions = { // 行データ: 表示されるデータ。    rowData: [ { メーカー: 'Tesla'、モデル: 'Model Y'、価格: 64950、電気: true }, { メーカー: 'Ford'、モデル: 'F シリーズ'、価格: 33850、電気: false }, { メーカー: 'トヨタ', モデル: 'カローラ', 価格: 29600, 電気: false }, ], // 列定義: 定義表示される列。    columnDefs: [{ フィールド: 'メーカー' }, { フィールド: 'モデル' }, { フィールド: '価格' }, { フィールド: '電気' }],};

ℹ️注意:
AG Grid を使用したデータグリッドの構築の詳細については、ドキュメントを参照してください。

シードプロジェクト

一般的な構成を開始するのに役立つシードプロジェクトも提供しています。

環境	パッケージ	モジュール
React アプリの作成 (CRA)	パッケージ	モジュール
ヴィーテ	パッケージ	モジュール
Vite - TypeScript	パッケージ	モジュール
Webpack 5 - TypeScript	パッケージ	モジュール
Webpack 5 - JavaScript	パッケージ	モジュール
角度 CLI	パッケージ	モジュール
ナクスト	パッケージ	モジュール
ヴィーテ	パッケージ	モジュール

カスタマイズ

AG Grid は、外観と機能の両方の点で完全にカスタマイズ可能です。グリッドをカスタマイズするにはさまざまな方法があり、それらのカスタマイズを作成するのに役立つツールがいくつか提供されています。

カスタムコンポーネント

独自のカスタムコンポーネントを作成して、グリッドの動作をカスタマイズできます。たとえば、セルの表示方法や値の編集方法をカスタマイズしたり、独自のフィルターを作成したりできます。

グリッドに提供できるコンポーネントタイプには、次のようなさまざまなものがあります。

セルコンポーネント: セルの内容をカスタマイズします。
ヘッダーコンポーネント: 列および列グループのヘッダーをカスタマイズします。
コンポーネントの編集: セルの編集をカスタマイズします。
フィルターコンポーネント: 列メニュー内に表示されるカスタム列フィルター用。
フローティングフィルター: 列メニュー内に表示されるカスタム列フローティングフィルター用。
日付コンポーネント: 日付フィルターの日付選択コンポーネントをカスタマイズします。
コンポーネントの読み込み: サーバー側行モデルの使用時に読み込みセル行をカスタマイズします。
オーバーレイコンポーネント: 読み込みおよび行なしのオーバーレイコンポーネントをカスタマイズします。
ステータスバーコンポーネント: カスタムステータスバーコンポーネント用。
ツールパネルコンポーネント: カスタムツールパネルコンポーネント用。
ツールチップコンポーネント: カスタムセルツールチップコンポーネント用。
メニュー項目コンポーネント: 列メニューとコンテキストメニューに表示されるメニュー項目をカスタマイズします。

カスタムセルレンダラーとフィルターコンポーネントをグリッドに提供するには、 gridOptions.columnDefsプロパティ内にコンポーネントへの直接参照を作成します。

 GridOptions = { columnDefs: [ { field: 'country', // コンポーネントを cellRenderer に追加する列: CountryCellRenderer, // カスタム セル コンポーネント フィルター: CountryFilter, // カスタム フィルター コンポーネント }, ],};

テーマ

AG Grid には 4 つのテーマがあり、それぞれlightとdarkモードで使用できます。

石英	材料

高山	バラム

カスタムテーマ

すべての AG Grid テーマは、Theming API を使用してカスタマイズできます。また、Theme Builder または Figma Design System を使用して新しいテーマを最初から作成することもできます。

コミュニティ

ツールと拡張機能

AG Grid には、使用する言語やフレームワークに関係なく、AG Grid で次のプロジェクトを構築するのに役立つサードパーティツール、拡張機能、ユーティリティのエコシステムを作成した大規模で活発なコミュニティがあります。

反応する • 角度のある • TypeScript • ビュー • パイソン • スレンダー • SolidJS • .NET • さび • ララベル

ショーケース

AG Grid は、世界中のほぼすべての業界の数十万人の開発者によって使用されています。これらのプロジェクトのほとんどはプライベートなものですが、 JPMorgan 、 MongoDB 、 NASAなど、有名企業が AG Grid を使用しているさまざまな業界から厳選したオープンソースプロジェクトを厳選しました。詳細については、コミュニティショーケースページをご覧ください。

スターゲイザー

2016 年に設立された AG Grid は着実に人気が高まり、現在ではデータグリッドの市場リーダーとなっています。

サポート

エンタープライズサポート

AG Grid Enterprise の顧客は、エンジニアリングチームによって監視されている ZenDesk 経由で専用のサポートにアクセスできます。

バグレポート

バグを見つけた場合は、このリポジトリの問題セクションで報告してください。

質問

ag-gridタグを使用して、StackOverflow で同様の問題を探します。何も関係がないと思われる場合は、そこに新しいメッセージを投稿してください。 GitHub の問題を使用して質問しないでください。

貢献する

AG Grid は、ロンドンにある同じ場所にある開発者のチームによって開発されています。チームに参加したい場合は、申請書を [email protected] に送信してください。

⚠️ライセンス

ag-grid-community MITライセンスに基づいてライセンスされています。

ag-grid-enterprise商用ライセンスがあります。

詳細については、LICENSE ファイルを参照してください。

AGチャート

ここまで読んだ方は、最新プロジェクト「AG Charts - 世界で最高の JavaScript グラフ作成ライブラリ」に興味があるかもしれません。

当初は AG Grid の統合チャートを強化するために構築され、2018 年にこのプロジェクトをオープンソース化しました。それ以来、人気が着実に上昇していることを見て、専用のエンタープライズバージョン ( ag-charts-enterprise ) を備えた AG Charts に投資することを決定しました。 ag-charts-communityの継続的なサポートに加えて。