React ローカル データのバインディング

次のサンプルは、データの配列への Ignite UI for React Data Table / Data Grid データ バインディングを示します。

React ローカル データのバインディングの例

コード スニペット

<IgrDataGrid
    height="100%"
    width="100%"
    rowHeight="45"
    autoGenerateColumns="false"
    dataSource={this.data}>
        <IgrTextColumn field="ProductID" headerText="Order ID" width="*>70" horizontalAlignment="center"/>
        <IgrTextColumn field="ProductName" headerText="Product Name"   />
        <IgrNumericColumn field="ProductPrice" headerText="Price" width="*>90"
        positivePrefix="$" showGroupingSeparator="true" minFractionDigits={2}/>
        <IgrNumericColumn field="OrderItems" headerText="Orders" width="*>70"/>
        <IgrNumericColumn field="OrderValue" headerText="Order Value" width="*>100"
        positivePrefix="$" showGroupingSeparator="true" />
        <IgrDateTimeColumn field="OrderDate" headerText="Order Date" width="*>100"
        horizontalAlignment="right" dateTimeFormat="DateShort" />
        <IgrImageColumn field="CountryFlag" headerText="Country" width="*>100"
        contentOpacity="1" horizontalAlignment="center"/>
        <IgrNumericColumn field="Margin" headerText="Margin" width="90"
        positiveSuffix="%" horizontalAlignment="center" />
        <IgrNumericColumn field="Profit" headerText="Profit" width="70"
        positivePrefix="$" showGroupingSeparator="true" />
        <IgrTextColumn field="Status" headerText="Status" width="110"
        horizontalAlignment="center"   />
</IgrDataGrid>

public data: any[];
public initData() {
        const names: string[] = [
            "Intel CPU", "AMD CPU",
            "Intel Motherboard", "AMD Motherboard", "Nvidia Motherboard",
            "Nvidia GPU", "Gigabyte GPU", "Asus GPU", "AMD GPU", "MSI GPU",
            "Corsair Memory", "Patriot Memory", "Skill Memory",
            "Samsung HDD", "WD HDD", "Seagate HDD", "Intel HDD", "Asus HDD",
            "Samsung SSD", "WD SSD", "Seagate SSD", "Intel SSD", "Asus SSD",
            "Samsung Monitor", "Asus Monitor", "LG Monitor", "HP Monitor" ];

        const countries: string[] = ["USA", "UK", "France", "Canada", "Poland",
            "Denmark", "Croatia", "Australia", "Seychelles",
            "Sweden", "Germany", "Japan", "Ireland",
            "Barbados", "Jamaica", "Cuba", "Spain",];
        const status: string[] = [ "Packing", "Shipped", "Delivered"]
        const sales: any[] = [];

        for (let i = 0; i < 200; i++) {
            const price = this.getRandomNumber(10000, 90000) / 100;
            const items = this.getRandomNumber(4, 30);
            const value = Math.round(price * items);
            const margin = this.getRandomNumber(2, 5);
            const profit = Math.round((price * margin / 100) * items);
            const country = this.getRandomItem(countries);
            sales.push({
                Country: country,
                CountryFlag: this.getCountryFlag(country),
                Margin: margin,
                OrderDate: this.getRandomDate(),
                OrderItems: items,
                OrderValue: value,
                ProductID: 1001 + i,
                ProductName: this.getRandomItem(names),
                ProductPrice: price,
                Profit: Math.round(profit),
                Status: this.getRandomItem(status),
            });
        }

        this.data = sales;
    }

API リファレンス

• IgrGrid