React 列タイプ
Ignite UI for React Data Table / Data Grid は、データを React データ グリッドに表示する方法を 5 つの列タイプとテンプレート列タイプから選択できます。サポートされている列タイプは、Text 列、Numeric 列、DateTime 列、Image 列、ComboBox および Template です。
各列は、Field
プロパティを、グリッドにバインドされた基になる データ ソースの項目の対応するプロパティの名前に設定することによって React データ グリッドにバインドします。
React 列タイプの例
テキスト列
React データ グリッド は、関連付けられたセルに書式設定されたテキストを表示するために使用されます。これは、string 型のデータを表示するために使用されるデフォルトの列型です。
数値列
IgrNumericColumn
は、関連付けられたセルに書式設定された数値を表示するために使用され、セル内の小数点以下の桁数の制御と小数桁の表示を可能にします。
DateTime 列
IgrDateTimeColumn
は、関連付けられたセルに Date オブジェクトを表示するために使用され、Date オブジェクトを適切に表示する方法をコントロールで制御できます。
画像列
IgrImageColumn
はセル内に画像を表示するために使用され、その imageStretchOption
オプションを使用してセルの画像ストレッチカスタマイズのためのオプションを公開します。
ImageResourceType
オプションを設定して、イメージのリソースの種類を選択することもできます。
コンボボックス列
IgrComboBoxColumn
は、エンドユーザーが単一の項目を選択できるドロップダウン リストを表示するために使用されます。
データ バインディングは、列の DataSource
プロパティで複合オブジェクトの配列を使用して実現できます。
textField
プロパティはユーザーが選択を行うときに表示する値を決定します。
valueField
プロパティは選択された基本データ項目のバインド値を決定します。オブジェクトのリストに複数のプロパティがある場合に必要です。
テンプレート列
IgrTemplateColumn
はセルテンプレートと共に使用されます。カスタム テンプレートを列のセルに適用することができます。これは、テンプレート列の CellUpdating
イベントを処理することによって行われます。
CellUpdating
イベントの引数は、イベントを発生させる IgrTemplateColumn
と IgrTemplateCellUpdatingEventArgs
パラメーターを公開します。このイベント引数パラメーターは、列の関連付けられたセル内に配置される HTMLDivElement を返す Content
プロパティを公開します。その後、この div に新しい要素を追加することができます。
IgrTemplateCellUpdatingEventArgs
は、TemplateCellInfo
オブジェクトを取得するために使用できる CellInfo
プロパティも公開しています。このオブジェクトは、インデックス、基になるデータ項目、セルの外観など、セルと行に関する情報を公開します。
スパークライン列
Sparkline コンポーネントを IgrTemplateColumn
に埋め込み、より複雑なデータ構造を表示できます。
この方法の詳細については、列スパークライン トピックを参照してください。
コード スニペット
以下は、このトピックで説明されている各列の実装を示します。
<IgrDataGrid
height="100%"
width="100%"
defaultColumnMinWidth="120"
autoGenerateColumns="false"
dataSource={this.data}>
<IgrTextColumn field="FirstName" headerText="First Name" />
<IgrTextColumn field="LastName" headerText="Last Name" />
<IgrComboBoxColumn field="City" headerText="City" dataSource={this.cityList} textField="name"/>
<IgrTemplateColumn field="Address" headerText="Address"
cellUpdating={this.onAddressCellUpdating} />
<IgrImageColumn field="Photo" headerText="Photo"
imageResourceType="LocalAsset" />
<IgrNumericColumn field="Age" headerText="Age" />
<IgrDateTimeColumn field="Birthday" headerText="Date of Birth" />
</IgrDataGrid>
import { IgrTemplateCellUpdatingEventArgs } from 'igniteui-react-grids';
import { IgrTemplateCellInfo } from 'igniteui-react-grids';
import { IgrTemplateColumn } from 'igniteui-react-grids';
import { IgrComboBoxColumn } from 'igniteui-react-grids';
public onAddressCellUpdating(s: IgrTemplateColumn, e: IgrTemplateCellUpdatingEventArgs) {
const content = e.content as HTMLDivElement;
let span1: HTMLSpanElement | null = null;
let span2: HTMLSpanElement | null = null;
const info = e.cellInfo as IgrTemplateCellInfo;
const item = info.rowItem;
if (content.childElementCount === 0) {
span1 = document.createElement("span");
span2 = document.createElement("span");
content.style.verticalAlign = "top";
content.style.marginTop = "15px";
content.style.lineHeight = "normal";
content.style.display = "inline-grid";
content.style.fontFamily = "Verdana";
content.style.fontSize = "13px";
content.appendChild(span1);
content.appendChild(span2);
}
else {
span1 = content.children[0] as HTMLSpanElement;
span2 = content.children[1] as HTMLSpanElement;
}
if (span1 && span2) {
span1.textContent = item.Street;
span2.textContent = item.City + ", " + item.Country;
}
}
以下は、上記の列で使用するサンプルデータ ソースです。
const maleNames: string[] = ["Kyle", "Oscar", "Ralph", "Torrey", "Bill", "Frank", "Howard", "Jack", "Larry", "Pete", "Steve", "Vince", "Mark", "Alex", "Max", "Brian", "Chris", "Andrew", "Martin", "Mike", "Steve", "Glenn", "Bruce"];
const femaleNames: string[] = ["Gina", "Irene", "Katie", "Brenda", "Casey", "Fiona", "Holly", "Kate", "Liz", "Pamela", "Nelly", "Marisa", "Monica", "Anna", "Jessica", "Sofia", "Isabella", "Margo", "Jane", "Audrey", "Sally", "Melanie", "Greta", "Aurora", "Sally"];
const lastNames: string[] = ["Adams", "Crowley", "Ellis", "Martinez", "Irvine", "Maxwell", "Clark", "Owens", "Rooney", "Lincoln", "Thomas", "Spacey", "Betts", "King", "Newton", "Fitzgerald", "Holmes", "Jefferson", "Landry", "Newberry", "Perez", "Spencer", "Starr", "Carter", "Edwards", "Stark", "Johnson", "Fitz", "Chief", "Blanc", "Perry", "Stone", "Williams", "Lane", "Jobs", "Adama", "Power", "Tesla"];
const genders: string[] = ["male", "female"];
const cities: string[] = ["New York, New York", "Columbus, Ohio", "Los Angeles, California", "Orlando, Florida", "New Orleans, Louisiana", "Las Vegas, Nevada", "Atlanta, Georgia"];
const roadSuffixes: string[] = ["Road", "Street", "Court", "Way"];
const roadNames: string[] = ["Alpha", "Beta", "Charlie", "Delta", "Echo", "Foxtrot", "Golf", "Hotel", "India", "Julia", "Kilo", "Lima", "Mike", "November"];
const people: any[] = [];
let maleCount: number = 0;
let femaleCount: number = 0;
for (let i = 0; i < 250; i++) {
const age: number = Math.round(this.getRandomNumber(20, 40));
const today: Date = new Date();
const gender: string = this.getRandomItem(genders);
let firstName: string;
const lastName: string = this.getRandomItem(lastNames);
const propertyNum: string = Math.round(this.getRandomNumber(1, 300)).toString();
const cityState: string = this.getRandomItem(cities);
const road: string = this.getRandomItem(roadNames) + " " + this.getRandomItem(roadSuffixes);
let photoPath: string;
if (gender === "male") {
firstName = this.getRandomItem(maleNames);
maleCount++;
if (maleCount > 26) {
maleCount = 0;
}
if (maleCount < 10) {
photoPath = '/assets/GUY0' + maleCount.toString() + '.png';
}
else {
photoPath = '/assets/GUY' + maleCount.toString() + '.png';
}
}
else {
firstName = this.getRandomItem(femaleNames);
femaleCount++;
if (femaleCount > 24) {
femaleCount = 0;
}
if (femaleCount < 10) {
photoPath = '/assets/GIRL0' + femaleCount.toString() + '.png';
}
else {
photoPath = '/assets/GIRL' + femaleCount.toString() + '.png';
}
}
const path: string = './assets/GIRL01.png';
const birthday: Date = new Date(today.getFullYear() - age, Math.round(this.getRandomNumber(1, 12)), Math.round(this.getRandomNumber(1, 28)));
people.push({
Address: propertyNum + " " + road + ", " + cityState,
Age: age,
Birthday: birthday,
City: cityState,
FirstName: firstName,
LastName: lastName,
Photo: path,
Street: propertyNum + " " + road + ","
});
}
this.data = people;
public getRandomNumber(min: number, max: number): number {
return min + Math.random() * (max - min);
}
public getRandomItem(array: any[]): any {
const index = Math.round(this.getRandomNumber(0, array.length - 1));
return array[index];
}
API リファレンス
IgrGrid
CellInfo
CellUpdating
IgrComboBoxColumn
Content
DataSource
IgrDateTimeColumn
Field
IgrImageColumn
ImageResourceType
ImageStretchOption
IgrNumericColumn
TemplateCellInfo
IgrTemplateCellUpdatingEventArgs
IgrTemplateColumn
TextField
ValueField