Web Components 그리드 열 크기 조정 개요

Web Components Grid의 Ignite UI for Web Components 열 크기 조정 기능을 사용하면 사용자가 IgcGridComponent의 열 너비를 쉽게 조정할 수 있습니다. 기본적으로 드래그 크기 조정 작업이 진행되는 동안 임시 크기 조정 표시기가 표시됩니다. 사용 가능한 크기 조정 옵션은 여러 가지가 있습니다. 픽셀/백분율로 열 크기 조정, 열 크기 조정 제한, 더블 클릭 시 열 크기 자동 조정, 초기화 시 열 크기 자동 조정.

Web Components 그리드 열 크기 조정 예제

EXAMPLE

DATA

TS

HTML

CSS

export class CustomersDataItem {
    public constructor(init: Partial<CustomersDataItem>) {
        Object.assign(this, init);
    }

    public ID: string;
    public Company: string;
    public ContactName: string;
    public ContactTitle: string;
    public Address: string;
    public City: string;
    public Region: string;
    public PostalCode: number;
    public Country: string;
    public Phone: string;
    public Fax: string;

}
export class CustomersData extends Array<CustomersDataItem> {
    public constructor(items: Array<CustomersDataItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new CustomersDataItem({ ID: `ALFKI`, Company: `Alfreds Futterkiste`, ContactName: `Maria Anders`, ContactTitle: `Sales Representative`, Address: `Obere Str. 57`, City: `Berlin`, Region: `East`, PostalCode: 12209, Country: `Germany`, Phone: `030-0074321`, Fax: `030-0076545` }),
                new CustomersDataItem({ ID: `ANATR`, Company: `Ana Trujillo Emparedados y helados`, ContactName: `Ana Trujillo`, ContactTitle: `Owner`, Address: `Avda. de la Constitución 2222`, City: `México D.F.`, Region: `South`, PostalCode: 5021, Country: `Mexico`, Phone: `(5) 555-4729`, Fax: `(5) 555-3745` }),
                new CustomersDataItem({ ID: `ANTON`, Company: `Antonio Moreno Taquería`, ContactName: `Antonio Moreno`, ContactTitle: `Owner`, Address: `Mataderos 2312`, City: `México D.F.`, Region: `South`, PostalCode: 5023, Country: `Mexico`, Phone: `(5) 555-3932`, Fax: `(5) 555-3745` }),
                new CustomersDataItem({ ID: `AROUT`, Company: `Around the Horn`, ContactName: `Thomas Hardy`, ContactTitle: `Sales Representative`, Address: `120 Hanover Sq.`, City: `London`, Region: `East`, PostalCode: 22000, Country: `UK`, Phone: `(171) 555-7788`, Fax: `(171) 555-6750` }),
                new CustomersDataItem({ ID: `BERGS`, Company: `Berglunds snabbköp`, ContactName: `Christina Berglund`, ContactTitle: `Order Administrator`, Address: `Berguvsvägen 8`, City: `Luleå`, Region: `South`, PostalCode: 17000, Country: `Sweden`, Phone: `0921-12 34 65`, Fax: `0921-12 34 67` }),
                new CustomersDataItem({ ID: `BLAUS`, Company: `Blauer See Delikatessen`, ContactName: `Hanna Moos`, ContactTitle: `Sales Representative`, Address: `Forsterstr. 57`, City: `Mannheim`, Region: `East`, PostalCode: 68306, Country: `Germany`, Phone: `0621-08460`, Fax: `0621-08924` }),
                new CustomersDataItem({ ID: `BLONP`, Company: `Blondesddsl père et fils`, ContactName: `Frédérique Citeaux`, ContactTitle: `Marketing Manager`, Address: `24, place Kléber`, City: `Strasbourg`, Region: `East`, PostalCode: 67000, Country: `France`, Phone: `88.60.15.31`, Fax: `88.60.15.32` }),
                new CustomersDataItem({ ID: `BOLID`, Company: `Bólido Comidas preparadas`, ContactName: `Martín Sommer`, ContactTitle: `Owner`, Address: `C/ Araquil, 67`, City: `Madrid`, Region: `East`, PostalCode: 28023, Country: `Spain`, Phone: `(91) 555 22 82`, Fax: `(91) 555 91 99` }),
                new CustomersDataItem({ ID: `BONAP`, Company: `Bon app'`, ContactName: `Laurence Lebihan`, ContactTitle: `Owner`, Address: `12, rue des Bouchers`, City: `Marseille`, Region: `West`, PostalCode: 13008, Country: `France`, Phone: `91.24.45.40`, Fax: `91.24.45.41` }),
                new CustomersDataItem({ ID: `BOTTM`, Company: `Bottom-Dollar Markets`, ContactName: `Elizabeth Lincoln`, ContactTitle: `Accounting Manager`, Address: `23 Tsawassen Blvd.`, City: `Tsawassen`, Region: `BC`, PostalCode: 28000, Country: `Canada`, Phone: `(604) 555-4729`, Fax: `(604) 555-3745` }),
                new CustomersDataItem({ ID: `BSBEV`, Company: `B's Beverages`, ContactName: `Victoria Ashworth`, ContactTitle: `Sales Representative`, Address: `Fauntleroy Circus`, City: `London`, Region: `South`, PostalCode: 10000, Country: `UK`, Phone: `(171) 555-1212`, Fax: `(5) 555-3745` }),
                new CustomersDataItem({ ID: `CACTU`, Company: `Cactus Comidas para llevar`, ContactName: `Patricio Simpson`, ContactTitle: `Sales Agent`, Address: `Cerrito 333`, City: `Buenos Aires`, Region: `East`, PostalCode: 1010, Country: `Argentina`, Phone: `(1) 135-5555`, Fax: `(1) 135-4892` }),
                new CustomersDataItem({ ID: `CENTC`, Company: `Centro comercial Moctezuma`, ContactName: `Francisco Chang`, ContactTitle: `Marketing Manager`, Address: `Sierras de Granada 9993`, City: `México D.F.`, Region: `South`, PostalCode: 5022, Country: `Mexico`, Phone: `(5) 555-3392`, Fax: `(5) 555-7293` }),
                new CustomersDataItem({ ID: `CHOPS`, Company: `Chop-suey Chinese`, ContactName: `Yang Wang`, ContactTitle: `Owner`, Address: `Hauptstr. 29`, City: `Bern`, Region: `East`, PostalCode: 3012, Country: `Switzerland`, Phone: `0452-076545`, Fax: `(5) 555-3745` }),
                new CustomersDataItem({ ID: `COMMI`, Company: `Comércio Mineiro`, ContactName: `Pedro Afonso`, ContactTitle: `Sales Associate`, Address: `Av. dos Lusíadas, 23`, City: `Sao Paulo`, Region: `SP`, PostalCode: 34000, Country: `Brazil`, Phone: `(11) 555-7647`, Fax: `(5) 555-3745` }),
                new CustomersDataItem({ ID: `CONSH`, Company: `Consolidated Holdings`, ContactName: `Elizabeth Brown`, ContactTitle: `Sales Representative`, Address: `Berkeley Gardens 12 Brewery`, City: `London`, Region: `South`, PostalCode: 27000, Country: `UK`, Phone: `(171) 555-2282`, Fax: `(171) 555-9199` }),
                new CustomersDataItem({ ID: `DRACD`, Company: `Drachenblut Delikatessen`, ContactName: `Sven Ottlieb`, ContactTitle: `Order Administrator`, Address: `Walserweg 21`, City: `Aachen`, Region: `South`, PostalCode: 52066, Country: `Germany`, Phone: `0241-039123`, Fax: `0241-059428` }),
                new CustomersDataItem({ ID: `DUMON`, Company: `Du monde entier`, ContactName: `Janine Labrune`, ContactTitle: `Owner`, Address: `67, rue des Cinquante Otages`, City: `Nantes`, Region: `East`, PostalCode: 44000, Country: `France`, Phone: `40.67.88.88`, Fax: `40.67.89.89` }),
                new CustomersDataItem({ ID: `EASTC`, Company: `Eastern Connection`, ContactName: `Ann Devon`, ContactTitle: `Sales Agent`, Address: `35 King George`, City: `London`, Region: `East`, PostalCode: 41000, Country: `UK`, Phone: `(171) 555-0297`, Fax: `(171) 555-3373` }),
                new CustomersDataItem({ ID: `ERNSH`, Company: `Ernst Handel`, ContactName: `Roland Mendel`, ContactTitle: `Sales Manager`, Address: `Kirchgasse 6`, City: `Graz`, Region: `South`, PostalCode: 8010, Country: `Austria`, Phone: `7675-3425`, Fax: `7675-3426` }),
                new CustomersDataItem({ ID: `FAMIA`, Company: `Familia Arquibaldo`, ContactName: `Aria Cruz`, ContactTitle: `Marketing Assistant`, Address: `Rua Orós, 92`, City: `Sao Paulo`, Region: `SP`, PostalCode: 27000, Country: `Brazil`, Phone: `(11) 555-9857`, Fax: `(5) 555-3745` }),
                new CustomersDataItem({ ID: `FISSA`, Company: `FISSA Fabrica Inter. Salchichas S.A.`, ContactName: `Diego Roel`, ContactTitle: `Accounting Manager`, Address: `C/ Moralzarzal, 86`, City: `Madrid`, Region: `East`, PostalCode: 28034, Country: `Spain`, Phone: `(91) 555 94 44`, Fax: `(91) 555 55 93` }),
                new CustomersDataItem({ ID: `FOLIG`, Company: `Folies gourmandes`, ContactName: `Martine Rancé`, ContactTitle: `Assistant Sales Agent`, Address: `184, chaussée de Tournai`, City: `Lille`, Region: `South`, PostalCode: 59000, Country: `France`, Phone: `20.16.10.16`, Fax: `20.16.10.17` }),
                new CustomersDataItem({ ID: `FOLKO`, Company: `Folk och fä HB`, ContactName: `Maria Larsson`, ContactTitle: `Owner`, Address: `Åkergatan 24`, City: `Bräcke`, Region: `East`, PostalCode: 36000, Country: `Sweden`, Phone: `0695-34 67 21`, Fax: `0695 33-4455` }),
                new CustomersDataItem({ ID: `FRANK`, Company: `Frankenversand`, ContactName: `Peter Franken`, ContactTitle: `Marketing Manager`, Address: `Berliner Platz 43`, City: `München`, Region: `East`, PostalCode: 80805, Country: `Germany`, Phone: `089-0877310`, Fax: `089-0877451` }),
                new CustomersDataItem({ ID: `FRANR`, Company: `France restauration`, ContactName: `Carine Schmitt`, ContactTitle: `Marketing Manager`, Address: `54, rue Royale`, City: `Nantes`, Region: `South`, PostalCode: 44000, Country: `France`, Phone: `40.32.21.21`, Fax: `40.32.21.20` }),
                new CustomersDataItem({ ID: `FRANS`, Company: `Franchi S.p.A.`, ContactName: `Paolo Accorti`, ContactTitle: `Sales Representative`, Address: `Via Monte Bianco 34`, City: `Torino`, Region: `East`, PostalCode: 10100, Country: `Italy`, Phone: `011-4988260`, Fax: `011-4988261` }),
            ];
            super(...newItems.slice(0));
        }
    }
}
tsコピー

import 'igniteui-webcomponents-grids/grids/combined';
import { IgcGridComponent } from 'igniteui-webcomponents-grids/grids';
import { CustomersDataItem, CustomersData } from './CustomersData';
import { IgcRowSelectionEventArgs } from 'igniteui-webcomponents-grids/grids';
import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
import "./index.css";



export class Sample {

    private grid: IgcGridComponent
    private _bind: () => void;

    constructor() {
        var grid = this.grid = document.getElementById('grid') as IgcGridComponent;
        this.webGridColumnResized = this.webGridColumnResized.bind(this);

        this._bind = () => {
            grid.data = this.customersData;
            grid.addEventListener("columnResized", this.webGridColumnResized);
        }
        this._bind();
    }

    private _customersData: CustomersData = null;
    public get customersData(): CustomersData {
        if (this._customersData == null)
        {
            this._customersData = new CustomersData();
        }
        return this._customersData;
    }

    public webGridColumnResized(args: CustomEvent<IgcRowSelectionEventArgs>): void {
        //var col = args.detail.column;
        //var pWidth = args.detail.prevWidth;
        //var nWidth = args.detail.newWidth;
    }

}

new Sample();
tsコピー

<!DOCTYPE html>
<html>
  <head>
    <title>Sample | Ignite UI | Web Components | infragistics</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
    <link rel="stylesheet" href="/src/index.css" type="text/css" />

  </head>

  <body>
    <div id="root">

<div class="container sample ig-typography">

    <div class="container fill">
        <igc-grid
        auto-generate="false"
        id="grid"
        name="grid"
        id="grid">
            <igc-column
            field="ID"
            header="ID">
            </igc-column>
            <igc-column
            field="Company"
            header="Company"
            resizable="true">
            </igc-column>
            <igc-column
            field="ContactName"
            header="Name"
            min-width="60px"
            max-width="230px"
            resizable="true">
            </igc-column>
            <igc-column
            field="ContactTitle"
            header="Title"
            resizable="true">
            </igc-column>
            <igc-column
            field="Address"
            header="Address"
            resizable="true">
            </igc-column>
            <igc-column
            field="City"
            header="City">
            </igc-column>
            <igc-column
            field="Region"
            header="Region"
            resizable="true">
            </igc-column>
            <igc-column
            field="PostalCode"
            header="Postal Code"
            resizable="true">
            </igc-column>
            <igc-column
            field="Country"
            header="Country"
            resizable="true">
            </igc-column>
            <igc-column
            field="Phone"
            header="Phone"
            resizable="true">
            </igc-column>
        </igc-grid>
    </div>
</div>

    </div>

    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>
  </body>
</html>htmlコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */

cssコピー

Edit in: Codesandbox

