[!Note] このコントロールは非推奨であり、Grid に置き換えられていることに注意してください。そのため、そのコントロールに移行することをお勧めします。これは新しい機能を受け取ることはなく、バグ修正は優先されません。コードベースをデータ グリッドに移行する際のヘルプや質問については、サポートにお問い合わせください。
Web Components Data Grid 概要
Ignite UI for Web Components Data Table / Data Grid は、表形式の Web Components コンポーネントでコーディングや設定をほとんど行わずにデータをすばやくバインドして表示できます。Web Components の機能には、フィルタリング、ソート、テンプレート、行選択、行のグループ化、行の固定、および列移動があります。Web Components データ テーブルは、ライブ ストリーミング データ用に最適化されており、無制限のデータセットサイズを行数または列数で処理することができます。
Web Components Data Grid の例
このデモは、グリッドで利用可能な機能のいくつかを実装しています: フィルタリング、グループ化、列のピン固定/ピン固定解除、列の再配置、ソート、および集計。
作業の開始
依存関係
Web Components Grid のパッケージをインストールするときに core パッケージもインストールする必要があります。
npm install --save igniteui-webcomponents-core
npm install --save igniteui-webcomponents-grids
npm install --save igniteui-webcomponents-inputs
モジュールの要件
IgcGridComponent
を作成するには、以下のモジュールが必要です。
import { ModuleManager } from 'igniteui-webcomponents-core';
import { IgcDataGridModule } from 'igniteui-webcomponents-grids';
import { IgcDataGridComponent } from 'igniteui-webcomponents-grids';
ModuleManager.register(
IgcDataGridModule
);
オプションのモジュール
上記のオプションの IgcGridComponent
機能を使用するには、以下のモジュールが必要です。
import { IgcGridColumnOptionsModule } from 'igniteui-webcomponents-grids';
import { IgcGridColumnOptionsComponent } from 'igniteui-webcomponents-grids';
import { IgcDataGridToolbarModule } from 'igniteui-webcomponents-grids';
import { IgcDataGridToolbarComponent } from 'igniteui-webcomponents-grids';
import { IgcSparklineModule } from 'igniteui-webcomponents-charts';
import { IgcSparklineComponent } from 'igniteui-webcomponents-charts';
ModuleManager.register(
IgcGridColumnOptionsModule,
IgcDataGridToolbarModule,
IgcSparklineModule
);
サンプル データ ソース
Web Components グリッド モジュールがインポートされました。以下のステップはローカル データにバインドするグリッドの基本的な設定です。
this.data = [{
Discontinued: false,
OrderDate: new Date("2012-02-12"),
ProductID: 1,
ProductName: "Chai",
QuantityPerUnit: "10 boxes x 20 bags",
ReorderLevel: 10,
UnitPrice: 18.0000,
UnitsInStock: 39
}, {
Discontinued: false,
OrderDate: new Date("2003-03-17"),
ProductID: 2,
ProductName: "Chang",
QuantityPerUnit: "24 - 12 oz bottles",
ReorderLevel: 25,
UnitPrice: 19.0000,
UnitsInStock: 17
}, {
Discontinued: false,
OrderDate: new Date("2006-03-17"),
ProductID: 3,
ProductName: "Aniseed Syrup",
QuantityPerUnit: "12 - 550 ml bottles",
ReorderLevel: 25,
UnitPrice: 10.0000,
UnitsInStock: 13
}, {
Discontinued: false,
OrderDate: new Date("2016-03-17"),
ProductID: 4,
ProductName: "Chef Antony Cajun Seasoning",
QuantityPerUnit: "48 - 6 oz jars",
ReorderLevel: 0,
UnitPrice: 22.0000,
UnitsInStock: 53
}, {
Discontinued: true,
OrderDate: new Date("2011-11-11"),
ProductID: 5,
ProductName: "Chef Antony Gumbo Mix",
QuantityPerUnit: "36 boxes",
ReorderLevel: 0,
UnitPrice: 21.3500,
UnitsInStock: 0
}];
列の自動生成
以下のコードは、Web Components データ グリッドを上記のローカルデータにバインドする方法を示しています。
<igc-data-grid id="grid"
height="100%"
width="100%"
auto-generate-columns="true"
default-column-min-width="100"
summary-scope="Root"
is-column-options-enabled="true"
is-group-collapsable="true"
group-summary-display-mode="RowBottom"
column-moving-mode="Deferred"
column-moving-animation-mode="SlideOver"
column-moving-separator-width="2"
column-showing-animation-mode="slideFromRightAndFadeIn"
column-hiding-animation-mode="slideToRightAndFadeOut"
selection-mode="SingleRow"
corner-radius-top-left="0"
corner-radius-top-right="0">
</igc-data-grid>
let grid1 = (document.getElementById("grid") as IgcDataGridComponent);
grid1.dataSource = data;
列の手動定義
<igc-data-grid id="grid"
width="100%"
height="500px"
auto-generate-columns="false">
<igc-numeric-column field="ProductID" header-text="Product ID"></igc-numeric-column>
<igc-text-column field="ProductName" header-text="Product Name"></igc-text-column>
<igc-text-column field="QuantityPerUnit" header-text="Quantity Per Unit"></igc-text-column>
<igc-numeric-column field="UnitsInStock" header-text="Units In Stock"></igc-numeric-column>
<igc-date-time-column field="OrderDate" header-text="Order Date"></igc-date-time-column>
</igc-data-grid>
let grid1 = (document.getElementById("grid") as IgcDataGridComponent);
grid1.dataSource = data;
列のスタイル設定
次のコードは、提供された列のプロパティを使用して特定の列のスタイルを設定する方法を示しています。
<igc-text-column
background="SkyBlue"
text-style="Italic Bold 16pt Times New Roman"
></igc-text-column>
その他のリソース
- アクセシビリティの遵守
- セルのアクティブ化
- グリッド編集
- セル選択
- 列アニメーション
- 列の選択
- 列フィルタリング
- 列の移動
- 列のオプション
- 列サイズの変更
- 列の並ソート
- 列タイプ
- パフォーマンス
- 行のピン固定
- 行グループ
- 行のハイライト表示