[!Note] このコントロールは非推奨であり、Grid に置き換えられていることに注意してください。そのため、そのコントロールに移行することをお勧めします。これは新しい機能を受け取ることはなく、バグ修正は優先されません。コードベースをデータ グリッドに移行する際のヘルプや質問については、サポートにお問い合わせください。

    Web Components 列タイプ

    Ignite UI for Web Components Data Table / Data Grid は、データを Web Components データ グリッドに表示する方法を 5 つの列タイプとテンプレート列タイプから選択できます。サポートされている列タイプは、Text 列、Numeric 列、DateTime 列、Image 列、ComboBox および Template です。

    各列は、Field プロパティを、グリッドにバインドされた基になる データ ソースの項目の対応するプロパティの名前に設定することによって Web Components データ グリッドにバインドします。

    Web Components 列タイプの例

    テキスト列

    Web Components データ グリッド は、関連付けられたセルに書式設定されたテキストを表示するために使用されます。これは、string 型のデータを表示するために使用されるデフォルトの列型です。

    数値列

    IgcNumericColumnComponent は、関連付けられたセルに書式設定された数値を表示するために使用され、セル内の小数点以下の桁数の制御と小数桁の表示を可能にします。

    DateTime 列

    IgcDateTimeColumnComponent は、関連付けられたセルに Date オブジェクトを表示するために使用され、Date オブジェクトを適切に表示する方法をコントロールで制御できます。

    画像列

    IgcImageColumnComponent はセル内に画像を表示するために使用され、その imageStretchOption オプションを使用してセルの画像ストレッチカスタマイズのためのオプションを公開します。

    ImageResourceType オプションを設定して、イメージのリソースの種類を選択することもできます。

    コンボボックス列

    IgcComboBoxColumnComponent は、エンドユーザーが単一の項目を選択できるドロップダウン リストを表示するために使用されます。

    データ バインディングは、列の DataSource プロパティで複合オブジェクトの配列を使用して実現できます。

    textField プロパティはユーザーが選択を行うときに表示する値を決定します。

    valueField プロパティは選択された基本データ項目のバインド値を決定します。オブジェクトのリストに複数のプロパティがある場合に必要です。

    テンプレート列

    IgcTemplateColumnComponent はセルテンプレートと共に使用されます。カスタム テンプレートを列のセルに適用することができます。これは、テンプレート列の CellUpdating イベントを処理することによって行われます。

    CellUpdating イベントの引数は、イベントを発生させる IgcTemplateColumnComponent と IgcTemplateCellUpdatingEventArgs パラメーターを公開します。このイベント引数パラメーターは、列の関連付けられたセル内に配置される HTMLDivElement を返す Content プロパティを公開します。その後、この div に新しい要素を追加することができます。

    IgcTemplateCellUpdatingEventArgs は、TemplateCellInfo オブジェクトを取得するために使用できる CellInfo プロパティも公開しています。このオブジェクトは、インデックス、基になるデータ項目、セルの外観など、セルと行に関する情報を公開します。

    スパークライン列

    Sparkline コンポーネントを IgcTemplateColumnComponent に埋め込み、より複雑なデータ構造を表示できます。 この方法の詳細については、列スパークライン トピックを参照してください。

    コード スニペット

    以下は、このトピックで説明されている各列の実装を示します。

    <igc-data-grid id="grid"
    width="100%"
    height="500px"
    auto-generate-columns="false">
    <igc-text-column field="FirstName"></igc-text-column>
    <igc-text-column field="LastName"></igc-text-column>
    <igc-combo-box-column id="City" field="City" text-field="name" header-text="City"></igc-text-column>
    <igc-template-column id="Address" field="Address"></igc-template-column>
    <igc-image-column field="Photo"></igc-text-column>
    <igc-numeric-column field="Age"></igc-numeric-column>
    <igc-date-time-column field="Birthday"></igc-date-time-column>
</igc-data-grid>

    import { IgcTemplateColumnComponent } from 'igniteui-webcomponents-grids';
import { IgcTemplateCellInfo } from 'igniteui-webcomponents-grids';
import { IgcTemplateCellUpdatingEventArgs } from 'igniteui-webcomponents-grids';

let grid1 = (document.getElementById("grid") as IgcDataGridComponent);
grid1.dataSource = data;

let cityComboColumn = document.getElementById('city') as IgcComboBoxColumnComponent;

if (cityComboColumn)
    this.allCities = DataGridSharedData.getAllCities();
    cityComboColumn.dataSource = this.cityList;
    cityComboColumn.textField = "name";

let TemplateColumn = (document.getElementById("Address") as IgcTemplateColumnComponent);
TemplateColumn.cellUpdating = onCellUpdating;

onCellUpdating(s: IgcTemplateColumnComponent, e: IgcTemplateCellUpdatingEventArgs): void {
 // alert("onAddressCellUpdating");
 const content = e.content as HTMLDivElement;
 let span1: HTMLSpanElement | null = null;
 let span2: HTMLSpanElement | null = null;
 const info = e.cellInfo as IgcTemplateCellInfo ;
 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 リファレンス