열 크기 조정은 열 수준별로 사용하도록 설정되며, 이는 크기 조정이 IgcGridComponent 가능한 열과 크기 조정이 불가능한 열이 혼합될 수 있음을 의미합니다. 이것은 의 입력 IgcColumnComponent을 resizable 통해 수행됩니다.

<igc-column field="ID" width="100px" resizable="true"></igc-column>
html

를 구독할 수 있습니다. ColumnResized의 이벤트 IgcGridComponent 열의 크기가 조정될 때 일부 사용자 지정 논리를 구현합니다. 이전 및 새 열 너비와 함께 IgcColumnComponent 객체는 이벤트 인수를 통해 노출됩니다.

<igc-grid id="grid" auto-generate="false">
    <igc-column field="ID" width="100px" resizable="true"></igc-column>
    <igc-column field="CompanyName" width="100px" resizable="true"></igc-column>
</igc-grid>
html

constructor() {
    var grid = this.grid = document.getElementById('grid') as IgcGridComponent;
    grid1.data = this.data;
    grid1.columnResized = this.onResize;
}

public onResize(event) {
    this.col = event.column;
    this.pWidth = event.prevWidth;
    this.nWidth = event.newWidth;
}

ts

픽셀/백분율 단위로 열 크기 조정

사용자 시나리오에 따라 열 너비는 픽셀, 백분율 또는 두 가지의 혼합으로 정의될 수 있습니다. 이러한 모든 시나리오는 열 크기 조정 기능으로 지원됩니다. 기본적으로 열에 너비가 설정되지 않은 경우 너비가 픽셀 단위로 설정된 사용 가능한 공간에 맞춰집니다.

이는 다음 구성이 가능함을 의미합니다.

<igc-grid id="grid" auto-generate="false">
    <igc-column field="ID" width="10%" resizable="true"></igc-column>
    <igc-column field="CompanyName" width="100px" resizable="true"></igc-column>
    <igc-column field="ContactTitle" resizable="true"></igc-column>
</igc-grid>
html

픽셀 및 백분율로 설정된 열에 대해 크기 조정이 작동하는 방식에는 약간의 차이가 있습니다.

픽셀

너비(픽셀)로 열 크기를 조정하는 작업은 열 크기에서 마우스 이동의 수평 크기를 직접 더하거나 빼는 방식으로 수행됩니다.

백분율

너비(%)로 열 크기를 조정할 때 마우스 이동의 수평 크기(픽셀)는 대략 그리드 너비에 대한 백분율 크기로 변환됩니다. 열은 계속 반응하며 향후 그리드 크기 조정은 여전히 열에 반영됩니다.

열 크기 조정 제한

허용되는 최소 및 최대 열 너비를 구성할 수도 있습니다. 이것은 의 및 maxWidth 입력을 IgcColumnComponent 통해 minWidth 수행됩니다. 이 경우 크기 조정 표시기 끌기 작업이 제한되어 and maxWidth로 정의된 minWidth 경계 외부에서 열의 크기를 조정할 수 없음을 사용자에게 알립니다.

<igc-column field="ID" width="100px" resizable="true"
            min-width="60px" max-width="230px"></igc-column>
html

최소 및 최대 열 너비 값 유형(픽셀 또는 백분율)을 혼합하는 것이 허용됩니다. 최소값과 최대값에 대해 설정된 값이 백분율로 설정되면 각 열 크기는 픽셀과 유사한 정확한 크기로 제한됩니다.

이는 다음과 같은 구성이 가능함을 의미합니다.

<igc-column field="ID" width="10%" resizable="true"
            min-width="60px" max-width="230px"></igc-column>
html

또는

<igc-column field="ID" width="100px" resizable="true"
            min-width="5%" max-width="15%"></igc-column>
html

두 번 클릭 시 열 크기 자동 조정

헤더의 오른쪽을 두 번 클릭하면 각 열의 크기가 자동으로 조정될 수 있습니다. 열의 크기는 헤더 자체를 포함하여 현재 표시되는 가장 긴 셀 값으로 조정됩니다. 이 동작은 기본적으로 활성화되어 있으며 추가 구성이 필요하지 않습니다. 그러나 해당 열에 maxWidth 설정되어 있고 새 너비가 해당 maxWidth 값을 초과하는 경우 열 크기가 자동으로 조정되지 않습니다. 이 경우 열은 미리 설정된 maxWidth 값에 따라 크기가 조정됩니다.

또한 exposed autosize method on을 사용하여 동적으로 열 크기를 자동으로 조정할 수도 있습니다 IgcColumnComponent.

constructor() {
    var id = this.id = document.getElementById('ID') as IgcColumnComponent;
    id.autosize();
}
typescript

초기화 시 열 자동 크기 조정

너비를 '자동'으로 설정하여 초기화 시 각 width 크기가 자동으로 조정되도록 설정할 수 있습니다.

<igc-column width='auto'>
html

열이 뷰에서 처음 초기화되면 너비가 표시되는 가장 긴 셀이나 머리글의 크기로 확인됩니다. 표시되는 행 외부에 있는 셀은 포함되지 않습니다.

이 접근 방식은 초기화 후 자동 크기 조정보다 성능이 더 최적화되어 있으며 특히 많은 수의 열 크기를 자동 조정해야 하는 경우에 권장됩니다.

EXAMPLE

DATA

TS

HTML

CSS

export class CustomersDataItem {
    public constructor(init: Partial<CustomersDataItem>) {
        Object.assign(this, init);
    }

    public ID: string;
    public Company: string;
    public ContactName: string;
    public ContactTitle: string;
    public Address: string;
    public City: string;
    public Region: string;
    public PostalCode: number;
    public Country: string;
    public Phone: string;
    public Fax: string;

}
export class CustomersData extends Array<CustomersDataItem> {
    public constructor(items: Array<CustomersDataItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new CustomersDataItem({ ID: `ALFKI`, Company: `Alfreds Futterkiste`, ContactName: `Maria Anders`, ContactTitle: `Sales Representative`, Address: `Obere Str. 57`, City: `Berlin`, Region: `East`, PostalCode: 12209, Country: `Germany`, Phone: `030-0074321`, Fax: `030-0076545` }),
                new CustomersDataItem({ ID: `ANATR`, Company: `Ana Trujillo Emparedados y helados`, ContactName: `Ana Trujillo`, ContactTitle: `Owner`, Address: `Avda. de la Constitución 2222`, City: `México D.F.`, Region: `South`, PostalCode: 5021, Country: `Mexico`, Phone: `(5) 555-4729`, Fax: `(5) 555-3745` }),
                new CustomersDataItem({ ID: `ANTON`, Company: `Antonio Moreno Taquería`, ContactName: `Antonio Moreno`, ContactTitle: `Owner`, Address: `Mataderos 2312`, City: `México D.F.`, Region: `South`, PostalCode: 5023, Country: `Mexico`, Phone: `(5) 555-3932`, Fax: `(5) 555-3745` }),
                new CustomersDataItem({ ID: `AROUT`, Company: `Around the Horn`, ContactName: `Thomas Hardy`, ContactTitle: `Sales Representative`, Address: `120 Hanover Sq.`, City: `London`, Region: `East`, PostalCode: 22000, Country: `UK`, Phone: `(171) 555-7788`, Fax: `(171) 555-6750` }),
                new CustomersDataItem({ ID: `BERGS`, Company: `Berglunds snabbköp`, ContactName: `Christina Berglund`, ContactTitle: `Order Administrator`, Address: `Berguvsvägen 8`, City: `Luleå`, Region: `South`, PostalCode: 17000, Country: `Sweden`, Phone: `0921-12 34 65`, Fax: `0921-12 34 67` }),
                new CustomersDataItem({ ID: `BLAUS`, Company: `Blauer See Delikatessen`, ContactName: `Hanna Moos`, ContactTitle: `Sales Representative`, Address: `Forsterstr. 57`, City: `Mannheim`, Region: `East`, PostalCode: 68306, Country: `Germany`, Phone: `0621-08460`, Fax: `0621-08924` }),
                new CustomersDataItem({ ID: `BLONP`, Company: `Blondesddsl père et fils`, ContactName: `Frédérique Citeaux`, ContactTitle: `Marketing Manager`, Address: `24, place Kléber`, City: `Strasbourg`, Region: `East`, PostalCode: 67000, Country: `France`, Phone: `88.60.15.31`, Fax: `88.60.15.32` }),
                new CustomersDataItem({ ID: `BOLID`, Company: `Bólido Comidas preparadas`, ContactName: `Martín Sommer`, ContactTitle: `Owner`, Address: `C/ Araquil, 67`, City: `Madrid`, Region: `East`, PostalCode: 28023, Country: `Spain`, Phone: `(91) 555 22 82`, Fax: `(91) 555 91 99` }),
                new CustomersDataItem({ ID: `BONAP`, Company: `Bon app'`, ContactName: `Laurence Lebihan`, ContactTitle: `Owner`, Address: `12, rue des Bouchers`, City: `Marseille`, Region: `West`, PostalCode: 13008, Country: `France`, Phone: `91.24.45.40`, Fax: `91.24.45.41` }),
                new CustomersDataItem({ ID: `BOTTM`, Company: `Bottom-Dollar Markets`, ContactName: `Elizabeth Lincoln`, ContactTitle: `Accounting Manager`, Address: `23 Tsawassen Blvd.`, City: `Tsawassen`, Region: `BC`, PostalCode: 28000, Country: `Canada`, Phone: `(604) 555-4729`, Fax: `(604) 555-3745` }),
                new CustomersDataItem({ ID: `BSBEV`, Company: `B's Beverages`, ContactName: `Victoria Ashworth`, ContactTitle: `Sales Representative`, Address: `Fauntleroy Circus`, City: `London`, Region: `South`, PostalCode: 10000, Country: `UK`, Phone: `(171) 555-1212`, Fax: `(5) 555-3745` }),
                new CustomersDataItem({ ID: `CACTU`, Company: `Cactus Comidas para llevar`, ContactName: `Patricio Simpson`, ContactTitle: `Sales Agent`, Address: `Cerrito 333`, City: `Buenos Aires`, Region: `East`, PostalCode: 1010, Country: `Argentina`, Phone: `(1) 135-5555`, Fax: `(1) 135-4892` }),
                new CustomersDataItem({ ID: `CENTC`, Company: `Centro comercial Moctezuma`, ContactName: `Francisco Chang`, ContactTitle: `Marketing Manager`, Address: `Sierras de Granada 9993`, City: `México D.F.`, Region: `South`, PostalCode: 5022, Country: `Mexico`, Phone: `(5) 555-3392`, Fax: `(5) 555-7293` }),
                new CustomersDataItem({ ID: `CHOPS`, Company: `Chop-suey Chinese`, ContactName: `Yang Wang`, ContactTitle: `Owner`, Address: `Hauptstr. 29`, City: `Bern`, Region: `East`, PostalCode: 3012, Country: `Switzerland`, Phone: `0452-076545`, Fax: `(5) 555-3745` }),
                new CustomersDataItem({ ID: `COMMI`, Company: `Comércio Mineiro`, ContactName: `Pedro Afonso`, ContactTitle: `Sales Associate`, Address: `Av. dos Lusíadas, 23`, City: `Sao Paulo`, Region: `SP`, PostalCode: 34000, Country: `Brazil`, Phone: `(11) 555-7647`, Fax: `(5) 555-3745` }),
                new CustomersDataItem({ ID: `CONSH`, Company: `Consolidated Holdings`, ContactName: `Elizabeth Brown`, ContactTitle: `Sales Representative`, Address: `Berkeley Gardens 12 Brewery`, City: `London`, Region: `South`, PostalCode: 27000, Country: `UK`, Phone: `(171) 555-2282`, Fax: `(171) 555-9199` }),
                new CustomersDataItem({ ID: `DRACD`, Company: `Drachenblut Delikatessen`, ContactName: `Sven Ottlieb`, ContactTitle: `Order Administrator`, Address: `Walserweg 21`, City: `Aachen`, Region: `South`, PostalCode: 52066, Country: `Germany`, Phone: `0241-039123`, Fax: `0241-059428` }),
                new CustomersDataItem({ ID: `DUMON`, Company: `Du monde entier`, ContactName: `Janine Labrune`, ContactTitle: `Owner`, Address: `67, rue des Cinquante Otages`, City: `Nantes`, Region: `East`, PostalCode: 44000, Country: `France`, Phone: `40.67.88.88`, Fax: `40.67.89.89` }),
                new CustomersDataItem({ ID: `EASTC`, Company: `Eastern Connection`, ContactName: `Ann Devon`, ContactTitle: `Sales Agent`, Address: `35 King George`, City: `London`, Region: `East`, PostalCode: 41000, Country: `UK`, Phone: `(171) 555-0297`, Fax: `(171) 555-3373` }),
                new CustomersDataItem({ ID: `ERNSH`, Company: `Ernst Handel`, ContactName: `Roland Mendel`, ContactTitle: `Sales Manager`, Address: `Kirchgasse 6`, City: `Graz`, Region: `South`, PostalCode: 8010, Country: `Austria`, Phone: `7675-3425`, Fax: `7675-3426` }),
                new CustomersDataItem({ ID: `FAMIA`, Company: `Familia Arquibaldo`, ContactName: `Aria Cruz`, ContactTitle: `Marketing Assistant`, Address: `Rua Orós, 92`, City: `Sao Paulo`, Region: `SP`, PostalCode: 27000, Country: `Brazil`, Phone: `(11) 555-9857`, Fax: `(5) 555-3745` }),
                new CustomersDataItem({ ID: `FISSA`, Company: `FISSA Fabrica Inter. Salchichas S.A.`, ContactName: `Diego Roel`, ContactTitle: `Accounting Manager`, Address: `C/ Moralzarzal, 86`, City: `Madrid`, Region: `East`, PostalCode: 28034, Country: `Spain`, Phone: `(91) 555 94 44`, Fax: `(91) 555 55 93` }),
                new CustomersDataItem({ ID: `FOLIG`, Company: `Folies gourmandes`, ContactName: `Martine Rancé`, ContactTitle: `Assistant Sales Agent`, Address: `184, chaussée de Tournai`, City: `Lille`, Region: `South`, PostalCode: 59000, Country: `France`, Phone: `20.16.10.16`, Fax: `20.16.10.17` }),
                new CustomersDataItem({ ID: `FOLKO`, Company: `Folk och fä HB`, ContactName: `Maria Larsson`, ContactTitle: `Owner`, Address: `Åkergatan 24`, City: `Bräcke`, Region: `East`, PostalCode: 36000, Country: `Sweden`, Phone: `0695-34 67 21`, Fax: `0695 33-4455` }),
                new CustomersDataItem({ ID: `FRANK`, Company: `Frankenversand`, ContactName: `Peter Franken`, ContactTitle: `Marketing Manager`, Address: `Berliner Platz 43`, City: `München`, Region: `East`, PostalCode: 80805, Country: `Germany`, Phone: `089-0877310`, Fax: `089-0877451` }),
                new CustomersDataItem({ ID: `FRANR`, Company: `France restauration`, ContactName: `Carine Schmitt`, ContactTitle: `Marketing Manager`, Address: `54, rue Royale`, City: `Nantes`, Region: `South`, PostalCode: 44000, Country: `France`, Phone: `40.32.21.21`, Fax: `40.32.21.20` }),
                new CustomersDataItem({ ID: `FRANS`, Company: `Franchi S.p.A.`, ContactName: `Paolo Accorti`, ContactTitle: `Sales Representative`, Address: `Via Monte Bianco 34`, City: `Torino`, Region: `East`, PostalCode: 10100, Country: `Italy`, Phone: `011-4988260`, Fax: `011-4988261` }),
            ];
            super(...newItems.slice(0));
        }
    }
}
tsコピー

