[!Note] このコントロールは非推奨であり、Grid に置き換えられていることに注意してください。そのため、そのコントロールに移行することをお勧めします。これは新しい機能を受け取ることはなく、バグ修正は優先されません。コードベースをデータ グリッドに移行する際のヘルプや質問については、サポートにお問い合わせください。
Web Components ローカル データのバインディング
次のサンプルは、データの配列への Ignite UI for Web Components Data Table / Data Grid データ バインディングを示します。
Web Components ローカル データのバインディングの例
コード スニペット
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;
}