import 'igniteui-webcomponents-grids/grids/combined';
import { IgcGridComponent } from 'igniteui-webcomponents-grids/grids';
import { CustomersDataItem, CustomersData } from './CustomersData';
import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
import "./index.css";



export class Sample {

    private grid: IgcGridComponent
    private _bind: () => void;

    constructor() {
        var grid = this.grid = document.getElementById('grid') as IgcGridComponent;

        this._bind = () => {
            grid.data = this.customersData;
        }
        this._bind();
    }

    private _customersData: CustomersData = null;
    public get customersData(): CustomersData {
        if (this._customersData == null)
        {
            this._customersData = new CustomersData();
        }
        return this._customersData;
    }

}

new Sample();
tsコピー

<!DOCTYPE html>
<html>
  <head>
    <title>Sample | Ignite UI | Web Components | infragistics</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
    <link rel="stylesheet" href="/src/index.css" type="text/css" />

  </head>

  <body>
    <div id="root">

<div class="container sample ig-typography">

    <div class="container fill">
        <igc-grid
        auto-generate="false"
        primary-key="ProductID"
        name="grid"
        id="grid">
            <igc-column
            field="ID"
            width="auto"
            resizable="true">
            </igc-column>
            <igc-column
            field="Company"
            header="Company Name"
            width="auto"
            resizable="true">
            </igc-column>
            <igc-column
            field="ContactName"
            header="Name"
            width="auto"
            resizable="true">
            </igc-column>
            <igc-column
            field="ContactTitle"
            header="Title"
            width="auto"
            resizable="true">
            </igc-column>
            <igc-column
            field="Address"
            width="auto"
            resizable="true">
            </igc-column>
            <igc-column
            field="City"
            width="auto"
            resizable="true">
            </igc-column>
            <igc-column
            field="Region"
            width="auto"
            resizable="true">
            </igc-column>
            <igc-column
            field="PostalCode"
            header="Postal Code"
            width="auto"
            resizable="true">
            </igc-column>
            <igc-column
            field="Phone"
            width="auto"
            resizable="true">
            </igc-column>
            <igc-column
            field="Fax"
            width="auto"
            resizable="true">
            </igc-column>
        </igc-grid>
    </div>
</div>

    </div>

    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>
  </body>
</html>htmlコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */

cssコピー

Edit in: Codesandbox

스타일링

사전 정의된 테마 외에도 사용 가능한 CSS 속성 중 일부를 설정하여 그리드를 추가로 사용자 정의할 수 있습니다. 크기 조정 핸들의 색상을 변경하려면 먼저 그리드에 대한 클래스를 설정해야 합니다.

<igc-grid class="grid"></igc-grid>
html

그런 다음 해당 클래스에 대한 관련 CSS 속성을 설정합니다.

.grid {
    --ig-grid-resize-line-color: #f35b04;
}
css

데모

EXAMPLE

DATA

TS

HTML

CSS

export class AthletesDataItem {
    public constructor(init: Partial<AthletesDataItem>) {
        Object.assign(this, init);
    }

    public Id: number;
    public Avatar: string;
    public Position: string;
    public Name: string;
    public AthleteNumber: number;
    public BeatsPerMinute: number;
    public TopSpeed: number;
    public Registered: string;
    public TrackProgress: number;
    public CountryFlag: string;
    public CountryName: string;

}
export class AthletesData extends Array<AthletesDataItem> {
    public constructor(items: Array<AthletesDataItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new AthletesDataItem({ Id: 100, Avatar: `https://static.infragistics.com/xplatform/images/people/women/20.jpg`, Position: `current`, Name: `Alexis Walker`, AthleteNumber: 43183, BeatsPerMinute: 103, TopSpeed: 5.8, Registered: `2017-08-07T10:35:06-03:00`, TrackProgress: 45, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/gh.png`, CountryName: `Ghana` }),
                new AthletesDataItem({ Id: 101, Avatar: `https://static.infragistics.com/xplatform/images/people/women/71.jpg`, Position: `down`, Name: `Lavínia Silva`, AthleteNumber: 33994, BeatsPerMinute: 93, TopSpeed: 5.6, Registered: `2017-03-22T08:55:46-02:00`, TrackProgress: 45, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/no.png`, CountryName: `Norway` }),
                new AthletesDataItem({ Id: 105, Avatar: `https://static.infragistics.com/xplatform/images/people/men/5.jpg`, Position: `down`, Name: `Samu Hokkanen`, AthleteNumber: 22469, BeatsPerMinute: 106, TopSpeed: 5.5, Registered: `2017-06-29T04:58:27-03:00`, TrackProgress: 25, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/az.png`, CountryName: `Azerbaijan` }),
                new AthletesDataItem({ Id: 107, Avatar: `https://static.infragistics.com/xplatform/images/people/women/92.jpg`, Position: `down`, Name: `Megan Webb`, AthleteNumber: 30713, BeatsPerMinute: 93, TopSpeed: 5.6, Registered: `2017-08-20T09:26:51-03:00`, TrackProgress: 45, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/mt.png`, CountryName: `Malta` }),
                new AthletesDataItem({ Id: 107, Avatar: `https://static.infragistics.com/xplatform/images/people/men/33.jpg`, Position: `up`, Name: `Pedro Marquez`, AthleteNumber: 16169, BeatsPerMinute: 97, TopSpeed: 5.4, Registered: `2017-11-11T05:14:31-02:00`, TrackProgress: 60, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/mw.png`, CountryName: `Malawi` }),
                new AthletesDataItem({ Id: 108, Avatar: `https://static.infragistics.com/xplatform/images/people/men/31.jpg`, Position: `up`, Name: `Noah Bergeron`, AthleteNumber: 35139, BeatsPerMinute: 110, TopSpeed: 5.6, Registered: `2017-06-23T01:21:21-03:00`, TrackProgress: 45, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/ci.png`, CountryName: `Cote DIvoire` }),
                new AthletesDataItem({ Id: 110, Avatar: `https://static.infragistics.com/xplatform/images/people/women/15.jpg`, Position: `current`, Name: `Annabell Brand`, AthleteNumber: 39233, BeatsPerMinute: 93, TopSpeed: 5.7, Registered: `2017-03-01T12:21:24-02:00`, TrackProgress: 60, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/pg.png`, CountryName: `Papua New Guinea` }),
                new AthletesDataItem({ Id: 110, Avatar: `https://static.infragistics.com/xplatform/images/people/women/13.jpg`, Position: `current`, Name: `Özsu Keçeci`, AthleteNumber: 29403, BeatsPerMinute: 106, TopSpeed: 4.2, Registered: `2017-01-19T11:34:13-02:00`, TrackProgress: 45, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/lv.png`, CountryName: `Latvia` }),
                new AthletesDataItem({ Id: 110, Avatar: `https://static.infragistics.com/xplatform/images/people/women/26.jpg`, Position: `down`, Name: `Emilie Morin`, AthleteNumber: 26164, BeatsPerMinute: 98, TopSpeed: 4.9, Registered: `2017-02-01T04:18:19-02:00`, TrackProgress: 60, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/kg.png`, CountryName: `Kyrgyzstan` }),
                new AthletesDataItem({ Id: 111, Avatar: `https://static.infragistics.com/xplatform/images/people/men/23.jpg`, Position: `up`, Name: `Connor Green`, AthleteNumber: 44716, BeatsPerMinute: 95, TopSpeed: 4.4, Registered: `2017-06-30T11:23:25-03:00`, TrackProgress: 60, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/bb.png`, CountryName: `Barbados` }),
                new AthletesDataItem({ Id: 112, Avatar: `https://static.infragistics.com/xplatform/images/people/women/53.jpg`, Position: `down`, Name: `Karen Shaw`, AthleteNumber: 31048, BeatsPerMinute: 107, TopSpeed: 5.7, Registered: `2017-05-15T09:25:03-03:00`, TrackProgress: 45, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/ec.png`, CountryName: `Ecuador` }),
                new AthletesDataItem({ Id: 113, Avatar: `https://static.infragistics.com/xplatform/images/people/women/36.jpg`, Position: `current`, Name: `Marialba Nascimento`, AthleteNumber: 47061, BeatsPerMinute: 108, TopSpeed: 5.2, Registered: `2017-09-19T05:47:21-03:00`, TrackProgress: 25, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/tn.png`, CountryName: `Tunisia` }),
                new AthletesDataItem({ Id: 113, Avatar: `https://static.infragistics.com/xplatform/images/people/men/37.jpg`, Position: `current`, Name: `Nick Naumann`, AthleteNumber: 25566, BeatsPerMinute: 109, TopSpeed: 5.9, Registered: `2017-07-12T09:01:11-03:00`, TrackProgress: 25, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/sz.png`, CountryName: `Swaziland` }),
                new AthletesDataItem({ Id: 116, Avatar: `https://static.infragistics.com/xplatform/images/people/women/1.jpg`, Position: `down`, Name: `Sevcan Kollen`, AthleteNumber: 13728, BeatsPerMinute: 104, TopSpeed: 5.3, Registered: `2017-09-08T08:29:08-03:00`, TrackProgress: 60, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/gt.png`, CountryName: `Guatemala` }),
                new AthletesDataItem({ Id: 121, Avatar: `https://static.infragistics.com/xplatform/images/people/men/48.jpg`, Position: `current`, Name: `Väinö Salmi`, AthleteNumber: 29839, BeatsPerMinute: 107, TopSpeed: 5.5, Registered: `2017-10-21T05:57:02-03:00`, TrackProgress: 60, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/gw.png`, CountryName: `Guinea-Bissau` }),
                new AthletesDataItem({ Id: 121, Avatar: `https://static.infragistics.com/xplatform/images/people/men/31.jpg`, Position: `down`, Name: `Ivan Ivanov`, AthleteNumber: 11054, BeatsPerMinute: 108, TopSpeed: 5.7, Registered: `2017-04-18T08:03:01-03:00`, TrackProgress: 75, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/bg.png`, CountryName: `Bulgaria` }),
                new AthletesDataItem({ Id: 121, Avatar: `https://static.infragistics.com/xplatform/images/people/men/45.jpg`, Position: `current`, Name: `Maurice Lambert`, AthleteNumber: 17443, BeatsPerMinute: 96, TopSpeed: 5.6, Registered: `2017-06-05T08:19:32-03:00`, TrackProgress: 60, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/bd.png`, CountryName: `Bangladesh` }),
                new AthletesDataItem({ Id: 122, Avatar: `https://static.infragistics.com/xplatform/images/people/women/71.jpg`, Position: `down`, Name: `Natalie Conrad`, AthleteNumber: 42602, BeatsPerMinute: 108, TopSpeed: 6, Registered: `2017-03-18T06:35:44-02:00`, TrackProgress: 45, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/tt.png`, CountryName: `Trinidad and Tobago` }),
                new AthletesDataItem({ Id: 122, Avatar: `https://static.infragistics.com/xplatform/images/people/men/57.jpg`, Position: `down`, Name: `Jack Jean-baptiste`, AthleteNumber: 40427, BeatsPerMinute: 110, TopSpeed: 4.3, Registered: `2017-11-09T08:50:06-02:00`, TrackProgress: 25, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/cm.png`, CountryName: `Cameroon` }),
                new AthletesDataItem({ Id: 123, Avatar: `https://static.infragistics.com/xplatform/images/people/women/19.jpg`, Position: `down`, Name: `Flora Perez`, AthleteNumber: 23907, BeatsPerMinute: 102, TopSpeed: 5.8, Registered: `2017-04-12T04:16:56-03:00`, TrackProgress: 60, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/pl.png`, CountryName: `Poland` }),
                new AthletesDataItem({ Id: 123, Avatar: `https://static.infragistics.com/xplatform/images/people/women/12.jpg`, Position: `up`, Name: `آنیتا كامياران`, AthleteNumber: 18980, BeatsPerMinute: 90, TopSpeed: 4.5, Registered: `2017-07-21T06:42:59-03:00`, TrackProgress: 45, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/lb.png`, CountryName: `Lebanon` }),
                new AthletesDataItem({ Id: 123, Avatar: `https://static.infragistics.com/xplatform/images/people/men/31.jpg`, Position: `current`, Name: `Eeli Makinen`, AthleteNumber: 45296, BeatsPerMinute: 106, TopSpeed: 5.2, Registered: `2017-01-06T09:58:02-02:00`, TrackProgress: 25, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/fi.png`, CountryName: `Finland` }),
                new AthletesDataItem({ Id: 124, Avatar: `https://static.infragistics.com/xplatform/images/people/men/98.jpg`, Position: `down`, Name: `Mathieu Mathieu`, AthleteNumber: 10555, BeatsPerMinute: 101, TopSpeed: 5.2, Registered: `2017-01-05T07:28:11-02:00`, TrackProgress: 45, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/uz.png`, CountryName: `Uzbekistan` }),
                new AthletesDataItem({ Id: 124, Avatar: `https://static.infragistics.com/xplatform/images/people/women/19.jpg`, Position: `current`, Name: `Marie Poulsen`, AthleteNumber: 44113, BeatsPerMinute: 109, TopSpeed: 4.7, Registered: `2017-04-15T10:25:21-03:00`, TrackProgress: 25, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/ma.png`, CountryName: `Morocco` }),
                new AthletesDataItem({ Id: 125, Avatar: `https://static.infragistics.com/xplatform/images/people/women/16.jpg`, Position: `current`, Name: `Altiva Alves`, AthleteNumber: 31850, BeatsPerMinute: 106, TopSpeed: 5.1, Registered: `2017-11-09T02:43:54-02:00`, TrackProgress: 60, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/km.png`, CountryName: `Comoros` }),
                new AthletesDataItem({ Id: 127, Avatar: `https://static.infragistics.com/xplatform/images/people/men/52.jpg`, Position: `down`, Name: `Gerardo Soto`, AthleteNumber: 22958, BeatsPerMinute: 90, TopSpeed: 5, Registered: `2017-06-04T12:52:03-03:00`, TrackProgress: 45, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/co.png`, CountryName: `Colombia` }),
                new AthletesDataItem({ Id: 128, Avatar: `https://static.infragistics.com/xplatform/images/people/women/52.jpg`, Position: `up`, Name: `Sophie Lewis`, AthleteNumber: 46222, BeatsPerMinute: 106, TopSpeed: 4.4, Registered: `2017-02-20T09:42:07-02:00`, TrackProgress: 45, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/mc.png`, CountryName: `Monaco` }),
                new AthletesDataItem({ Id: 129, Avatar: `https://static.infragistics.com/xplatform/images/people/women/34.jpg`, Position: `up`, Name: `Ella Hansen`, AthleteNumber: 27075, BeatsPerMinute: 101, TopSpeed: 5.1, Registered: `2017-01-05T10:12:42-02:00`, TrackProgress: 60, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/lk.png`, CountryName: `Sri Lanka` }),
                new AthletesDataItem({ Id: 130, Avatar: `https://static.infragistics.com/xplatform/images/people/men/94.jpg`, Position: `up`, Name: `Adem Özdoğan`, AthleteNumber: 45143, BeatsPerMinute: 90, TopSpeed: 5.5, Registered: `2017-02-16T07:11:52-02:00`, TrackProgress: 45, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/tm.png`, CountryName: `Turkmenistan` }),
                new AthletesDataItem({ Id: 130, Avatar: `https://static.infragistics.com/xplatform/images/people/women/24.jpg`, Position: `down`, Name: `آوا احمدی`, AthleteNumber: 44347, BeatsPerMinute: 110, TopSpeed: 4.1, Registered: `2017-06-04T09:04:31-03:00`, TrackProgress: 45, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/cn.png`, CountryName: `China` }),
                new AthletesDataItem({ Id: 131, Avatar: `https://static.infragistics.com/xplatform/images/people/women/61.jpg`, Position: `current`, Name: `Eliza Bishop`, AthleteNumber: 31774, BeatsPerMinute: 96, TopSpeed: 4.7, Registered: `2017-09-22T11:49:02-03:00`, TrackProgress: 45, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/eh.png`, CountryName: `Western Sahara` }),
                new AthletesDataItem({ Id: 131, Avatar: `https://static.infragistics.com/xplatform/images/people/women/61.jpg`, Position: `down`, Name: `Veronika Huber`, AthleteNumber: 18146, BeatsPerMinute: 103, TopSpeed: 5.2, Registered: `2017-07-13T02:23:56-03:00`, TrackProgress: 25, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/to.png`, CountryName: `Tonga` }),
                new AthletesDataItem({ Id: 134, Avatar: `https://static.infragistics.com/xplatform/images/people/women/66.jpg`, Position: `down`, Name: `Anni Waisanen`, AthleteNumber: 32133, BeatsPerMinute: 99, TopSpeed: 5, Registered: `2017-08-17T01:35:09-03:00`, TrackProgress: 25, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/do.png`, CountryName: `Dominican Republic` }),
                new AthletesDataItem({ Id: 135, Avatar: `https://static.infragistics.com/xplatform/images/people/men/84.jpg`, Position: `down`, Name: `Darryl Douglas`, AthleteNumber: 35826, BeatsPerMinute: 96, TopSpeed: 4.6, Registered: `2017-07-20T11:45:52-03:00`, TrackProgress: 25, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/tr.png`, CountryName: `Turkey` }),
                new AthletesDataItem({ Id: 136, Avatar: `https://static.infragistics.com/xplatform/images/people/women/10.jpg`, Position: `down`, Name: `Elaine Matthews`, AthleteNumber: 38574, BeatsPerMinute: 110, TopSpeed: 5.5, Registered: `2017-01-26T11:50:00-02:00`, TrackProgress: 60, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/cv.png`, CountryName: `Cape Verde` }),
                new AthletesDataItem({ Id: 137, Avatar: `https://static.infragistics.com/xplatform/images/people/women/75.jpg`, Position: `up`, Name: `Gloria Caballero`, AthleteNumber: 43379, BeatsPerMinute: 103, TopSpeed: 4.3, Registered: `2017-08-10T08:27:45-03:00`, TrackProgress: 25, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/il.png`, CountryName: `Israel` }),
                new AthletesDataItem({ Id: 137, Avatar: `https://static.infragistics.com/xplatform/images/people/men/80.jpg`, Position: `down`, Name: `Lance Dunn`, AthleteNumber: 10113, BeatsPerMinute: 94, TopSpeed: 4.5, Registered: `2017-03-13T10:51:36-02:00`, TrackProgress: 25, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/cy.png`, CountryName: `Cyprus` }),
                new AthletesDataItem({ Id: 138, Avatar: `https://static.infragistics.com/xplatform/images/people/men/31.jpg`, Position: `down`, Name: `Antoine Mackay`, AthleteNumber: 34547, BeatsPerMinute: 104, TopSpeed: 5, Registered: `2017-08-22T09:11:37-03:00`, TrackProgress: 45, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/ls.png`, CountryName: `Lesotho` }),
                new AthletesDataItem({ Id: 138, Avatar: `https://static.infragistics.com/xplatform/images/people/men/78.jpg`, Position: `current`, Name: `Oscar Calvo`, AthleteNumber: 45078, BeatsPerMinute: 109, TopSpeed: 4.3, Registered: `2017-06-19T10:57:42-03:00`, TrackProgress: 45, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/cu.png`, CountryName: `Cuba` }),
                new AthletesDataItem({ Id: 138, Avatar: `https://static.infragistics.com/xplatform/images/people/men/38.jpg`, Position: `current`, Name: `Derrick Price`, AthleteNumber: 19792, BeatsPerMinute: 94, TopSpeed: 5.6, Registered: `2017-03-19T01:10:55-02:00`, TrackProgress: 25, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/ar.png`, CountryName: `Argentina` }),
                new AthletesDataItem({ Id: 139, Avatar: `https://static.infragistics.com/xplatform/images/people/women/28.jpg`, Position: `current`, Name: `Annabell Barth`, AthleteNumber: 41130, BeatsPerMinute: 103, TopSpeed: 5, Registered: `2017-08-24T11:58:56-03:00`, TrackProgress: 25, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/ht.png`, CountryName: `Haiti` }),
                new AthletesDataItem({ Id: 141, Avatar: `https://static.infragistics.com/xplatform/images/people/men/15.jpg`, Position: `current`, Name: `Miro Korpela`, AthleteNumber: 40544, BeatsPerMinute: 104, TopSpeed: 5.3, Registered: `2017-01-10T07:12:44-02:00`, TrackProgress: 45, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/nl.png`, CountryName: `Netherlands` }),
                new AthletesDataItem({ Id: 142, Avatar: `https://static.infragistics.com/xplatform/images/people/women/63.jpg`, Position: `current`, Name: `Nicoline Thomsen`, AthleteNumber: 36778, BeatsPerMinute: 99, TopSpeed: 5.5, Registered: `2017-03-26T10:04:29-03:00`, TrackProgress: 60, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/bj.png`, CountryName: `Benin` }),
                new AthletesDataItem({ Id: 143, Avatar: `https://static.infragistics.com/xplatform/images/people/men/38.jpg`, Position: `up`, Name: `رضا کوتی`, AthleteNumber: 13640, BeatsPerMinute: 103, TopSpeed: 4.2, Registered: `2017-04-30T02:34:29-03:00`, TrackProgress: 25, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/pk.png`, CountryName: `Pakistan` }),
                new AthletesDataItem({ Id: 144, Avatar: `https://static.infragistics.com/xplatform/images/people/women/57.jpg`, Position: `down`, Name: `Milja Leino`, AthleteNumber: 33563, BeatsPerMinute: 110, TopSpeed: 4.1, Registered: `2017-11-01T10:34:07-02:00`, TrackProgress: 60, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/bf.png`, CountryName: `Burkina Faso` }),
                new AthletesDataItem({ Id: 147, Avatar: `https://static.infragistics.com/xplatform/images/people/men/8.jpg`, Position: `down`, Name: `میلاد یاسمی`, AthleteNumber: 44023, BeatsPerMinute: 104, TopSpeed: 5.2, Registered: `2017-06-10T04:11:01-03:00`, TrackProgress: 60, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/tg.png`, CountryName: `Togo` }),
                new AthletesDataItem({ Id: 150, Avatar: `https://static.infragistics.com/xplatform/images/people/men/52.jpg`, Position: `up`, Name: `Gustav Petersen`, AthleteNumber: 20984, BeatsPerMinute: 107, TopSpeed: 4.6, Registered: `2017-01-01T07:40:19-02:00`, TrackProgress: 25, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/bz.png`, CountryName: `Belize` }),
                new AthletesDataItem({ Id: 151, Avatar: `https://static.infragistics.com/xplatform/images/people/women/88.jpg`, Position: `current`, Name: `Charlotte Mills`, AthleteNumber: 49829, BeatsPerMinute: 92, TopSpeed: 5.3, Registered: `2017-05-10T04:33:10-03:00`, TrackProgress: 60, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/mg.png`, CountryName: `Madagascar` }),
                new AthletesDataItem({ Id: 154, Avatar: `https://static.infragistics.com/xplatform/images/people/women/54.jpg`, Position: `down`, Name: `Rhonda Simmmons`, AthleteNumber: 37139, BeatsPerMinute: 96, TopSpeed: 5.1, Registered: `2017-07-03T05:39:45-03:00`, TrackProgress: 60, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/nr.png`, CountryName: `Nauru` }),
                new AthletesDataItem({ Id: 155, Avatar: `https://static.infragistics.com/xplatform/images/people/men/82.jpg`, Position: `up`, Name: `Justin Philippe`, AthleteNumber: 12858, BeatsPerMinute: 104, TopSpeed: 5.7, Registered: `2017-03-16T02:00:35-02:00`, TrackProgress: 25, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/mv.png`, CountryName: `Maldives` }),
                new AthletesDataItem({ Id: 159, Avatar: `https://static.infragistics.com/xplatform/images/people/women/66.jpg`, Position: `up`, Name: `Eva Dean`, AthleteNumber: 48874, BeatsPerMinute: 103, TopSpeed: 5.7, Registered: `2017-03-04T01:58:52-02:00`, TrackProgress: 25, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/st.png`, CountryName: `Sao Tome and Principe` }),
                new AthletesDataItem({ Id: 161, Avatar: `https://static.infragistics.com/xplatform/images/people/men/89.jpg`, Position: `up`, Name: `Franklin Byrd`, AthleteNumber: 49498, BeatsPerMinute: 106, TopSpeed: 5.3, Registered: `2017-11-04T11:09:26-02:00`, TrackProgress: 45, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/tw.png`, CountryName: `Taiwan, Province of China` }),
                new AthletesDataItem({ Id: 161, Avatar: `https://static.infragistics.com/xplatform/images/people/men/38.jpg`, Position: `current`, Name: `Alex Martin`, AthleteNumber: 27887, BeatsPerMinute: 96, TopSpeed: 4.2, Registered: `2017-10-28T04:06:33-03:00`, TrackProgress: 45, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/eg.png`, CountryName: `Egypt` }),
                new AthletesDataItem({ Id: 162, Avatar: `https://static.infragistics.com/xplatform/images/people/women/0.jpg`, Position: `current`, Name: `Alex Craig`, AthleteNumber: 21868, BeatsPerMinute: 94, TopSpeed: 4.2, Registered: `2017-03-19T10:20:51-02:00`, TrackProgress: 25, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/sy.png`, CountryName: `Syrian Arab Republic` }),
                new AthletesDataItem({ Id: 162, Avatar: `https://static.infragistics.com/xplatform/images/people/men/5.jpg`, Position: `down`, Name: `Adam Bouchard`, AthleteNumber: 38672, BeatsPerMinute: 99, TopSpeed: 4.7, Registered: `2017-01-04T03:04:05-02:00`, TrackProgress: 25, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/sc.png`, CountryName: `Seychelles` }),
                new AthletesDataItem({ Id: 163, Avatar: `https://static.infragistics.com/xplatform/images/people/men/70.jpg`, Position: `down`, Name: `میلاد قاسمی`, AthleteNumber: 12788, BeatsPerMinute: 101, TopSpeed: 4.1, Registered: `2017-03-01T07:51:17-02:00`, TrackProgress: 25, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/ws.png`, CountryName: `Samoa` }),
                new AthletesDataItem({ Id: 163, Avatar: `https://static.infragistics.com/xplatform/images/people/women/52.jpg`, Position: `up`, Name: `Millie Cooper`, AthleteNumber: 14610, BeatsPerMinute: 99, TopSpeed: 5.4, Registered: `2017-05-08T09:30:14-03:00`, TrackProgress: 25, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/ni.png`, CountryName: `Nicaragua` }),
                new AthletesDataItem({ Id: 163, Avatar: `https://static.infragistics.com/xplatform/images/people/women/21.jpg`, Position: `up`, Name: `Pippa Roberts`, AthleteNumber: 15588, BeatsPerMinute: 105, TopSpeed: 4.1, Registered: `2017-02-07T10:23:13-02:00`, TrackProgress: 45, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/kh.png`, CountryName: `Cambodia` }),
                new AthletesDataItem({ Id: 164, Avatar: `https://static.infragistics.com/xplatform/images/people/women/51.jpg`, Position: `current`, Name: `Ethel Stephens`, AthleteNumber: 18692, BeatsPerMinute: 94, TopSpeed: 4.1, Registered: `2017-02-13T05:03:04-02:00`, TrackProgress: 45, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/ua.png`, CountryName: `Ukraine` }),
                new AthletesDataItem({ Id: 165, Avatar: `https://static.infragistics.com/xplatform/images/people/men/79.jpg`, Position: `down`, Name: `Mario Ellis`, AthleteNumber: 18026, BeatsPerMinute: 99, TopSpeed: 5.5, Registered: `2017-02-13T11:53:15-02:00`, TrackProgress: 45, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/ml.png`, CountryName: `Mali` }),
                new AthletesDataItem({ Id: 166, Avatar: `https://static.infragistics.com/xplatform/images/people/women/74.jpg`, Position: `current`, Name: `Maria Parra`, AthleteNumber: 39861, BeatsPerMinute: 106, TopSpeed: 6, Registered: `2017-01-30T09:22:52-02:00`, TrackProgress: 45, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/ki.png`, CountryName: `Kiribati` }),
                new AthletesDataItem({ Id: 167, Avatar: `https://static.infragistics.com/xplatform/images/people/men/67.jpg`, Position: `down`, Name: `Aatu Ranta`, AthleteNumber: 38049, BeatsPerMinute: 94, TopSpeed: 5.1, Registered: `2017-07-21T04:22:18-03:00`, TrackProgress: 45, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/ae.png`, CountryName: `United Arab Emirates` }),
                new AthletesDataItem({ Id: 167, Avatar: `https://static.infragistics.com/xplatform/images/people/women/62.jpg`, Position: `current`, Name: `Pippa Morris`, AthleteNumber: 44421, BeatsPerMinute: 101, TopSpeed: 5.5, Registered: `2017-03-06T09:21:58-02:00`, TrackProgress: 25, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/tj.png`, CountryName: `Tajikistan` }),
                new AthletesDataItem({ Id: 167, Avatar: `https://static.infragistics.com/xplatform/images/people/women/32.jpg`, Position: `current`, Name: `Esma Adıvar`, AthleteNumber: 35565, BeatsPerMinute: 99, TopSpeed: 4.2, Registered: `2017-06-17T12:34:29-03:00`, TrackProgress: 75, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/ph.png`, CountryName: `Philippines` }),
                new AthletesDataItem({ Id: 167, Avatar: `https://static.infragistics.com/xplatform/images/people/men/19.jpg`, Position: `down`, Name: `Louis Smith`, AthleteNumber: 31837, BeatsPerMinute: 98, TopSpeed: 5.4, Registered: `2017-03-19T08:12:23-02:00`, TrackProgress: 25, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/lr.png`, CountryName: `Liberia` }),
                new AthletesDataItem({ Id: 167, Avatar: `https://static.infragistics.com/xplatform/images/people/men/81.jpg`, Position: `down`, Name: `Milo Charles`, AthleteNumber: 10661, BeatsPerMinute: 99, TopSpeed: 5.4, Registered: `2017-07-20T09:00:22-03:00`, TrackProgress: 60, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/is.png`, CountryName: `Iceland` }),
                new AthletesDataItem({ Id: 168, Avatar: `https://static.infragistics.com/xplatform/images/people/men/10.jpg`, Position: `current`, Name: `Calvin Hunt`, AthleteNumber: 35535, BeatsPerMinute: 94, TopSpeed: 4.5, Registered: `2017-11-07T09:58:42-02:00`, TrackProgress: 45, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/at.png`, CountryName: `Austria` }),
                new AthletesDataItem({ Id: 169, Avatar: `https://static.infragistics.com/xplatform/images/people/men/44.jpg`, Position: `up`, Name: `Aziz Santos`, AthleteNumber: 38947, BeatsPerMinute: 98, TopSpeed: 4, Registered: `2017-04-03T02:18:46-03:00`, TrackProgress: 45, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/gb.png`, CountryName: `United Kingdom` }),
                new AthletesDataItem({ Id: 169, Avatar: `https://static.infragistics.com/xplatform/images/people/men/21.jpg`, Position: `down`, Name: `Julian Barth`, AthleteNumber: 19011, BeatsPerMinute: 91, TopSpeed: 5.2, Registered: `2017-04-21T08:08:33-03:00`, TrackProgress: 45, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/gd.png`, CountryName: `Grenada` }),
                new AthletesDataItem({ Id: 170, Avatar: `https://static.infragistics.com/xplatform/images/people/men/60.jpg`, Position: `up`, Name: `Fernando Gimenez`, AthleteNumber: 31290, BeatsPerMinute: 102, TopSpeed: 5.1, Registered: `2017-06-21T06:45:54-03:00`, TrackProgress: 60, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/uz.png`, CountryName: `Uruguay` }),
                new AthletesDataItem({ Id: 173, Avatar: `https://static.infragistics.com/xplatform/images/people/women/18.jpg`, Position: `current`, Name: `Hassana Camp`, AthleteNumber: 14467, BeatsPerMinute: 104, TopSpeed: 5.2, Registered: `2017-06-02T12:21:59-03:00`, TrackProgress: 60, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/cz.png`, CountryName: `Czechia` }),
                new AthletesDataItem({ Id: 174, Avatar: `https://static.infragistics.com/xplatform/images/people/women/29.jpg`, Position: `current`, Name: `Beatriz Gallardo`, AthleteNumber: 38538, BeatsPerMinute: 101, TopSpeed: 6, Registered: `2017-11-06T02:14:31-02:00`, TrackProgress: 25, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/er.png`, CountryName: `Eritrea` }),
                new AthletesDataItem({ Id: 176, Avatar: `https://static.infragistics.com/xplatform/images/people/men/26.jpg`, Position: `current`, Name: `Tim Neal`, AthleteNumber: 45860, BeatsPerMinute: 97, TopSpeed: 5.6, Registered: `2017-04-21T04:06:34-03:00`, TrackProgress: 60, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/pa.png`, CountryName: `Panama` }),
                new AthletesDataItem({ Id: 176, Avatar: `https://static.infragistics.com/xplatform/images/people/men/35.jpg`, Position: `down`, Name: `Laudelino Castro`, AthleteNumber: 12711, BeatsPerMinute: 106, TopSpeed: 4.4, Registered: `2017-02-08T04:03:22-02:00`, TrackProgress: 25, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/hr.png`, CountryName: `Croatia` }),
                new AthletesDataItem({ Id: 178, Avatar: `https://static.infragistics.com/xplatform/images/people/women/65.jpg`, Position: `down`, Name: `Lillian Wade`, AthleteNumber: 10729, BeatsPerMinute: 110, TopSpeed: 4.8, Registered: `2017-04-07T09:53:13-03:00`, TrackProgress: 45, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/sb.png`, CountryName: `Solomon Islands` }),
                new AthletesDataItem({ Id: 180, Avatar: `https://static.infragistics.com/xplatform/images/people/women/90.jpg`, Position: `up`, Name: `Lillian Bowman`, AthleteNumber: 35323, BeatsPerMinute: 103, TopSpeed: 4.5, Registered: `2017-08-31T11:55:25-03:00`, TrackProgress: 25, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/gy.png`, CountryName: `Guyana` }),
                new AthletesDataItem({ Id: 182, Avatar: `https://static.infragistics.com/xplatform/images/people/women/14.jpg`, Position: `up`, Name: `Ariena Achterberg`, AthleteNumber: 41330, BeatsPerMinute: 92, TopSpeed: 5.6, Registered: `2017-10-22T02:15:39-03:00`, TrackProgress: 25, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/kr.png`, CountryName: `South Korea` }),
                new AthletesDataItem({ Id: 182, Avatar: `https://static.infragistics.com/xplatform/images/people/men/94.jpg`, Position: `current`, Name: `Gerald Schmidt`, AthleteNumber: 47410, BeatsPerMinute: 102, TopSpeed: 5.8, Registered: `2017-02-20T11:53:08-02:00`, TrackProgress: 25, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/ge.png`, CountryName: `Georgia` }),
                new AthletesDataItem({ Id: 183, Avatar: `https://static.infragistics.com/xplatform/images/people/men/74.jpg`, Position: `down`, Name: `Yarno Kin`, AthleteNumber: 47324, BeatsPerMinute: 107, TopSpeed: 5.1, Registered: `2017-08-26T08:21:22-03:00`, TrackProgress: 45, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/ro.png`, CountryName: `Romania` }),
                new AthletesDataItem({ Id: 183, Avatar: `https://static.infragistics.com/xplatform/images/people/women/53.jpg`, Position: `up`, Name: `رونیکا سلطانی نژاد`, AthleteNumber: 35233, BeatsPerMinute: 99, TopSpeed: 4.6, Registered: `2017-08-13T01:05:52-03:00`, TrackProgress: 25, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/mk.png`, CountryName: `Macedonia, The Former Yugoslav Republic of` }),
                new AthletesDataItem({ Id: 186, Avatar: `https://static.infragistics.com/xplatform/images/people/men/2.jpg`, Position: `up`, Name: `کوروش کامروا`, AthleteNumber: 13506, BeatsPerMinute: 109, TopSpeed: 4.4, Registered: `2017-04-16T01:10:37-03:00`, TrackProgress: 25, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/nu.png`, CountryName: `Niue` }),
                new AthletesDataItem({ Id: 186, Avatar: `https://static.infragistics.com/xplatform/images/people/men/42.jpg`, Position: `up`, Name: `Jimmy Bailey`, AthleteNumber: 38510, BeatsPerMinute: 101, TopSpeed: 4.7, Registered: `2017-06-30T04:13:42-03:00`, TrackProgress: 60, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/cr.png`, CountryName: `Costa Rica` }),
                new AthletesDataItem({ Id: 188, Avatar: `https://static.infragistics.com/xplatform/images/people/men/3.jpg`, Position: `current`, Name: `Foppe Delfos`, AthleteNumber: 39679, BeatsPerMinute: 107, TopSpeed: 4.1, Registered: `2017-08-05T10:54:56-03:00`, TrackProgress: 60, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/py.png`, CountryName: `Paraguay` }),
                new AthletesDataItem({ Id: 188, Avatar: `https://static.infragistics.com/xplatform/images/people/men/81.jpg`, Position: `down`, Name: `آراد یاسمی`, AthleteNumber: 34370, BeatsPerMinute: 99, TopSpeed: 5.9, Registered: `2017-02-02T11:42:41-02:00`, TrackProgress: 45, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/mu.png`, CountryName: `Mauritius` }),
                new AthletesDataItem({ Id: 188, Avatar: `https://static.infragistics.com/xplatform/images/people/women/45.jpg`, Position: `down`, Name: `Ceylan Duygulu`, AthleteNumber: 21527, BeatsPerMinute: 99, TopSpeed: 4.9, Registered: `2017-07-13T09:06:04-03:00`, TrackProgress: 25, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/dm.png`, CountryName: `Dominica` }),
                new AthletesDataItem({ Id: 190, Avatar: `https://static.infragistics.com/xplatform/images/people/women/2.jpg`, Position: `current`, Name: `Venla Korpela`, AthleteNumber: 16454, BeatsPerMinute: 92, TopSpeed: 4.1, Registered: `2017-08-22T10:36:38-03:00`, TrackProgress: 60, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/hu.png`, CountryName: `Hungary` }),
                new AthletesDataItem({ Id: 190, Avatar: `https://static.infragistics.com/xplatform/images/people/women/53.jpg`, Position: `current`, Name: `Gladys Van Der Steeg`, AthleteNumber: 20216, BeatsPerMinute: 94, TopSpeed: 4.3, Registered: `2017-10-09T02:01:16-03:00`, TrackProgress: 25, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/de.png`, CountryName: `Germany` }),
                new AthletesDataItem({ Id: 190, Avatar: `https://static.infragistics.com/xplatform/images/people/women/44.jpg`, Position: `current`, Name: `Kiara Dubois`, AthleteNumber: 49964, BeatsPerMinute: 97, TopSpeed: 5.6, Registered: `2017-09-28T04:37:56-03:00`, TrackProgress: 25, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/au.png`, CountryName: `Australia` }),
                new AthletesDataItem({ Id: 191, Avatar: `https://static.infragistics.com/xplatform/images/people/men/42.jpg`, Position: `current`, Name: `آرش احمدی`, AthleteNumber: 36948, BeatsPerMinute: 90, TopSpeed: 4.1, Registered: `2017-09-08T01:22:14-03:00`, TrackProgress: 60, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/np.png`, CountryName: `Nepal` }),
                new AthletesDataItem({ Id: 191, Avatar: `https://static.infragistics.com/xplatform/images/people/women/13.jpg`, Position: `up`, Name: `Sheryl Collins`, AthleteNumber: 36473, BeatsPerMinute: 98, TopSpeed: 4.2, Registered: `2017-03-23T12:54:35-02:00`, TrackProgress: 25, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/ke.png`, CountryName: `Kenya` }),
                new AthletesDataItem({ Id: 191, Avatar: `https://static.infragistics.com/xplatform/images/people/women/72.jpg`, Position: `up`, Name: `Clarisse Rey`, AthleteNumber: 29795, BeatsPerMinute: 98, TopSpeed: 4.9, Registered: `2017-06-09T08:07:19-03:00`, TrackProgress: 45, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/ba.png`, CountryName: `Bosnia and Herzegovina` }),
                new AthletesDataItem({ Id: 192, Avatar: `https://static.infragistics.com/xplatform/images/people/women/44.jpg`, Position: `down`, Name: `Viivi Kujala`, AthleteNumber: 29939, BeatsPerMinute: 93, TopSpeed: 4.1, Registered: `2017-05-03T02:40:05-03:00`, TrackProgress: 75, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/so.png`, CountryName: `Somalia` }),
                new AthletesDataItem({ Id: 193, Avatar: `https://static.infragistics.com/xplatform/images/people/women/9.jpg`, Position: `down`, Name: `Juanita Franklin`, AthleteNumber: 13907, BeatsPerMinute: 91, TopSpeed: 6, Registered: `2017-10-04T02:46:46-03:00`, TrackProgress: 25, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/vu.png`, CountryName: `Vanuatu` }),
                new AthletesDataItem({ Id: 193, Avatar: `https://static.infragistics.com/xplatform/images/people/women/59.jpg`, Position: `down`, Name: `Sophia Carlson`, AthleteNumber: 44183, BeatsPerMinute: 102, TopSpeed: 5.1, Registered: `2017-09-04T07:03:19-03:00`, TrackProgress: 45, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/ee.png`, CountryName: `Estonia` }),
                new AthletesDataItem({ Id: 194, Avatar: `https://static.infragistics.com/xplatform/images/people/women/62.jpg`, Position: `up`, Name: `آوا سلطانی نژاد`, AthleteNumber: 45635, BeatsPerMinute: 98, TopSpeed: 4.1, Registered: `2017-04-10T11:39:46-03:00`, TrackProgress: 25, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/se.png`, CountryName: `Sweden` }),
                new AthletesDataItem({ Id: 194, Avatar: `https://static.infragistics.com/xplatform/images/people/men/11.jpg`, Position: `down`, Name: `Kaya Taşlı`, AthleteNumber: 42291, BeatsPerMinute: 100, TopSpeed: 4.7, Registered: `2017-01-30T03:23:36-02:00`, TrackProgress: 45, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/sn.png`, CountryName: `Senegal` }),
                new AthletesDataItem({ Id: 194, Avatar: `https://static.infragistics.com/xplatform/images/people/men/71.jpg`, Position: `down`, Name: `Adrian Ibañez`, AthleteNumber: 21968, BeatsPerMinute: 105, TopSpeed: 5.3, Registered: `2017-02-03T04:36:54-02:00`, TrackProgress: 25, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/om.png`, CountryName: `Oman` }),
                new AthletesDataItem({ Id: 196, Avatar: `https://static.infragistics.com/xplatform/images/people/women/17.jpg`, Position: `current`, Name: `Parel Zuidhof`, AthleteNumber: 32718, BeatsPerMinute: 105, TopSpeed: 5, Registered: `2017-01-21T10:19:56-02:00`, TrackProgress: 45, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/jm.png`, CountryName: `Jamaica` }),
                new AthletesDataItem({ Id: 196, Avatar: `https://static.infragistics.com/xplatform/images/people/women/30.jpg`, Position: `up`, Name: `Begüm Erkekli`, AthleteNumber: 37888, BeatsPerMinute: 104, TopSpeed: 4.6, Registered: `2017-10-04T03:02:35-03:00`, TrackProgress: 45, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/sv.png`, CountryName: `El Salvador` }),
                new AthletesDataItem({ Id: 197, Avatar: `https://static.infragistics.com/xplatform/images/people/men/93.jpg`, Position: `current`, Name: `Brent Lord`, AthleteNumber: 20943, BeatsPerMinute: 92, TopSpeed: 4.8, Registered: `2017-01-23T06:14:22-02:00`, TrackProgress: 60, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/dz.png`, CountryName: `Algeria` }),
                new AthletesDataItem({ Id: 199, Avatar: `https://static.infragistics.com/xplatform/images/people/women/68.jpg`, Position: `up`, Name: `Lucie Dumont`, AthleteNumber: 12104, BeatsPerMinute: 108, TopSpeed: 4, Registered: `2017-01-08T02:13:29-02:00`, TrackProgress: 45, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/ca.png`, CountryName: `Canada` }),
                new AthletesDataItem({ Id: 210, Avatar: `https://static.infragistics.com/xplatform/images/people/women/13.jpg`, Position: `down`, Name: `Maeva Bergeron`, AthleteNumber: 15655, BeatsPerMinute: 94, TopSpeed: 5.9, Registered: `2017-10-03T09:42:15-03:00`, TrackProgress: 60, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/mx.png`, CountryName: `Mexico` }),
                new AthletesDataItem({ Id: 212, Avatar: `https://static.infragistics.com/xplatform/images/people/women/83.jpg`, Position: `up`, Name: `Sara Larsen`, AthleteNumber: 37094, BeatsPerMinute: 97, TopSpeed: 4.5, Registered: `2017-04-14T11:48:28-03:00`, TrackProgress: 25, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/sa.png`, CountryName: `Saudi Arabia` }),
                new AthletesDataItem({ Id: 214, Avatar: `https://static.infragistics.com/xplatform/images/people/women/84.jpg`, Position: `up`, Name: `Ömür Denkel`, AthleteNumber: 31061, BeatsPerMinute: 104, TopSpeed: 4.5, Registered: `2017-02-18T05:32:55-02:00`, TrackProgress: 60, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/tv.png`, CountryName: `Tuvalu` }),
                new AthletesDataItem({ Id: 215, Avatar: `https://static.infragistics.com/xplatform/images/people/women/79.jpg`, Position: `down`, Name: `Marilou Hubert`, AthleteNumber: 43655, BeatsPerMinute: 104, TopSpeed: 4.2, Registered: `2017-09-28T11:13:00-03:00`, TrackProgress: 25, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/mm.png`, CountryName: `Myanmar` }),
                new AthletesDataItem({ Id: 216, Avatar: `https://static.infragistics.com/xplatform/images/people/men/72.jpg`, Position: `down`, Name: `Felix Olsen`, AthleteNumber: 43198, BeatsPerMinute: 101, TopSpeed: 4.2, Registered: `2017-09-27T01:17:14-03:00`, TrackProgress: 60, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/fr.png`, CountryName: `France` }),
                new AthletesDataItem({ Id: 219, Avatar: `https://static.infragistics.com/xplatform/images/people/women/6.jpg`, Position: `current`, Name: `Sedef Tunçeri`, AthleteNumber: 48164, BeatsPerMinute: 108, TopSpeed: 5.6, Registered: `2017-03-29T11:54:15-03:00`, TrackProgress: 25, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/bt.png`, CountryName: `Bhutan` }),
                new AthletesDataItem({ Id: 221, Avatar: `https://static.infragistics.com/xplatform/images/people/men/73.jpg`, Position: `down`, Name: `Kuzey Aclan`, AthleteNumber: 18583, BeatsPerMinute: 102, TopSpeed: 5.3, Registered: `2017-09-12T09:14:14-03:00`, TrackProgress: 25, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/td.png`, CountryName: `Chad` }),
                new AthletesDataItem({ Id: 223, Avatar: `https://static.infragistics.com/xplatform/images/people/men/72.jpg`, Position: `down`, Name: `Gökhan Aşıkoğlu`, AthleteNumber: 13890, BeatsPerMinute: 105, TopSpeed: 5.4, Registered: `2017-03-31T06:14:26-03:00`, TrackProgress: 25, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/jp.png`, CountryName: `Japan` }),
                new AthletesDataItem({ Id: 224, Avatar: `https://static.infragistics.com/xplatform/images/people/men/0.jpg`, Position: `down`, Name: `Joan Ortega`, AthleteNumber: 49478, BeatsPerMinute: 103, TopSpeed: 5.4, Registered: `2017-07-04T03:01:47-03:00`, TrackProgress: 45, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/gq.png`, CountryName: `Equatorial Guinea` }),
                new AthletesDataItem({ Id: 225, Avatar: `https://static.infragistics.com/xplatform/images/people/men/42.jpg`, Position: `up`, Name: `Stanley Hart`, AthleteNumber: 14150, BeatsPerMinute: 91, TopSpeed: 4.5, Registered: `2017-08-19T03:02:33-03:00`, TrackProgress: 25, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/ve.png`, CountryName: `Venezuela` }),
                new AthletesDataItem({ Id: 227, Avatar: `https://static.infragistics.com/xplatform/images/people/men/9.jpg`, Position: `current`, Name: `Johann Hinz`, AthleteNumber: 48244, BeatsPerMinute: 94, TopSpeed: 4.3, Registered: `2017-03-10T07:36:56-02:00`, TrackProgress: 60, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/sd.png`, CountryName: `Sudan` }),
                new AthletesDataItem({ Id: 227, Avatar: `https://static.infragistics.com/xplatform/images/people/women/61.jpg`, Position: `up`, Name: `Layla Douglas`, AthleteNumber: 21977, BeatsPerMinute: 97, TopSpeed: 5.4, Registered: `2017-04-19T11:43:38-03:00`, TrackProgress: 25, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/si.png`, CountryName: `Slovenia` }),
                new AthletesDataItem({ Id: 229, Avatar: `https://static.infragistics.com/xplatform/images/people/men/29.jpg`, Position: `current`, Name: `Selmo Caldeira`, AthleteNumber: 21837, BeatsPerMinute: 110, TopSpeed: 4.9, Registered: `2017-10-20T03:40:24-03:00`, TrackProgress: 25, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/ly.png`, CountryName: `Libyan Arab Jamahiriya` }),
                new AthletesDataItem({ Id: 231, Avatar: `https://static.infragistics.com/xplatform/images/people/men/56.jpg`, Position: `up`, Name: `Judd Campbell`, AthleteNumber: 37365, BeatsPerMinute: 110, TopSpeed: 5, Registered: `2017-10-19T11:01:10-03:00`, TrackProgress: 25, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/la.png`, CountryName: `Lao PeopleS Democratic Republic` }),
                new AthletesDataItem({ Id: 233, Avatar: `https://static.infragistics.com/xplatform/images/people/men/18.jpg`, Position: `up`, Name: `Zackary Roy`, AthleteNumber: 45996, BeatsPerMinute: 92, TopSpeed: 4.9, Registered: `2017-07-07T03:51:26-03:00`, TrackProgress: 60, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/bs.png`, CountryName: `Bahamas` }),
                new AthletesDataItem({ Id: 234, Avatar: `https://static.infragistics.com/xplatform/images/people/women/19.jpg`, Position: `down`, Name: `Linda Schäfer`, AthleteNumber: 43074, BeatsPerMinute: 107, TopSpeed: 5.1, Registered: `2017-01-05T11:41:20-02:00`, TrackProgress: 25, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/ye.png`, CountryName: `Yemen` }),
                new AthletesDataItem({ Id: 235, Avatar: `https://static.infragistics.com/xplatform/images/people/women/42.jpg`, Position: `down`, Name: `Elaine Smith`, AthleteNumber: 38243, BeatsPerMinute: 108, TopSpeed: 4, Registered: `2017-06-11T12:20:41-03:00`, TrackProgress: 45, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/li.png`, CountryName: `Liechtenstein` }),
                new AthletesDataItem({ Id: 237, Avatar: `https://static.infragistics.com/xplatform/images/people/men/86.jpg`, Position: `down`, Name: `Clyde Matthews`, AthleteNumber: 11955, BeatsPerMinute: 93, TopSpeed: 5.2, Registered: `2017-03-02T05:01:02-02:00`, TrackProgress: 60, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/pw.png`, CountryName: `Palau` }),
                new AthletesDataItem({ Id: 238, Avatar: `https://static.infragistics.com/xplatform/images/people/women/17.jpg`, Position: `current`, Name: `Charlotte Meyer`, AthleteNumber: 21442, BeatsPerMinute: 110, TopSpeed: 4.6, Registered: `2017-10-19T10:38:35-03:00`, TrackProgress: 60, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/ck.png`, CountryName: `Cook Islands` }),
                new AthletesDataItem({ Id: 240, Avatar: `https://static.infragistics.com/xplatform/images/people/men/5.jpg`, Position: `down`, Name: `Carter Evans`, AthleteNumber: 46961, BeatsPerMinute: 100, TopSpeed: 5.3, Registered: `2017-07-23T02:43:07-03:00`, TrackProgress: 60, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/lu.png`, CountryName: `Luxembourg` }),
                new AthletesDataItem({ Id: 240, Avatar: `https://static.infragistics.com/xplatform/images/people/men/33.jpg`, Position: `down`, Name: `Alberto Clark`, AthleteNumber: 29912, BeatsPerMinute: 93, TopSpeed: 4.6, Registered: `2017-02-02T03:50:21-02:00`, TrackProgress: 45, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/ag.png`, CountryName: `Antigua and Barbuda` }),
                new AthletesDataItem({ Id: 241, Avatar: `https://static.infragistics.com/xplatform/images/people/women/65.jpg`, Position: `down`, Name: `Lilly Keuter`, AthleteNumber: 49893, BeatsPerMinute: 102, TopSpeed: 4.5, Registered: `2017-01-20T02:38:39-02:00`, TrackProgress: 25, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/kn.png`, CountryName: `Saint Kitts and Nevis` }),
                new AthletesDataItem({ Id: 241, Avatar: `https://static.infragistics.com/xplatform/images/people/men/20.jpg`, Position: `up`, Name: `Oskari Karjala`, AthleteNumber: 31498, BeatsPerMinute: 90, TopSpeed: 4.5, Registered: `2017-05-10T12:45:12-03:00`, TrackProgress: 25, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/fm.png`, CountryName: `Micronesia, Federated States of` }),
                new AthletesDataItem({ Id: 242, Avatar: `https://static.infragistics.com/xplatform/images/people/women/83.jpg`, Position: `down`, Name: `Caitlin Jackson`, AthleteNumber: 45472, BeatsPerMinute: 101, TopSpeed: 4.3, Registered: `2017-09-17T09:41:01-03:00`, TrackProgress: 25, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/mz.png`, CountryName: `Mozambique` }),
                new AthletesDataItem({ Id: 243, Avatar: `https://static.infragistics.com/xplatform/images/people/women/77.jpg`, Position: `down`, Name: `Cathalijne Van Der Ree`, AthleteNumber: 45160, BeatsPerMinute: 102, TopSpeed: 5.4, Registered: `2017-02-13T05:23:49-02:00`, TrackProgress: 60, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/ug.png`, CountryName: `Uganda` }),
                new AthletesDataItem({ Id: 243, Avatar: `https://static.infragistics.com/xplatform/images/people/women/94.jpg`, Position: `up`, Name: `Emma Turner`, AthleteNumber: 39487, BeatsPerMinute: 110, TopSpeed: 5.7, Registered: `2017-07-30T01:33:14-03:00`, TrackProgress: 45, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/tz.png`, CountryName: `Tanzania, United Republic of` }),
                new AthletesDataItem({ Id: 243, Avatar: `https://static.infragistics.com/xplatform/images/people/men/42.jpg`, Position: `up`, Name: `Kent Clark`, AthleteNumber: 32799, BeatsPerMinute: 106, TopSpeed: 5.7, Registered: `2017-01-24T01:00:15-02:00`, TrackProgress: 45, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/pe.png`, CountryName: `Peru` }),
                new AthletesDataItem({ Id: 246, Avatar: `https://static.infragistics.com/xplatform/images/people/women/55.jpg`, Position: `current`, Name: `Ronja Kraft`, AthleteNumber: 21800, BeatsPerMinute: 101, TopSpeed: 5.3, Registered: `2017-04-02T03:33:57-03:00`, TrackProgress: 60, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/dk.png`, CountryName: `Denmark` }),
                new AthletesDataItem({ Id: 251, Avatar: `https://static.infragistics.com/xplatform/images/people/women/34.jpg`, Position: `down`, Name: `Eléa Robin`, AthleteNumber: 26742, BeatsPerMinute: 90, TopSpeed: 4.7, Registered: `2017-03-30T12:34:24-03:00`, TrackProgress: 25, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/vc.png`, CountryName: `Saint Vincent and the Grenadines` }),
                new AthletesDataItem({ Id: 251, Avatar: `https://static.infragistics.com/xplatform/images/people/men/74.jpg`, Position: `up`, Name: `Alex Meyer`, AthleteNumber: 44390, BeatsPerMinute: 94, TopSpeed: 4.3, Registered: `2017-08-04T07:05:34-03:00`, TrackProgress: 45, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/md.png`, CountryName: `Moldova, Republic of` }),
                new AthletesDataItem({ Id: 252, Avatar: `https://static.infragistics.com/xplatform/images/people/men/94.jpg`, Position: `down`, Name: `Adérito Lopes`, AthleteNumber: 21320, BeatsPerMinute: 91, TopSpeed: 5.2, Registered: `2017-01-07T06:47:56-02:00`, TrackProgress: 45, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/mh.png`, CountryName: `Marshall Islands` }),
                new AthletesDataItem({ Id: 253, Avatar: `https://static.infragistics.com/xplatform/images/people/women/51.jpg`, Position: `current`, Name: `Kayla Patel`, AthleteNumber: 42780, BeatsPerMinute: 103, TopSpeed: 4.7, Registered: `2017-04-20T09:33:53-03:00`, TrackProgress: 60, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/ne.png`, CountryName: `Niger` }),
                new AthletesDataItem({ Id: 258, Avatar: `https://static.infragistics.com/xplatform/images/people/men/31.jpg`, Position: `current`, Name: `Diego Gautier`, AthleteNumber: 26320, BeatsPerMinute: 97, TopSpeed: 4.6, Registered: `2017-06-11T03:50:43-03:00`, TrackProgress: 45, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/ng.png`, CountryName: `Nigeria` }),
                new AthletesDataItem({ Id: 258, Avatar: `https://static.infragistics.com/xplatform/images/people/women/30.jpg`, Position: `up`, Name: `Veera Saari`, AthleteNumber: 40408, BeatsPerMinute: 100, TopSpeed: 4.7, Registered: `2017-10-28T10:39:22-03:00`, TrackProgress: 25, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/iq.png`, CountryName: `Iraq` }),
                new AthletesDataItem({ Id: 258, Avatar: `https://static.infragistics.com/xplatform/images/people/women/60.jpg`, Position: `down`, Name: `Zaina Pomp`, AthleteNumber: 14109, BeatsPerMinute: 90, TopSpeed: 5.7, Registered: `2017-09-07T11:17:40-03:00`, TrackProgress: 45, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/ao.png`, CountryName: `Angola` }),
                new AthletesDataItem({ Id: 262, Avatar: `https://static.infragistics.com/xplatform/images/people/men/9.jpg`, Position: `current`, Name: `Anthony Harcourt`, AthleteNumber: 33649, BeatsPerMinute: 109, TopSpeed: 5.5, Registered: `2017-06-14T11:10:20-03:00`, TrackProgress: 45, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/in.png`, CountryName: `India` }),
                new AthletesDataItem({ Id: 262, Avatar: `https://static.infragistics.com/xplatform/images/people/men/43.jpg`, Position: `current`, Name: `Roman Smith`, AthleteNumber: 15531, BeatsPerMinute: 106, TopSpeed: 4.9, Registered: `2017-06-14T05:12:04-03:00`, TrackProgress: 60, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/ga.png`, CountryName: `Gabon` }),
                new AthletesDataItem({ Id: 263, Avatar: `https://static.infragistics.com/xplatform/images/people/women/9.jpg`, Position: `up`, Name: `Estelle Vincent`, AthleteNumber: 41700, BeatsPerMinute: 99, TopSpeed: 5.7, Registered: `2017-05-31T02:56:58-03:00`, TrackProgress: 60, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/na.png`, CountryName: `Namibia` }),
                new AthletesDataItem({ Id: 265, Avatar: `https://static.infragistics.com/xplatform/images/people/women/47.jpg`, Position: `current`, Name: `Ilke Kisters`, AthleteNumber: 23817, BeatsPerMinute: 100, TopSpeed: 5.9, Registered: `2017-01-04T02:54:53-02:00`, TrackProgress: 60, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/ch.png`, CountryName: `Switzerland` }),
                new AthletesDataItem({ Id: 265, Avatar: `https://static.infragistics.com/xplatform/images/people/women/9.jpg`, Position: `down`, Name: `Jenny Burke`, AthleteNumber: 15266, BeatsPerMinute: 99, TopSpeed: 5.4, Registered: `2017-09-11T12:20:19-03:00`, TrackProgress: 45, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/my.png`, CountryName: `Malaysia` }),
                new AthletesDataItem({ Id: 265, Avatar: `https://static.infragistics.com/xplatform/images/people/women/60.jpg`, Position: `down`, Name: `Keira Walker`, AthleteNumber: 34116, BeatsPerMinute: 94, TopSpeed: 4.8, Registered: `2017-01-09T05:46:07-02:00`, TrackProgress: 60, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/al.png`, CountryName: `Albania` }),
                new AthletesDataItem({ Id: 266, Avatar: `https://static.infragistics.com/xplatform/images/people/men/70.jpg`, Position: `down`, Name: `Moritz Braun`, AthleteNumber: 48081, BeatsPerMinute: 107, TopSpeed: 6, Registered: `2017-06-13T12:54:56-03:00`, TrackProgress: 25, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/ad.png`, CountryName: `Andorra` }),
                new AthletesDataItem({ Id: 267, Avatar: `https://static.infragistics.com/xplatform/images/people/men/50.jpg`, Position: `current`, Name: `Villads Larsen`, AthleteNumber: 44677, BeatsPerMinute: 93, TopSpeed: 5.7, Registered: `2017-03-25T11:25:30-02:00`, TrackProgress: 45, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/kw.png`, CountryName: `Kuwait` }),
                new AthletesDataItem({ Id: 268, Avatar: `https://static.infragistics.com/xplatform/images/people/men/23.jpg`, Position: `up`, Name: `Sandro Carpentier`, AthleteNumber: 23503, BeatsPerMinute: 96, TopSpeed: 5.7, Registered: `2017-09-30T01:01:04-03:00`, TrackProgress: 25, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/be.png`, CountryName: `Belgium` }),
                new AthletesDataItem({ Id: 269, Avatar: `https://static.infragistics.com/xplatform/images/people/men/17.jpg`, Position: `current`, Name: `Emil Meißner`, AthleteNumber: 37183, BeatsPerMinute: 97, TopSpeed: 4, Registered: `2017-07-15T12:32:30-03:00`, TrackProgress: 60, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/gm.png`, CountryName: `Gambia` }),
                new AthletesDataItem({ Id: 270, Avatar: `https://static.infragistics.com/xplatform/images/people/women/14.jpg`, Position: `up`, Name: `Emily Olsen`, AthleteNumber: 13887, BeatsPerMinute: 110, TopSpeed: 4.8, Registered: `2017-10-03T08:01:40-03:00`, TrackProgress: 60, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/cf.png`, CountryName: `Central African Republic` }),
                new AthletesDataItem({ Id: 271, Avatar: `https://static.infragistics.com/xplatform/images/people/men/81.jpg`, Position: `down`, Name: `آراد جعفری`, AthleteNumber: 34962, BeatsPerMinute: 90, TopSpeed: 4.8, Registered: `2017-04-22T04:20:39-03:00`, TrackProgress: 25, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/bi.png`, CountryName: `Burundi` }),
                new AthletesDataItem({ Id: 271, Avatar: `https://static.infragistics.com/xplatform/images/people/men/74.jpg`, Position: `down`, Name: `Jimmie Mcguinness`, AthleteNumber: 20729, BeatsPerMinute: 90, TopSpeed: 4.6, Registered: `2017-10-07T06:08:00-03:00`, TrackProgress: 25, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/bw.png`, CountryName: `Botswana` }),
                new AthletesDataItem({ Id: 272, Avatar: `https://static.infragistics.com/xplatform/images/people/women/26.jpg`, Position: `down`, Name: `Sélène Roussel`, AthleteNumber: 11261, BeatsPerMinute: 99, TopSpeed: 5.8, Registered: `2017-05-10T02:18:02-03:00`, TrackProgress: 25, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/sm.png`, CountryName: `San Marino` }),
                new AthletesDataItem({ Id: 272, Avatar: `https://static.infragistics.com/xplatform/images/people/men/31.jpg`, Position: `up`, Name: `Aaron Robertson`, AthleteNumber: 30727, BeatsPerMinute: 95, TopSpeed: 4.2, Registered: `2017-08-23T09:37:40-03:00`, TrackProgress: 25, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/id.png`, CountryName: `Indonesia` }),
                new AthletesDataItem({ Id: 273, Avatar: `https://static.infragistics.com/xplatform/images/people/women/4.jpg`, Position: `up`, Name: `Afet Kumcuoğlu`, AthleteNumber: 33454, BeatsPerMinute: 106, TopSpeed: 5.1, Registered: `2017-09-16T07:05:43-03:00`, TrackProgress: 25, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/nz.png`, CountryName: `New Zealand` }),
                new AthletesDataItem({ Id: 273, Avatar: `https://static.infragistics.com/xplatform/images/people/women/33.jpg`, Position: `up`, Name: `Annabelle Besteman`, AthleteNumber: 30560, BeatsPerMinute: 105, TopSpeed: 5.3, Registered: `2017-11-11T02:04:19-02:00`, TrackProgress: 45, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/kp.png`, CountryName: `North Korea` }),
                new AthletesDataItem({ Id: 274, Avatar: `https://static.infragistics.com/xplatform/images/people/women/9.jpg`, Position: `up`, Name: `Minea Rantanen`, AthleteNumber: 18835, BeatsPerMinute: 105, TopSpeed: 5, Registered: `2017-01-24T07:30:43-02:00`, TrackProgress: 45, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/jo.png`, CountryName: `Jordan` }),
                new AthletesDataItem({ Id: 275, Avatar: `https://static.infragistics.com/xplatform/images/people/men/2.jpg`, Position: `up`, Name: `Fritz Sommer`, AthleteNumber: 26210, BeatsPerMinute: 99, TopSpeed: 4.6, Registered: `2017-09-29T03:54:57-03:00`, TrackProgress: 25, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/lt.png`, CountryName: `Lithuania` }),
                new AthletesDataItem({ Id: 275, Avatar: `https://static.infragistics.com/xplatform/images/people/men/88.jpg`, Position: `down`, Name: `Rafael Gutierrez`, AthleteNumber: 38804, BeatsPerMinute: 100, TopSpeed: 5.9, Registered: `2017-02-08T07:50:59-02:00`, TrackProgress: 60, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/gn.png`, CountryName: `Guinea` }),
                new AthletesDataItem({ Id: 275, Avatar: `https://static.infragistics.com/xplatform/images/people/women/69.jpg`, Position: `current`, Name: `Ellen Leppo`, AthleteNumber: 29286, BeatsPerMinute: 97, TopSpeed: 5.6, Registered: `2017-08-16T09:46:35-03:00`, TrackProgress: 25, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/by.png`, CountryName: `Belarus` }),
                new AthletesDataItem({ Id: 276, Avatar: `https://static.infragistics.com/xplatform/images/people/women/1.jpg`, Position: `current`, Name: `Encarnacion Martin`, AthleteNumber: 40912, BeatsPerMinute: 105, TopSpeed: 5.5, Registered: `2017-01-11T12:52:28-02:00`, TrackProgress: 60, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/th.png`, CountryName: `Thailand` }),
                new AthletesDataItem({ Id: 276, Avatar: `https://static.infragistics.com/xplatform/images/people/men/65.jpg`, Position: `current`, Name: `David Scott`, AthleteNumber: 46997, BeatsPerMinute: 101, TopSpeed: 4.4, Registered: `2017-07-25T09:23:24-03:00`, TrackProgress: 60, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/pt.png`, CountryName: `Portugal` }),
                new AthletesDataItem({ Id: 279, Avatar: `https://static.infragistics.com/xplatform/images/people/women/39.jpg`, Position: `current`, Name: `Ashley Romero`, AthleteNumber: 36611, BeatsPerMinute: 104, TopSpeed: 5.5, Registered: `2017-02-08T12:45:46-02:00`, TrackProgress: 45, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/mn.png`, CountryName: `Mongolia` }),
                new AthletesDataItem({ Id: 280, Avatar: `https://static.infragistics.com/xplatform/images/people/men/90.jpg`, Position: `down`, Name: `Cecil Nichols`, AthleteNumber: 20656, BeatsPerMinute: 100, TopSpeed: 5, Registered: `2017-04-24T01:20:34-03:00`, TrackProgress: 60, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/rw.png`, CountryName: `RWANDA` }),
                new AthletesDataItem({ Id: 282, Avatar: `https://static.infragistics.com/xplatform/images/people/men/55.jpg`, Position: `current`, Name: `Johann Fischer`, AthleteNumber: 37212, BeatsPerMinute: 98, TopSpeed: 5.8, Registered: `2017-09-01T04:39:52-03:00`, TrackProgress: 25, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/br.png`, CountryName: `Brazil` }),
                new AthletesDataItem({ Id: 283, Avatar: `https://static.infragistics.com/xplatform/images/people/men/10.jpg`, Position: `current`, Name: `سینا مرادی`, AthleteNumber: 10809, BeatsPerMinute: 105, TopSpeed: 5.3, Registered: `2017-04-05T05:27:13-03:00`, TrackProgress: 25, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/bh.png`, CountryName: `Bahrain` }),
                new AthletesDataItem({ Id: 284, Avatar: `https://static.infragistics.com/xplatform/images/people/men/12.jpg`, Position: `current`, Name: `Abel Brun`, AthleteNumber: 39315, BeatsPerMinute: 105, TopSpeed: 5.1, Registered: `2017-10-05T05:54:31-03:00`, TrackProgress: 25, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/af.png`, CountryName: `Afghanistan` }),
                new AthletesDataItem({ Id: 285, Avatar: `https://static.infragistics.com/xplatform/images/people/men/34.jpg`, Position: `current`, Name: `Jeffrey Medina`, AthleteNumber: 42905, BeatsPerMinute: 100, TopSpeed: 5.2, Registered: `2017-09-15T02:11:43-03:00`, TrackProgress: 45, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/gr.png`, CountryName: `Greece` }),
                new AthletesDataItem({ Id: 285, Avatar: `https://static.infragistics.com/xplatform/images/people/men/43.jpg`, Position: `down`, Name: `Niilo Laurila`, AthleteNumber: 49215, BeatsPerMinute: 104, TopSpeed: 4.5, Registered: `2017-04-26T01:26:36-03:00`, TrackProgress: 60, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/et.png`, CountryName: `Ethiopia` }),
                new AthletesDataItem({ Id: 286, Avatar: `https://static.infragistics.com/xplatform/images/people/women/45.jpg`, Position: `down`, Name: `Marisvalda Martins`, AthleteNumber: 33879, BeatsPerMinute: 107, TopSpeed: 5.4, Registered: `2017-01-31T12:07:48-02:00`, TrackProgress: 25, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/es.png`, CountryName: `Spain` }),
                new AthletesDataItem({ Id: 286, Avatar: `https://static.infragistics.com/xplatform/images/people/women/82.jpg`, Position: `current`, Name: `Eloida Novaes`, AthleteNumber: 30751, BeatsPerMinute: 107, TopSpeed: 4.2, Registered: `2017-01-02T01:04:04-02:00`, TrackProgress: 45, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/cl.png`, CountryName: `Chile` }),
                new AthletesDataItem({ Id: 287, Avatar: `https://static.infragistics.com/xplatform/images/people/women/72.jpg`, Position: `up`, Name: `Charlotte Dean`, AthleteNumber: 45969, BeatsPerMinute: 105, TopSpeed: 5, Registered: `2017-02-13T05:39:15-02:00`, TrackProgress: 45, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/za.png`, CountryName: `South Africa` }),
                new AthletesDataItem({ Id: 287, Avatar: `https://static.infragistics.com/xplatform/images/people/men/35.jpg`, Position: `current`, Name: `Loïc Gerard`, AthleteNumber: 31706, BeatsPerMinute: 102, TopSpeed: 4.4, Registered: `2017-07-28T09:10:43-03:00`, TrackProgress: 45, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/ie.png`, CountryName: `Ireland` }),
                new AthletesDataItem({ Id: 292, Avatar: `https://static.infragistics.com/xplatform/images/people/women/4.jpg`, Position: `down`, Name: `Asta Hansen`, AthleteNumber: 17222, BeatsPerMinute: 101, TopSpeed: 4.3, Registered: `2017-01-08T02:41:56-02:00`, TrackProgress: 25, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/kz.png`, CountryName: `Kazakhstan` }),
                new AthletesDataItem({ Id: 293, Avatar: `https://static.infragistics.com/xplatform/images/people/women/21.jpg`, Position: `up`, Name: `Sara Hannula`, AthleteNumber: 22025, BeatsPerMinute: 102, TopSpeed: 4.2, Registered: `2017-10-09T11:32:13-03:00`, TrackProgress: 60, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/tl.png`, CountryName: `Timor-Leste` }),
                new AthletesDataItem({ Id: 293, Avatar: `https://static.infragistics.com/xplatform/images/people/women/90.jpg`, Position: `current`, Name: `Ana Bourgeois`, AthleteNumber: 24612, BeatsPerMinute: 110, TopSpeed: 6, Registered: `2017-11-02T02:17:43-02:00`, TrackProgress: 25, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/sg.png`, CountryName: `Singapore` }),
                new AthletesDataItem({ Id: 296, Avatar: `https://static.infragistics.com/xplatform/images/people/women/37.jpg`, Position: `up`, Name: `Thea Edwards`, AthleteNumber: 29141, BeatsPerMinute: 99, TopSpeed: 5.8, Registered: `2017-05-23T05:24:38-03:00`, TrackProgress: 45, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/sl.png`, CountryName: `Sierra Leone` }),
                new AthletesDataItem({ Id: 299, Avatar: `https://static.infragistics.com/xplatform/images/people/men/89.jpg`, Position: `down`, Name: `Victor Lévesque`, AthleteNumber: 48375, BeatsPerMinute: 110, TopSpeed: 5.7, Registered: `2017-11-10T11:31:44-02:00`, TrackProgress: 45, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/mr.png`, CountryName: `Mauritania` }),
                new AthletesDataItem({ Id: 301, Avatar: `https://static.infragistics.com/xplatform/images/people/men/65.jpg`, Position: `down`, Name: `Louis Stewart`, AthleteNumber: 48131, BeatsPerMinute: 103, TopSpeed: 5.7, Registered: `2017-02-26T07:28:02-02:00`, TrackProgress: 60, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/hn.png`, CountryName: `Honduras` }),
                new AthletesDataItem({ Id: 302, Avatar: `https://static.infragistics.com/xplatform/images/people/men/14.jpg`, Position: `up`, Name: `Bill Fox`, AthleteNumber: 18511, BeatsPerMinute: 91, TopSpeed: 5, Registered: `2017-10-24T08:25:40-03:00`, TrackProgress: 60, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/ir.png`, CountryName: `Iran, Islamic Republic Of` }),
                new AthletesDataItem({ Id: 304, Avatar: `https://static.infragistics.com/xplatform/images/people/men/34.jpg`, Position: `down`, Name: `Mathys Martin`, AthleteNumber: 32928, BeatsPerMinute: 98, TopSpeed: 5.5, Registered: `2017-05-17T12:51:47-03:00`, TrackProgress: 45, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/va.png`, CountryName: `Holy See (Vatican City State)` }),
                new AthletesDataItem({ Id: 305, Avatar: `https://static.infragistics.com/xplatform/images/people/women/38.jpg`, Position: `current`, Name: `Gianne Godijn`, AthleteNumber: 45945, BeatsPerMinute: 96, TopSpeed: 4.5, Registered: `2017-03-22T03:23:12-02:00`, TrackProgress: 25, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/it.png`, CountryName: `Italy` }),
                new AthletesDataItem({ Id: 306, Avatar: `https://static.infragistics.com/xplatform/images/people/women/26.jpg`, Position: `up`, Name: `Mira Campos`, AthleteNumber: 39222, BeatsPerMinute: 95, TopSpeed: 5.9, Registered: `2017-01-11T01:41:31-02:00`, TrackProgress: 45, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/am.png`, CountryName: `Armenia` }),
                new AthletesDataItem({ Id: 308, Avatar: `https://static.infragistics.com/xplatform/images/people/women/15.jpg`, Position: `down`, Name: `Esther Kühn`, AthleteNumber: 24868, BeatsPerMinute: 92, TopSpeed: 5.5, Registered: `2017-05-14T12:30:08-03:00`, TrackProgress: 60, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/ru.png`, CountryName: `Russian Federation` }),
                new AthletesDataItem({ Id: 308, Avatar: `https://static.infragistics.com/xplatform/images/people/men/14.jpg`, Position: `up`, Name: `Hans Möller`, AthleteNumber: 34122, BeatsPerMinute: 109, TopSpeed: 5.6, Registered: `2017-06-20T06:02:49-03:00`, TrackProgress: 25, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/dj.png`, CountryName: `Djibouti` }),
                new AthletesDataItem({ Id: 309, Avatar: `https://static.infragistics.com/xplatform/images/people/women/73.jpg`, Position: `current`, Name: `Alice Perry`, AthleteNumber: 23750, BeatsPerMinute: 104, TopSpeed: 5.3, Registered: `2017-03-31T07:15:46-03:00`, TrackProgress: 45, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/lc.png`, CountryName: `Saint Lucia` }),
                new AthletesDataItem({ Id: 310, Avatar: `https://static.infragistics.com/xplatform/images/people/men/92.jpg`, Position: `up`, Name: `Kaya Tekand`, AthleteNumber: 11028, BeatsPerMinute: 93, TopSpeed: 5.2, Registered: `2017-04-10T09:57:13-03:00`, TrackProgress: 60, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/fj.png`, CountryName: `Fiji` }),
                new AthletesDataItem({ Id: 311, Avatar: `https://static.infragistics.com/xplatform/images/people/women/92.jpg`, Position: `down`, Name: `Ilona Salonen`, AthleteNumber: 27068, BeatsPerMinute: 91, TopSpeed: 5.4, Registered: `2017-07-03T06:19:47-03:00`, TrackProgress: 45, CountryFlag: `https://static.infragistics.com/xplatform/images/flags/iso2/bo.png`, CountryName: `Bolivia` }),
            ];
            super(...newItems.slice(0));
        }
    }
}
tsコピー

import 'igniteui-webcomponents-grids/grids/combined';
import { ComponentRenderer, WebGridDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcGridComponent } from 'igniteui-webcomponents-grids/grids';
import { AthletesDataItem, AthletesData } from './AthletesData';
import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
import "./index.css";



export class Sample {

    private grid: IgcGridComponent
    private _bind: () => void;

    constructor() {
        var grid = this.grid = document.getElementById('grid') as IgcGridComponent;

        this._bind = () => {
            grid.data = this.athletesData;
        }
        this._bind();
    }

    private _athletesData: AthletesData = null;
    public get athletesData(): AthletesData {
        if (this._athletesData == null)
        {
            this._athletesData = new AthletesData();
        }
        return this._athletesData;
    }

    private _componentRenderer: ComponentRenderer = null;
    public get renderer(): ComponentRenderer {
        if (this._componentRenderer == null) {
            this._componentRenderer = new ComponentRenderer();
            var context = this._componentRenderer.context;
            WebGridDescriptionModule.register(context);
        }
        return this._componentRenderer;
    }

}

new Sample();
tsコピー

<!DOCTYPE html>
<html>
  <head>
    <title>Sample | Ignite UI | Web Components | infragistics</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
    <link rel="stylesheet" href="/src/index.css" type="text/css" />

  </head>

  <body>
    <div id="root">

<div class="container sample ig-typography">

    <div class="container fill">
        <igc-grid
        auto-generate="false"
        name="grid"
        id="grid"
        id="grid">
            <igc-column
            field="Id"
            header="Rank"
            resizable="true">
            </igc-column>
            <igc-column
            field="Name"
            header="Athlete"
            resizable="true">
            </igc-column>
            <igc-column
            field="BeatsPerMinute"
            header="Beats per Minute"
            resizable="true">
            </igc-column>
            <igc-column
            field="TopSpeed"
            header="Top Speed"
            resizable="true">
            </igc-column>
            <igc-column
            field="TrackProgress"
            header="Track Progress"
            resizable="true">
            </igc-column>
        </igc-grid>
    </div>
</div>

    </div>

    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>
  </body>
</html>htmlコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */

#grid {
    --ig-grid-resize-line-color: #f35b04;
}

cssコピー

Edit in: Codesandbox

API 참조

• IgcColumnComponent
• IgcGridComponent

추가 리소스

• 가상화 및 성능
• 페이징
• 필터링
• 정렬
• 요약
• 열 이동
• 열 고정
• 선택

우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.

• Ignite UI for Web Components 포럼
• ​GitHub Ignite UI for Web Components