Angular UI Components Documentation

Sets or gets the altRows property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDataTable #myDataTable 
            [source]="dataAdapter" [columns]="columns" [width]="850" [altRows]="true">
        </jqxDataTable>
    `
})
 
export class AppComponent {
    source: any =
    {
        dataType: 'jsonp',
        dataFields: [
            { name: 'countryName', type: 'string' },
            { name: 'name', type: 'string' },
            { name: 'population', type: 'float' },
            { name: 'continentCode', type: 'string' }
        ],
        url: 'http://api.geonames.org/searchJSON'
    };
         
    dataAdapter: any = new jqx.dataAdapter(this.source,
        {
            formatData: function (data: any): any {
                data.featureClass = 'P';
                data.style = 'full';
                data.username = 'jqwidgets';
                data.maxRows = 50;
                return data;
            }
        }
    );
 
    columns: any[] =
    [
        { text: 'Country Name', dataField: 'countryName', width: 200 },
        { text: 'City', dataField: 'name', width: 250 },
        { text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
        { text: 'Continent Code', dataField: 'continentCode' }
    ];
}

Sets or gets the autoRowHeight property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDataTable #myDataTable 
            [source]="dataAdapter" [columns]="columns" [width]="850" [autoRowHeight]="false">
        </jqxDataTable>
    `
})
 
export class AppComponent {
    source: any =
    {
        dataType: 'jsonp',
        dataFields: [
            { name: 'countryName', type: 'string' },
            { name: 'name', type: 'string' },
            { name: 'population', type: 'float' },
            { name: 'continentCode', type: 'string' }
        ],
        url: 'http://api.geonames.org/searchJSON'
    };
         
    dataAdapter: any = new jqx.dataAdapter(this.source,
        {
            formatData: function (data: any): any {
                data.featureClass = 'P';
                data.style = 'full';
                data.username = 'jqwidgets';
                data.maxRows = 50;
                return data;
            }
        }
    );
 
    columns: any[] =
    [
        { text: 'Country Name', dataField: 'countryName', width: 200 },
        { text: 'City', dataField: 'name', width: 250 },
        { text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
        { text: 'Continent Code', dataField: 'continentCode' }
    ];
}

Sets or gets the aggregatesHeight property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDataTable #myDataTable 
            [source]="dataAdapter" [columns]="columns" [width]="850" [aggregatesHeight]="40">
        </jqxDataTable>
    `
})
 
export class AppComponent {
    source: any =
    {
        dataType: 'jsonp',
        dataFields: [
            { name: 'countryName', type: 'string' },
            { name: 'name', type: 'string' },
            { name: 'population', type: 'float' },
            { name: 'continentCode', type: 'string' }
        ],
        url: 'http://api.geonames.org/searchJSON'
    };
         
    dataAdapter: any = new jqx.dataAdapter(this.source,
        {
            formatData: function (data: any): any {
                data.featureClass = 'P';
                data.style = 'full';
                data.username = 'jqwidgets';
                data.maxRows = 50;
                return data;
            }
        }
    );
 
    columns: any[] =
    [
        { text: 'Country Name', dataField: 'countryName', width: 200 },
        { text: 'City', dataField: 'name', width: 250 },
        { text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
        { text: 'Continent Code', dataField: 'continentCode' }
    ];
}

Sets or gets the autoShowLoadElement property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDataTable #myDataTable 
            [source]="dataAdapter" [columns]="columns" [width]="850" [autoShowLoadElement]="false">
        </jqxDataTable>
    `
})
 
export class AppComponent {
    source: any =
    {
        dataType: 'jsonp',
        dataFields: [
            { name: 'countryName', type: 'string' },
            { name: 'name', type: 'string' },
            { name: 'population', type: 'float' },
            { name: 'continentCode', type: 'string' }
        ],
        url: 'http://api.geonames.org/searchJSON'
    };
         
    dataAdapter: any = new jqx.dataAdapter(this.source,
        {
            formatData: function (data: any): any {
                data.featureClass = 'P';
                data.style = 'full';
                data.username = 'jqwidgets';
                data.maxRows = 50;
                return data;
            }
        }
    );
 
    columns: any[] =
    [
        { text: 'Country Name', dataField: 'countryName', width: 200 },
        { text: 'City', dataField: 'name', width: 250 },
        { text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
        { text: 'Continent Code', dataField: 'continentCode' }
    ];
}

Sets or gets the columnsHeight property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDataTable #myDataTable 
            [source]="dataAdapter" [columns]="columns" [width]="850" [columnsHeight]="20">
        </jqxDataTable>
    `
})
 
export class AppComponent {
    source: any =
    {
        dataType: 'jsonp',
        dataFields: [
            { name: 'countryName', type: 'string' },
            { name: 'name', type: 'string' },
            { name: 'population', type: 'float' },
            { name: 'continentCode', type: 'string' }
        ],
        url: 'http://api.geonames.org/searchJSON'
    };
         
    dataAdapter: any = new jqx.dataAdapter(this.source,
        {
            formatData: function (data: any): any {
                data.featureClass = 'P';
                data.style = 'full';
                data.username = 'jqwidgets';
                data.maxRows = 50;
                return data;
            }
        }
    );
 
    columns: any[] =
    [
        { text: 'Country Name', dataField: 'countryName', width: 200 },
        { text: 'City', dataField: 'name', width: 250 },
        { text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
        { text: 'Continent Code', dataField: 'continentCode' }
    ];
}

interface DataTableColumns {
     text: String;
     dataField: String;
     displayField?: String;
     sortable?: Boolean;
     filterable?: Boolean;
     hidden?: Boolean;
     columnGroup ?: String;
     autoCellHeight?: Boolean;
     renderer?: (text:String, align?:String, height?: Size) => String;
     rendered?: (element:Any, align?:String, height?: Size) => Boolean;
     cellsRenderer?: (row:Number, column?:Any, value?: Any, rowData?:Any) => String;
     columnType?: String;
     validation?: (cell:Number, value?:Any) => Any;
     initEditor?: (row:Number, cellValue?:Any, editor?:Any, cellText?:String, width?:Size, height?:Size) => Void;
     createEditor?: (row:Number, cellValue?:Any, editor?:Any, cellText?:String, width?:Size, height?:Size) => Void;
     getEditorValue?: (row:Number, cellValue?:Any, editor?:Any) => Void;
     cellsFormat?: ColumnFormat;
     aggregates?: Array<String>;
     aggregatesRenderer?: (aggregates:Array<Any>) => String;
     align?: DataTableColumnsAlign;
     cellsAlign?: DataTableColumnsAlign;
     width?: Size;
     minWidth?: Size;
     maxWidth?: Size;
     resizable?: Boolean;
     draggable?: Boolean;
     editable?: Boolean;
     className?: String;
     cellClassName?: Any;
     pinned?: Boolean;
}
enum DataTableColumnsAlign {
     left,
     right,
     center
}

Sets or gets the columns property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDataTable #myDataTable 
            [source]="dataAdapter" [columns]="columns" [width]="850">
        </jqxDataTable>
    `
})
 
export class AppComponent {
    source: any =
    {
        dataType: 'jsonp',
        dataFields: [
            { name: 'countryName', type: 'string' },
            { name: 'name', type: 'string' },
            { name: 'population', type: 'float' },
            { name: 'continentCode', type: 'string' }
        ],
        url: 'http://api.geonames.org/searchJSON'
    };
         
    dataAdapter: any = new jqx.dataAdapter(this.source,
        {
            formatData: function (data: any): any {
                data.featureClass = 'P';
                data.style = 'full';
                data.username = 'jqwidgets';
                data.maxRows = 50;
                return data;
            }
        }
    );
 
    columns: any[] =
    [
        { text: 'Country Name', dataField: 'countryName', width: 200 },
        { text: 'City', dataField: 'name', width: 250 },
        { text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
        { text: 'Continent Code', dataField: 'continentCode' }
    ];
}

interface DataTableColumnGroups {
     text?: String;
     parentGroup?: String;
     align?: String;
     name?: String;
}

Sets or gets the columnGroups property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDataTable #myDataTable 
            [source]="dataAdapter" [columns]="columns" [width]="850" [columnGroups]="columnGroups">
        </jqxDataTable>
    `
})
 
export class AppComponent {
    source: any =
    {
        dataType: 'jsonp',
        dataFields: [
            { name: 'countryName', type: 'string' },
            { name: 'name', type: 'string' },
            { name: 'population', type: 'float' },
            { name: 'continentCode', type: 'string' }
        ],
        url: 'http://api.geonames.org/searchJSON'
    };
         
    dataAdapter: any = new jqx.dataAdapter(this.source,
        {
            formatData: function (data: any): any {
                data.featureClass = 'P';
                data.style = 'full';
                data.username = 'jqwidgets';
                data.maxRows = 50;
                return data;
            }
        }
    );
 
    columns: any[] =
    [
        { text: 'Country Name', dataField: 'countryName', width: 200 },
        { text: 'City', dataField: 'name', width: 250 },
        { text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
        { text: 'Continent Code', dataField: 'continentCode' }
    ];
}

Sets or gets the columnsResize property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDataTable #myDataTable 
            [source]="dataAdapter" [columns]="columns" [width]="850" [columnsResize]="true">
        </jqxDataTable>
    `
})
 
export class AppComponent {
    source: any =
    {
        dataType: 'jsonp',
        dataFields: [
            { name: 'countryName', type: 'string' },
            { name: 'name', type: 'string' },
            { name: 'population', type: 'float' },
            { name: 'continentCode', type: 'string' }
        ],
        url: 'http://api.geonames.org/searchJSON'
    };
         
    dataAdapter: any = new jqx.dataAdapter(this.source,
        {
            formatData: function (data: any): any {
                data.featureClass = 'P';
                data.style = 'full';
                data.username = 'jqwidgets';
                data.maxRows = 50;
                return data;
            }
        }
    );
 
    columns: any[] =
    [
        { text: 'Country Name', dataField: 'countryName', width: 200 },
        { text: 'City', dataField: 'name', width: 250 },
        { text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
        { text: 'Continent Code', dataField: 'continentCode' }
    ];
}

Sets or gets the columnsReorder property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDataTable #myDataTable 
            [source]="dataAdapter" [columns]="columns" [width]="850" [columnsReorder]="true">
        </jqxDataTable>
    `
})
 
export class AppComponent {
    source: any =
    {
        dataType: 'jsonp',
        dataFields: [
            { name: 'countryName', type: 'string' },
            { name: 'name', type: 'string' },
            { name: 'population', type: 'float' },
            { name: 'continentCode', type: 'string' }
        ],
        url: 'http://api.geonames.org/searchJSON'
    };
         
    dataAdapter: any = new jqx.dataAdapter(this.source,
        {
            formatData: function (data: any): any {
                data.featureClass = 'P';
                data.style = 'full';
                data.username = 'jqwidgets';
                data.maxRows = 50;
                return data;
            }
        }
    );
 
    columns: any[] =
    [
        { text: 'Country Name', dataField: 'countryName', width: 200 },
        { text: 'City', dataField: 'name', width: 250 },
        { text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
        { text: 'Continent Code', dataField: 'continentCode' }
    ];
}

Sets or gets the disabled property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDataTable #myDataTable 
            [source]="dataAdapter" [columns]="columns" [width]="850" [disabled]="true">
        </jqxDataTable>
    `
})
 
export class AppComponent {
    source: any =
    {
        dataType: 'jsonp',
        dataFields: [
            { name: 'countryName', type: 'string' },
            { name: 'name', type: 'string' },
            { name: 'population', type: 'float' },
            { name: 'continentCode', type: 'string' }
        ],
        url: 'http://api.geonames.org/searchJSON'
    };
         
    dataAdapter: any = new jqx.dataAdapter(this.source,
        {
            formatData: function (data: any): any {
                data.featureClass = 'P';
                data.style = 'full';
                data.username = 'jqwidgets';
                data.maxRows = 50;
                return data;
            }
        }
    );
 
    columns: any[] =
    [
        { text: 'Country Name', dataField: 'countryName', width: 200 },
        { text: 'City', dataField: 'name', width: 250 },
        { text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
        { text: 'Continent Code', dataField: 'continentCode' }
    ];
}

Sets or gets the editable property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDataTable #myDataTable 
            [source]="dataAdapter" [columns]="columns" [width]="850" [editable]="true">
        </jqxDataTable>
    `
})
 
export class AppComponent {
    source: any =
    {
        dataType: 'jsonp',
        dataFields: [
            { name: 'countryName', type: 'string' },
            { name: 'name', type: 'string' },
            { name: 'population', type: 'float' },
            { name: 'continentCode', type: 'string' }
        ],
        url: 'http://api.geonames.org/searchJSON'
    };
         
    dataAdapter: any = new jqx.dataAdapter(this.source,
        {
            formatData: function (data: any): any {
                data.featureClass = 'P';
                data.style = 'full';
                data.username = 'jqwidgets';
                data.maxRows = 50;
                return data;
            }
        }
    );
 
    columns: any[] =
    [
        { text: 'Country Name', dataField: 'countryName', width: 200 },
        { text: 'City', dataField: 'name', width: 250 },
        { text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
        { text: 'Continent Code', dataField: 'continentCode' }
    ];
}

interface DataTableEditSettings {
     saveOnPageChange?: Boolean;
     saveOnBlur?: Boolean;
     saveOnSelectionChange?: Boolean;
     cancelOnEsc?: Boolean;
     saveOnEnter?: Boolean;
     editSingleCell?: Boolean;
     editOnDoubleClick?: Boolean;
     editOnF2?: Boolean;
}

Sets or gets the editSettings property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDataTable #myDataTable 
            [source]="dataAdapter" [columns]="columns" [width]="850" [editSettings]="editSettings">
        </jqxDataTable>
    `
})
 
export class AppComponent {
    source: any =
    {
        dataType: 'jsonp',
        dataFields: [
            { name: 'countryName', type: 'string' },
            { name: 'name', type: 'string' },
            { name: 'population', type: 'float' },
            { name: 'continentCode', type: 'string' }
        ],
        url: 'http://api.geonames.org/searchJSON'
    };
         
    dataAdapter: any = new jqx.dataAdapter(this.source,
        {
            formatData: function (data: any): any {
                data.featureClass = 'P';
                data.style = 'full';
                data.username = 'jqwidgets';
                data.maxRows = 50;
                return data;
            }
        }
    );
 
    columns: any[] =
    [
        { text: 'Country Name', dataField: 'countryName', width: 200 },
        { text: 'City', dataField: 'name', width: 250 },
        { text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
        { text: 'Continent Code', dataField: 'continentCode' }
    ];
}

interface DataTableExportSettings {
     columnsHeader?: Boolean;
     hiddenColumns?: Boolean;
     serverURL?: Any;
     characterSet?: Any;
     recordsInView?: Boolean;
     fileName?: String;
}

Sets or gets the exportSettings property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDataTable #myDataTable 
            [source]="dataAdapter" [columns]="columns" [width]="850" [exportSettings]="exportSettings">
        </jqxDataTable>
    `
})
 
export class AppComponent {
    source: any =
    {
        dataType: 'jsonp',
        dataFields: [
            { name: 'countryName', type: 'string' },
            { name: 'name', type: 'string' },
            { name: 'population', type: 'float' },
            { name: 'continentCode', type: 'string' }
        ],
        url: 'http://api.geonames.org/searchJSON'
    };
         
    dataAdapter: any = new jqx.dataAdapter(this.source,
        {
            formatData: function (data: any): any {
                data.featureClass = 'P';
                data.style = 'full';
                data.username = 'jqwidgets';
                data.maxRows = 50;
                return data;
            }
        }
    );
 
    columns: any[] =
    [
        { text: 'Country Name', dataField: 'countryName', width: 200 },
        { text: 'City', dataField: 'name', width: 250 },
        { text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
        { text: 'Continent Code', dataField: 'continentCode' }
    ];
}

Sets or gets the enableHover property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDataTable #myDataTable 
            [source]="dataAdapter" [columns]="columns" [width]="850" [enableHover]="true">
        </jqxDataTable>
    `
})
 
export class AppComponent {
    source: any =
    {
        dataType: 'jsonp',
        dataFields: [
            { name: 'countryName', type: 'string' },
            { name: 'name', type: 'string' },
            { name: 'population', type: 'float' },
            { name: 'continentCode', type: 'string' }
        ],
        url: 'http://api.geonames.org/searchJSON'
    };
         
    dataAdapter: any = new jqx.dataAdapter(this.source,
        {
            formatData: function (data: any): any {
                data.featureClass = 'P';
                data.style = 'full';
                data.username = 'jqwidgets';
                data.maxRows = 50;
                return data;
            }
        }
    );
 
    columns: any[] =
    [
        { text: 'Country Name', dataField: 'countryName', width: 200 },
        { text: 'City', dataField: 'name', width: 250 },
        { text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
        { text: 'Continent Code', dataField: 'continentCode' }
    ];
}

Sets or gets the enableBrowserSelection property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDataTable #myDataTable 
            [source]="dataAdapter" [columns]="columns" [width]="850" [enableBrowserSelection]="true">
        </jqxDataTable>
    `
})
 
export class AppComponent {
    source: any =
    {
        dataType: 'jsonp',
        dataFields: [
            { name: 'countryName', type: 'string' },
            { name: 'name', type: 'string' },
            { name: 'population', type: 'float' },
            { name: 'continentCode', type: 'string' }
        ],
        url: 'http://api.geonames.org/searchJSON'
    };
         
    dataAdapter: any = new jqx.dataAdapter(this.source,
        {
            formatData: function (data: any): any {
                data.featureClass = 'P';
                data.style = 'full';
                data.username = 'jqwidgets';
                data.maxRows = 50;
                return data;
            }
        }
    );
 
    columns: any[] =
    [
        { text: 'Country Name', dataField: 'countryName', width: 200 },
        { text: 'City', dataField: 'name', width: 250 },
        { text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
        { text: 'Continent Code', dataField: 'continentCode' }
    ];
}

Sets or gets the filterable property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDataTable #myDataTable 
            [source]="dataAdapter" [columns]="columns" [width]="850" [filterable]="true">
        </jqxDataTable>
    `
})
 
export class AppComponent {
    source: any =
    {
        dataType: 'jsonp',
        dataFields: [
            { name: 'countryName', type: 'string' },
            { name: 'name', type: 'string' },
            { name: 'population', type: 'float' },
            { name: 'continentCode', type: 'string' }
        ],
        url: 'http://api.geonames.org/searchJSON'
    };
         
    dataAdapter: any = new jqx.dataAdapter(this.source,
        {
            formatData: function (data: any): any {
                data.featureClass = 'P';
                data.style = 'full';
                data.username = 'jqwidgets';
                data.maxRows = 50;
                return data;
            }
        }
    );
 
    columns: any[] =
    [
        { text: 'Country Name', dataField: 'countryName', width: 200 },
        { text: 'City', dataField: 'name', width: 250 },
        { text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
        { text: 'Continent Code', dataField: 'continentCode' }
    ];
}

Sets or gets the filterHeight property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDataTable #myDataTable 
            [source]="dataAdapter" [columns]="columns" [width]="850" [filterHeight]="35" [filterable]="true">
        </jqxDataTable>
    `
})
 
export class AppComponent {
    source: any =
    {
        dataType: 'jsonp',
        dataFields: [
            { name: 'countryName', type: 'string' },
            { name: 'name', type: 'string' },
            { name: 'population', type: 'float' },
            { name: 'continentCode', type: 'string' }
        ],
        url: 'http://api.geonames.org/searchJSON'
    };
         
    dataAdapter: any = new jqx.dataAdapter(this.source,
        {
            formatData: function (data: any): any {
                data.featureClass = 'P';
                data.style = 'full';
                data.username = 'jqwidgets';
                data.maxRows = 50;
                return data;
            }
        }
    );
 
    columns: any[] =
    [
        { text: 'Country Name', dataField: 'countryName', width: 200 },
        { text: 'City', dataField: 'name', width: 250 },
        { text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
        { text: 'Continent Code', dataField: 'continentCode' }
    ];
}

enum DataTableFilterMode {
     default,
     simple,
     advanced
}

Sets or gets the filterMode property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDataTable #myDataTable 
            [source]="dataAdapter" [columns]="columns" [width]="850" [filterable]="true" [filterMode]="'advanced'">
        </jqxDataTable>
    `
})
 
export class AppComponent {
    source: any =
    {
        dataType: 'jsonp',
        dataFields: [
            { name: 'countryName', type: 'string' },
            { name: 'name', type: 'string' },
            { name: 'population', type: 'float' },
            { name: 'continentCode', type: 'string' }
        ],
        url: 'http://api.geonames.org/searchJSON'
    };
         
    dataAdapter: any = new jqx.dataAdapter(this.source,
        {
            formatData: function (data: any): any {
                data.featureClass = 'P';
                data.style = 'full';
                data.username = 'jqwidgets';
                data.maxRows = 50;
                return data;
            }
        }
    );
 
    columns: any[] =
    [
        { text: 'Country Name', dataField: 'countryName', width: 200 },
        { text: 'City', dataField: 'name', width: 250 },
        { text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
        { text: 'Continent Code', dataField: 'continentCode' }
    ];
}

Sets or gets the groups property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDataTable #myDataTable 
            [source]="dataAdapter" [columns]="columns" [width]="850" [groups]='['firstname']'>
        </jqxDataTable>
    `
})
 
export class AppComponent {
    source: any =
    {
        dataType: 'jsonp',
        dataFields: [
            { name: 'countryName', type: 'string' },
            { name: 'name', type: 'string' },
            { name: 'population', type: 'float' },
            { name: 'continentCode', type: 'string' }
        ],
        url: 'http://api.geonames.org/searchJSON'
    };
         
    dataAdapter: any = new jqx.dataAdapter(this.source,
        {
            formatData: function (data: any): any {
                data.featureClass = 'P';
                data.style = 'full';
                data.username = 'jqwidgets';
                data.maxRows = 50;
                return data;
            }
        }
    );
 
    columns: any[] =
    [
        { text: 'Country Name', dataField: 'countryName', width: 200 },
        { text: 'City', dataField: 'name', width: 250 },
        { text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
        { text: 'Continent Code', dataField: 'continentCode' }
    ];
}

Sets or gets the groupsRenderer property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDataTable #myDataTable 
            [source]="dataAdapter" [columns]="columns" [width]="850" [groupsRenderer]="groupsRenderer">
        </jqxDataTable>
    `
})
 
export class AppComponent {
    source: any =
    {
        dataType: 'jsonp',
        dataFields: [
            { name: 'countryName', type: 'string' },
            { name: 'name', type: 'string' },
            { name: 'population', type: 'float' },
            { name: 'continentCode', type: 'string' }
        ],
        url: 'http://api.geonames.org/searchJSON'
    };
         
    dataAdapter: any = new jqx.dataAdapter(this.source,
        {
            formatData: function (data: any): any {
                data.featureClass = 'P';
                data.style = 'full';
                data.username = 'jqwidgets';
                data.maxRows = 50;
                return data;
            }
        }
    );
 
    columns: any[] =
    [
        { text: 'Country Name', dataField: 'countryName', width: 200 },
        { text: 'City', dataField: 'name', width: 250 },
        { text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
        { text: 'Continent Code', dataField: 'continentCode' }
    ];
}

Sets or gets the height property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDataTable #myDataTable 
            [source]="dataAdapter" [columns]="columns" [width]="850" [height]="350">
        </jqxDataTable>
    `
})
 
export class AppComponent {
    source: any =
    {
        dataType: 'jsonp',
        dataFields: [
            { name: 'countryName', type: 'string' },
            { name: 'name', type: 'string' },
            { name: 'population', type: 'float' },
            { name: 'continentCode', type: 'string' }
        ],
        url: 'http://api.geonames.org/searchJSON'
    };
         
    dataAdapter: any = new jqx.dataAdapter(this.source,
        {
            formatData: function (data: any): any {
                data.featureClass = 'P';
                data.style = 'full';
                data.username = 'jqwidgets';
                data.maxRows = 50;
                return data;
            }
        }
    );
 
    columns: any[] =
    [
        { text: 'Country Name', dataField: 'countryName', width: 200 },
        { text: 'City', dataField: 'name', width: 250 },
        { text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
        { text: 'Continent Code', dataField: 'continentCode' }
    ];
}

Sets or gets the initRowDetails property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDataTable #myDataTable 
            [source]="dataAdapter" [columns]="columns" [width]="850" [initRowDetails]="initRowDetails">
        </jqxDataTable>
    `
})
 
export class AppComponent {
    source: any =
    {
        dataType: 'jsonp',
        dataFields: [
            { name: 'countryName', type: 'string' },
            { name: 'name', type: 'string' },
            { name: 'population', type: 'float' },
            { name: 'continentCode', type: 'string' }
        ],
        url: 'http://api.geonames.org/searchJSON'
    };
         
    dataAdapter: any = new jqx.dataAdapter(this.source,
        {
            formatData: function (data: any): any {
                data.featureClass = 'P';
                data.style = 'full';
                data.username = 'jqwidgets';
                data.maxRows = 50;
                return data;
            }
        }
    );
 
    columns: any[] =
    [
        { text: 'Country Name', dataField: 'countryName', width: 200 },
        { text: 'City', dataField: 'name', width: 250 },
        { text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
        { text: 'Continent Code', dataField: 'continentCode' }
    ];
}

Sets or gets the incrementalSearch property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDataTable #myDataTable 
            [source]="dataAdapter" [columns]="columns" [width]="850" [incrementalSearch]="true">
        </jqxDataTable>
    `
})
 
export class AppComponent {
    source: any =
    {
        dataType: 'jsonp',
        dataFields: [
            { name: 'countryName', type: 'string' },
            { name: 'name', type: 'string' },
            { name: 'population', type: 'float' },
            { name: 'continentCode', type: 'string' }
        ],
        url: 'http://api.geonames.org/searchJSON'
    };
         
    dataAdapter: any = new jqx.dataAdapter(this.source,
        {
            formatData: function (data: any): any {
                data.featureClass = 'P';
                data.style = 'full';
                data.username = 'jqwidgets';
                data.maxRows = 50;
                return data;
            }
        }
    );
 
    columns: any[] =
    [
        { text: 'Country Name', dataField: 'countryName', width: 200 },
        { text: 'City', dataField: 'name', width: 250 },
        { text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
        { text: 'Continent Code', dataField: 'continentCode' }
    ];
}

Sets or gets the localization property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDataTable #myDataTable 
            [source]="dataAdapter" [columns]="columns" [width]="850" [localization]="localization">
        </jqxDataTable>
    `
})
 
export class AppComponent {
    source: any =
    {
        dataType: 'jsonp',
        dataFields: [
            { name: 'countryName', type: 'string' },
            { name: 'name', type: 'string' },
            { name: 'population', type: 'float' },
            { name: 'continentCode', type: 'string' }
        ],
        url: 'http://api.geonames.org/searchJSON'
    };
         
    dataAdapter: any = new jqx.dataAdapter(this.source,
        {
            formatData: function (data: any): any {
                data.featureClass = 'P';
                data.style = 'full';
                data.username = 'jqwidgets';
                data.maxRows = 50;
                return data;
            }
        }
    );
 
    columns: any[] =
    [
        { text: 'Country Name', dataField: 'countryName', width: 200 },
        { text: 'City', dataField: 'name', width: 250 },
        { text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
        { text: 'Continent Code', dataField: 'continentCode' }
    ];
}

Sets or gets the pagerHeight property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDataTable #myDataTable 
            [source]="dataAdapter" [columns]="columns" [width]="850" [pagerHeight]="35" [pageable]="true">
        </jqxDataTable>
    `
})
 
export class AppComponent {
    source: any =
    {
        dataType: 'jsonp',
        dataFields: [
            { name: 'countryName', type: 'string' },
            { name: 'name', type: 'string' },
            { name: 'population', type: 'float' },
            { name: 'continentCode', type: 'string' }
        ],
        url: 'http://api.geonames.org/searchJSON'
    };
         
    dataAdapter: any = new jqx.dataAdapter(this.source,
        {
            formatData: function (data: any): any {
                data.featureClass = 'P';
                data.style = 'full';
                data.username = 'jqwidgets';
                data.maxRows = 50;
                return data;
            }
        }
    );
 
    columns: any[] =
    [
        { text: 'Country Name', dataField: 'countryName', width: 200 },
        { text: 'City', dataField: 'name', width: 250 },
        { text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
        { text: 'Continent Code', dataField: 'continentCode' }
    ];
}

Sets or gets the pageSize property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDataTable #myDataTable 
            [source]="dataAdapter" [columns]="columns" [width]="850" [pageSize]="15" [pageable]="true">
        </jqxDataTable>
    `
})
 
export class AppComponent {
    source: any =
    {
        dataType: 'jsonp',
        dataFields: [
            { name: 'countryName', type: 'string' },
            { name: 'name', type: 'string' },
            { name: 'population', type: 'float' },
            { name: 'continentCode', type: 'string' }
        ],
        url: 'http://api.geonames.org/searchJSON'
    };
         
    dataAdapter: any = new jqx.dataAdapter(this.source,
        {
            formatData: function (data: any): any {
                data.featureClass = 'P';
                data.style = 'full';
                data.username = 'jqwidgets';
                data.maxRows = 50;
                return data;
            }
        }
    );
 
    columns: any[] =
    [
        { text: 'Country Name', dataField: 'countryName', width: 200 },
        { text: 'City', dataField: 'name', width: 250 },
        { text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
        { text: 'Continent Code', dataField: 'continentCode' }
    ];
}

Sets or gets the pageSizeOptions property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDataTable #myDataTable 
            [source]="dataAdapter" [columns]="columns" [width]="850" [pageSizeOptions]='[15, 25, 35]' [pageable]="true">
        </jqxDataTable>
    `
})
 
export class AppComponent {
    source: any =
    {
        dataType: 'jsonp',
        dataFields: [
            { name: 'countryName', type: 'string' },
            { name: 'name', type: 'string' },
            { name: 'population', type: 'float' },
            { name: 'continentCode', type: 'string' }
        ],
        url: 'http://api.geonames.org/searchJSON'
    };
         
    dataAdapter: any = new jqx.dataAdapter(this.source,
        {
            formatData: function (data: any): any {
                data.featureClass = 'P';
                data.style = 'full';
                data.username = 'jqwidgets';
                data.maxRows = 50;
                return data;
            }
        }
    );
 
    columns: any[] =
    [
        { text: 'Country Name', dataField: 'countryName', width: 200 },
        { text: 'City', dataField: 'name', width: 250 },
        { text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
        { text: 'Continent Code', dataField: 'continentCode' }
    ];
}

Sets or gets the pageable property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDataTable #myDataTable 
            [source]="dataAdapter" [columns]="columns" [width]="850" [pageable]="true">
        </jqxDataTable>
    `
})
 
export class AppComponent {
    source: any =
    {
        dataType: 'jsonp',
        dataFields: [
            { name: 'countryName', type: 'string' },
            { name: 'name', type: 'string' },
            { name: 'population', type: 'float' },
            { name: 'continentCode', type: 'string' }
        ],
        url: 'http://api.geonames.org/searchJSON'
    };
         
    dataAdapter: any = new jqx.dataAdapter(this.source,
        {
            formatData: function (data: any): any {
                data.featureClass = 'P';
                data.style = 'full';
                data.username = 'jqwidgets';
                data.maxRows = 50;
                return data;
            }
        }
    );
 
    columns: any[] =
    [
        { text: 'Country Name', dataField: 'countryName', width: 200 },
        { text: 'City', dataField: 'name', width: 250 },
        { text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
        { text: 'Continent Code', dataField: 'continentCode' }
    ];
}

enum DataTablePagerPosition {
     top,
     bottom,
     both
}

Sets or gets the pagerPosition property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDataTable #myDataTable 
            [source]="dataAdapter" [columns]="columns" [width]="850" [pagerPosition]="'top'">
        </jqxDataTable>
    `
})
 
export class AppComponent {
    source: any =
    {
        dataType: 'jsonp',
        dataFields: [
            { name: 'countryName', type: 'string' },
            { name: 'name', type: 'string' },
            { name: 'population', type: 'float' },
            { name: 'continentCode', type: 'string' }
        ],
        url: 'http://api.geonames.org/searchJSON'
    };
         
    dataAdapter: any = new jqx.dataAdapter(this.source,
        {
            formatData: function (data: any): any {
                data.featureClass = 'P';
                data.style = 'full';
                data.username = 'jqwidgets';
                data.maxRows = 50;
                return data;
            }
        }
    );
 
    columns: any[] =
    [
        { text: 'Country Name', dataField: 'countryName', width: 200 },
        { text: 'City', dataField: 'name', width: 250 },
        { text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
        { text: 'Continent Code', dataField: 'continentCode' }
    ];
}

enum DataTablePagerMode {
     default,
     advanced
}

Sets or gets the pagerMode property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDataTable #myDataTable 
            [source]="dataAdapter" [columns]="columns" [width]="850" [pagerMode]="'advanced'">
        </jqxDataTable>
    `
})
 
export class AppComponent {
    source: any =
    {
        dataType: 'jsonp',
        dataFields: [
            { name: 'countryName', type: 'string' },
            { name: 'name', type: 'string' },
            { name: 'population', type: 'float' },
            { name: 'continentCode', type: 'string' }
        ],
        url: 'http://api.geonames.org/searchJSON'
    };
         
    dataAdapter: any = new jqx.dataAdapter(this.source,
        {
            formatData: function (data: any): any {
                data.featureClass = 'P';
                data.style = 'full';
                data.username = 'jqwidgets';
                data.maxRows = 50;
                return data;
            }
        }
    );
 
    columns: any[] =
    [
        { text: 'Country Name', dataField: 'countryName', width: 200 },
        { text: 'City', dataField: 'name', width: 250 },
        { text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
        { text: 'Continent Code', dataField: 'continentCode' }
    ];
}

Sets or gets the pagerButtonsCount property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDataTable #myDataTable 
            [source]="dataAdapter" [columns]="columns" [width]="850" [pagerButtonsCount]="10">
        </jqxDataTable>
    `
})
 
export class AppComponent {
    source: any =
    {
        dataType: 'jsonp',
        dataFields: [
            { name: 'countryName', type: 'string' },
            { name: 'name', type: 'string' },
            { name: 'population', type: 'float' },
            { name: 'continentCode', type: 'string' }
        ],
        url: 'http://api.geonames.org/searchJSON'
    };
         
    dataAdapter: any = new jqx.dataAdapter(this.source,
        {
            formatData: function (data: any): any {
                data.featureClass = 'P';
                data.style = 'full';
                data.username = 'jqwidgets';
                data.maxRows = 50;
                return data;
            }
        }
    );
 
    columns: any[] =
    [
        { text: 'Country Name', dataField: 'countryName', width: 200 },
        { text: 'City', dataField: 'name', width: 250 },
        { text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
        { text: 'Continent Code', dataField: 'continentCode' }
    ];
}

Sets or gets the pagerRenderer property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDataTable #myDataTable 
            [source]="dataAdapter" [columns]="columns" [width]="850" [pagerRenderer]="pagerRenderer">
        </jqxDataTable>
    `
})
 
export class AppComponent {
    source: any =
    {
        dataType: 'jsonp',
        dataFields: [
            { name: 'countryName', type: 'string' },
            { name: 'name', type: 'string' },
            { name: 'population', type: 'float' },
            { name: 'continentCode', type: 'string' }
        ],
        url: 'http://api.geonames.org/searchJSON'
    };
         
    dataAdapter: any = new jqx.dataAdapter(this.source,
        {
            formatData: function (data: any): any {
                data.featureClass = 'P';
                data.style = 'full';
                data.username = 'jqwidgets';
                data.maxRows = 50;
                return data;
            }
        }
    );
 
    columns: any[] =
    [
        { text: 'Country Name', dataField: 'countryName', width: 200 },
        { text: 'City', dataField: 'name', width: 250 },
        { text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
        { text: 'Continent Code', dataField: 'continentCode' }
    ];
}

Sets or gets the ready property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDataTable #myDataTable 
            [source]="dataAdapter" [columns]="columns" [width]="850" [ready]="ready">
        </jqxDataTable>
    `
})
 
export class AppComponent {
    source: any =
    {
        dataType: 'jsonp',
        dataFields: [
            { name: 'countryName', type: 'string' },
            { name: 'name', type: 'string' },
            { name: 'population', type: 'float' },
            { name: 'continentCode', type: 'string' }
        ],
        url: 'http://api.geonames.org/searchJSON'
    };
         
    dataAdapter: any = new jqx.dataAdapter(this.source,
        {
            formatData: function (data: any): any {
                data.featureClass = 'P';
                data.style = 'full';
                data.username = 'jqwidgets';
                data.maxRows = 50;
                return data;
            }
        }
    );
 
    columns: any[] =
    [
        { text: 'Country Name', dataField: 'countryName', width: 200 },
        { text: 'City', dataField: 'name', width: 250 },
        { text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
        { text: 'Continent Code', dataField: 'continentCode' }
    ];
}

Sets or gets the rowDetails property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDataTable #myDataTable 
            [source]="dataAdapter" [columns]="columns" [width]="850" [rowDetails]="true">
        </jqxDataTable>
    `
})
 
export class AppComponent {
    source: any =
    {
        dataType: 'jsonp',
        dataFields: [
            { name: 'countryName', type: 'string' },
            { name: 'name', type: 'string' },
            { name: 'population', type: 'float' },
            { name: 'continentCode', type: 'string' }
        ],
        url: 'http://api.geonames.org/searchJSON'
    };
         
    dataAdapter: any = new jqx.dataAdapter(this.source,
        {
            formatData: function (data: any): any {
                data.featureClass = 'P';
                data.style = 'full';
                data.username = 'jqwidgets';
                data.maxRows = 50;
                return data;
            }
        }
    );
 
    columns: any[] =
    [
        { text: 'Country Name', dataField: 'countryName', width: 200 },
        { text: 'City', dataField: 'name', width: 250 },
        { text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
        { text: 'Continent Code', dataField: 'continentCode' }
    ];
}

Sets or gets the renderToolbar property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDataTable #myDataTable 
            [source]="dataAdapter" [columns]="columns" [width]="850" [renderToolbar]="renderToolbar">
        </jqxDataTable>
    `
})
 
export class AppComponent {
    source: any =
    {
        dataType: 'jsonp',
        dataFields: [
            { name: 'countryName', type: 'string' },
            { name: 'name', type: 'string' },
            { name: 'population', type: 'float' },
            { name: 'continentCode', type: 'string' }
        ],
        url: 'http://api.geonames.org/searchJSON'
    };
         
    dataAdapter: any = new jqx.dataAdapter(this.source,
        {
            formatData: function (data: any): any {
                data.featureClass = 'P';
                data.style = 'full';
                data.username = 'jqwidgets';
                data.maxRows = 50;
                return data;
            }
        }
    );
 
    columns: any[] =
    [
        { text: 'Country Name', dataField: 'countryName', width: 200 },
        { text: 'City', dataField: 'name', width: 250 },
        { text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
        { text: 'Continent Code', dataField: 'continentCode' }
    ];
}

Sets or gets the renderStatusbar property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDataTable #myDataTable 
            [source]="dataAdapter" [columns]="columns" [width]="850" [renderStatusbar]="renderStatusbar">
        </jqxDataTable>
    `
})
 
export class AppComponent {
    source: any =
    {
        dataType: 'jsonp',
        dataFields: [
            { name: 'countryName', type: 'string' },
            { name: 'name', type: 'string' },
            { name: 'population', type: 'float' },
            { name: 'continentCode', type: 'string' }
        ],
        url: 'http://api.geonames.org/searchJSON'
    };
         
    dataAdapter: any = new jqx.dataAdapter(this.source,
        {
            formatData: function (data: any): any {
                data.featureClass = 'P';
                data.style = 'full';
                data.username = 'jqwidgets';
                data.maxRows = 50;
                return data;
            }
        }
    );
 
    columns: any[] =
    [
        { text: 'Country Name', dataField: 'countryName', width: 200 },
        { text: 'City', dataField: 'name', width: 250 },
        { text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
        { text: 'Continent Code', dataField: 'continentCode' }
    ];
}

Sets or gets the rendering property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDataTable #myDataTable 
            [source]="dataAdapter" [columns]="columns" [width]="850" [rendering]="rendering">
        </jqxDataTable>
    `
})
 
export class AppComponent {
    source: any =
    {
        dataType: 'jsonp',
        dataFields: [
            { name: 'countryName', type: 'string' },
            { name: 'name', type: 'string' },
            { name: 'population', type: 'float' },
            { name: 'continentCode', type: 'string' }
        ],
        url: 'http://api.geonames.org/searchJSON'
    };
         
    dataAdapter: any = new jqx.dataAdapter(this.source,
        {
            formatData: function (data: any): any {
                data.featureClass = 'P';
                data.style = 'full';
                data.username = 'jqwidgets';
                data.maxRows = 50;
                return data;
            }
        }
    );
 
    columns: any[] =
    [
        { text: 'Country Name', dataField: 'countryName', width: 200 },
        { text: 'City', dataField: 'name', width: 250 },
        { text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
        { text: 'Continent Code', dataField: 'continentCode' }
    ];
}

Sets or gets the rendered property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDataTable #myDataTable 
            [source]="dataAdapter" [columns]="columns" [width]="850" [rendered]="rendered">
        </jqxDataTable>
    `
})
 
export class AppComponent {
    source: any =
    {
        dataType: 'jsonp',
        dataFields: [
            { name: 'countryName', type: 'string' },
            { name: 'name', type: 'string' },
            { name: 'population', type: 'float' },
            { name: 'continentCode', type: 'string' }
        ],
        url: 'http://api.geonames.org/searchJSON'
    };
         
    dataAdapter: any = new jqx.dataAdapter(this.source,
        {
            formatData: function (data: any): any {
                data.featureClass = 'P';
                data.style = 'full';
                data.username = 'jqwidgets';
                data.maxRows = 50;
                return data;
            }
        }
    );
 
    columns: any[] =
    [
        { text: 'Country Name', dataField: 'countryName', width: 200 },
        { text: 'City', dataField: 'name', width: 250 },
        { text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
        { text: 'Continent Code', dataField: 'continentCode' }
    ];
}

Sets or gets the rtl property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDataTable #myDataTable 
            [source]="dataAdapter" [columns]="columns" [width]="850" [rtl]="true">
        </jqxDataTable>
    `
})
 
export class AppComponent {
    source: any =
    {
        dataType: 'jsonp',
        dataFields: [
            { name: 'countryName', type: 'string' },
            { name: 'name', type: 'string' },
            { name: 'population', type: 'float' },
            { name: 'continentCode', type: 'string' }
        ],
        url: 'http://api.geonames.org/searchJSON'
    };
         
    dataAdapter: any = new jqx.dataAdapter(this.source,
        {
            formatData: function (data: any): any {
                data.featureClass = 'P';
                data.style = 'full';
                data.username = 'jqwidgets';
                data.maxRows = 50;
                return data;
            }
        }
    );
 
    columns: any[] =
    [
        { text: 'Country Name', dataField: 'countryName', width: 200 },
        { text: 'City', dataField: 'name', width: 250 },
        { text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
        { text: 'Continent Code', dataField: 'continentCode' }
    ];
}

Sets or gets the source property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDataTable #myDataTable 
            [source]="dataAdapter" [columns]="columns" [width]="850">
        </jqxDataTable>
    `
})
 
export class AppComponent {
    source: any =
    {
        dataType: 'jsonp',
        dataFields: [
            { name: 'countryName', type: 'string' },
            { name: 'name', type: 'string' },
            { name: 'population', type: 'float' },
            { name: 'continentCode', type: 'string' }
        ],
        url: 'http://api.geonames.org/searchJSON'
    };
         
    dataAdapter: any = new jqx.dataAdapter(this.source,
        {
            formatData: function (data: any): any {
                data.featureClass = 'P';
                data.style = 'full';
                data.username = 'jqwidgets';
                data.maxRows = 50;
                return data;
            }
        }
    );
 
    columns: any[] =
    [
        { text: 'Country Name', dataField: 'countryName', width: 200 },
        { text: 'City', dataField: 'name', width: 250 },
        { text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
        { text: 'Continent Code', dataField: 'continentCode' }
    ];
}

Sets or gets the sortable property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDataTable #myDataTable 
            [source]="dataAdapter" [columns]="columns" [width]="850" [sortable]="true">
        </jqxDataTable>
    `
})
 
export class AppComponent {
    source: any =
    {
        dataType: 'jsonp',
        dataFields: [
            { name: 'countryName', type: 'string' },
            { name: 'name', type: 'string' },
            { name: 'population', type: 'float' },
            { name: 'continentCode', type: 'string' }
        ],
        url: 'http://api.geonames.org/searchJSON'
    };
         
    dataAdapter: any = new jqx.dataAdapter(this.source,
        {
            formatData: function (data: any): any {
                data.featureClass = 'P';
                data.style = 'full';
                data.username = 'jqwidgets';
                data.maxRows = 50;
                return data;
            }
        }
    );
 
    columns: any[] =
    [
        { text: 'Country Name', dataField: 'countryName', width: 200 },
        { text: 'City', dataField: 'name', width: 250 },
        { text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
        { text: 'Continent Code', dataField: 'continentCode' }
    ];
}

Sets or gets the showAggregates property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDataTable #myDataTable 
            [source]="dataAdapter" [columns]="columns" [width]="850" [showAggregates]="true">
        </jqxDataTable>
    `
})
 
export class AppComponent {
    source: any =
    {
        dataType: 'jsonp',
        dataFields: [
            { name: 'countryName', type: 'string' },
            { name: 'name', type: 'string' },
            { name: 'population', type: 'float' },
            { name: 'continentCode', type: 'string' }
        ],
        url: 'http://api.geonames.org/searchJSON'
    };
         
    dataAdapter: any = new jqx.dataAdapter(this.source,
        {
            formatData: function (data: any): any {
                data.featureClass = 'P';
                data.style = 'full';
                data.username = 'jqwidgets';
                data.maxRows = 50;
                return data;
            }
        }
    );
 
    columns: any[] =
    [
        { text: 'Country Name', dataField: 'countryName', width: 200 },
        { text: 'City', dataField: 'name', width: 250 },
        { text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
        { text: 'Continent Code', dataField: 'continentCode' }
    ];
}

Sets or gets the showToolbar property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDataTable #myDataTable 
            [source]="dataAdapter" [columns]="columns" [width]="850" [showToolbar]="true">
        </jqxDataTable>
    `
})
 
export class AppComponent {
    source: any =
    {
        dataType: 'jsonp',
        dataFields: [
            { name: 'countryName', type: 'string' },
            { name: 'name', type: 'string' },
            { name: 'population', type: 'float' },
            { name: 'continentCode', type: 'string' }
        ],
        url: 'http://api.geonames.org/searchJSON'
    };
         
    dataAdapter: any = new jqx.dataAdapter(this.source,
        {
            formatData: function (data: any): any {
                data.featureClass = 'P';
                data.style = 'full';
                data.username = 'jqwidgets';
                data.maxRows = 50;
                return data;
            }
        }
    );
 
    columns: any[] =
    [
        { text: 'Country Name', dataField: 'countryName', width: 200 },
        { text: 'City', dataField: 'name', width: 250 },
        { text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
        { text: 'Continent Code', dataField: 'continentCode' }
    ];
}

Sets or gets the showStatusbar property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDataTable #myDataTable 
            [source]="dataAdapter" [columns]="columns" [width]="850" [showStatusbar]="true">
        </jqxDataTable>
    `
})
 
export class AppComponent {
    source: any =
    {
        dataType: 'jsonp',
        dataFields: [
            { name: 'countryName', type: 'string' },
            { name: 'name', type: 'string' },
            { name: 'population', type: 'float' },
            { name: 'continentCode', type: 'string' }
        ],
        url: 'http://api.geonames.org/searchJSON'
    };
         
    dataAdapter: any = new jqx.dataAdapter(this.source,
        {
            formatData: function (data: any): any {
                data.featureClass = 'P';
                data.style = 'full';
                data.username = 'jqwidgets';
                data.maxRows = 50;
                return data;
            }
        }
    );
 
    columns: any[] =
    [
        { text: 'Country Name', dataField: 'countryName', width: 200 },
        { text: 'City', dataField: 'name', width: 250 },
        { text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
        { text: 'Continent Code', dataField: 'continentCode' }
    ];
}

Sets or gets the statusBarHeight property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDataTable #myDataTable 
            [source]="dataAdapter" [columns]="columns" [width]="850" [statusBarHeight]="40">
        </jqxDataTable>
    `
})
 
export class AppComponent {
    source: any =
    {
        dataType: 'jsonp',
        dataFields: [
            { name: 'countryName', type: 'string' },
            { name: 'name', type: 'string' },
            { name: 'population', type: 'float' },
            { name: 'continentCode', type: 'string' }
        ],
        url: 'http://api.geonames.org/searchJSON'
    };
         
    dataAdapter: any = new jqx.dataAdapter(this.source,
        {
            formatData: function (data: any): any {
                data.featureClass = 'P';
                data.style = 'full';
                data.username = 'jqwidgets';
                data.maxRows = 50;
                return data;
            }
        }
    );
 
    columns: any[] =
    [
        { text: 'Country Name', dataField: 'countryName', width: 200 },
        { text: 'City', dataField: 'name', width: 250 },
        { text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
        { text: 'Continent Code', dataField: 'continentCode' }
    ];
}

Sets or gets the scrollBarSize property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDataTable #myDataTable 
            [source]="dataAdapter" [columns]="columns" [width]="850" [scrollBarSize]="20">
        </jqxDataTable>
    `
})
 
export class AppComponent {
    source: any =
    {
        dataType: 'jsonp',
        dataFields: [
            { name: 'countryName', type: 'string' },
            { name: 'name', type: 'string' },
            { name: 'population', type: 'float' },
            { name: 'continentCode', type: 'string' }
        ],
        url: 'http://api.geonames.org/searchJSON'
    };
         
    dataAdapter: any = new jqx.dataAdapter(this.source,
        {
            formatData: function (data: any): any {
                data.featureClass = 'P';
                data.style = 'full';
                data.username = 'jqwidgets';
                data.maxRows = 50;
                return data;
            }
        }
    );
 
    columns: any[] =
    [
        { text: 'Country Name', dataField: 'countryName', width: 200 },
        { text: 'City', dataField: 'name', width: 250 },
        { text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
        { text: 'Continent Code', dataField: 'continentCode' }
    ];
}

enum DataTableSelectionMode {
     multipleRows,
     singleRow,
     custom
}

Sets or gets the selectionMode property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDataTable #myDataTable 
            [source]="dataAdapter" [columns]="columns" [width]="850" [selectionMode]="'singleRow'">
        </jqxDataTable>
    `
})
 
export class AppComponent {
    source: any =
    {
        dataType: 'jsonp',
        dataFields: [
            { name: 'countryName', type: 'string' },
            { name: 'name', type: 'string' },
            { name: 'population', type: 'float' },
            { name: 'continentCode', type: 'string' }
        ],
        url: 'http://api.geonames.org/searchJSON'
    };
         
    dataAdapter: any = new jqx.dataAdapter(this.source,
        {
            formatData: function (data: any): any {
                data.featureClass = 'P';
                data.style = 'full';
                data.username = 'jqwidgets';
                data.maxRows = 50;
                return data;
            }
        }
    );
 
    columns: any[] =
    [
        { text: 'Country Name', dataField: 'countryName', width: 200 },
        { text: 'City', dataField: 'name', width: 250 },
        { text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
        { text: 'Continent Code', dataField: 'continentCode' }
    ];
}

Sets or gets the serverProcessing property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDataTable #myDataTable 
            [source]="dataAdapter" [columns]="columns" [width]="850" [serverProcessing]="true">
        </jqxDataTable>
    `
})
 
export class AppComponent {
    source: any =
    {
        dataType: 'jsonp',
        dataFields: [
            { name: 'countryName', type: 'string' },
            { name: 'name', type: 'string' },
            { name: 'population', type: 'float' },
            { name: 'continentCode', type: 'string' }
        ],
        url: 'http://api.geonames.org/searchJSON'
    };
         
    dataAdapter: any = new jqx.dataAdapter(this.source,
        {
            formatData: function (data: any): any {
                data.featureClass = 'P';
                data.style = 'full';
                data.username = 'jqwidgets';
                data.maxRows = 50;
                return data;
            }
        }
    );
 
    columns: any[] =
    [
        { text: 'Country Name', dataField: 'countryName', width: 200 },
        { text: 'City', dataField: 'name', width: 250 },
        { text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
        { text: 'Continent Code', dataField: 'continentCode' }
    ];
}

Sets or gets the showHeader property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDataTable #myDataTable 
            [source]="dataAdapter" [columns]="columns" [width]="850" [showHeader]="false">
        </jqxDataTable>
    `
})
 
export class AppComponent {
    source: any =
    {
        dataType: 'jsonp',
        dataFields: [
            { name: 'countryName', type: 'string' },
            { name: 'name', type: 'string' },
            { name: 'population', type: 'float' },
            { name: 'continentCode', type: 'string' }
        ],
        url: 'http://api.geonames.org/searchJSON'
    };
         
    dataAdapter: any = new jqx.dataAdapter(this.source,
        {
            formatData: function (data: any): any {
                data.featureClass = 'P';
                data.style = 'full';
                data.username = 'jqwidgets';
                data.maxRows = 50;
                return data;
            }
        }
    );
 
    columns: any[] =
    [
        { text: 'Country Name', dataField: 'countryName', width: 200 },
        { text: 'City', dataField: 'name', width: 250 },
        { text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
        { text: 'Continent Code', dataField: 'continentCode' }
    ];
}

Sets or gets the theme property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDataTable #myDataTable 
            [source]="dataAdapter" [columns]="columns" [width]="850" [theme]="'energyblue'">
        </jqxDataTable>
    `
})
 
export class AppComponent {
    source: any =
    {
        dataType: 'jsonp',
        dataFields: [
            { name: 'countryName', type: 'string' },
            { name: 'name', type: 'string' },
            { name: 'population', type: 'float' },
            { name: 'continentCode', type: 'string' }
        ],
        url: 'http://api.geonames.org/searchJSON'
    };
         
    dataAdapter: any = new jqx.dataAdapter(this.source,
        {
            formatData: function (data: any): any {
                data.featureClass = 'P';
                data.style = 'full';
                data.username = 'jqwidgets';
                data.maxRows = 50;
                return data;
            }
        }
    );
 
    columns: any[] =
    [
        { text: 'Country Name', dataField: 'countryName', width: 200 },
        { text: 'City', dataField: 'name', width: 250 },
        { text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
        { text: 'Continent Code', dataField: 'continentCode' }
    ];
}

Sets or gets the toolbarHeight property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDataTable #myDataTable 
            [source]="dataAdapter" [columns]="columns" [width]="850" [toolbarHeight]="40">
        </jqxDataTable>
    `
})
 
export class AppComponent {
    source: any =
    {
        dataType: 'jsonp',
        dataFields: [
            { name: 'countryName', type: 'string' },
            { name: 'name', type: 'string' },
            { name: 'population', type: 'float' },
            { name: 'continentCode', type: 'string' }
        ],
        url: 'http://api.geonames.org/searchJSON'
    };
         
    dataAdapter: any = new jqx.dataAdapter(this.source,
        {
            formatData: function (data: any): any {
                data.featureClass = 'P';
                data.style = 'full';
                data.username = 'jqwidgets';
                data.maxRows = 50;
                return data;
            }
        }
    );
 
    columns: any[] =
    [
        { text: 'Country Name', dataField: 'countryName', width: 200 },
        { text: 'City', dataField: 'name', width: 250 },
        { text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
        { text: 'Continent Code', dataField: 'continentCode' }
    ];
}

Sets or gets the width property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDataTable #myDataTable 
            [source]="dataAdapter" [columns]="columns" [width]="850">
        </jqxDataTable>
    `
})
 
export class AppComponent {
    source: any =
    {
        dataType: 'jsonp',
        dataFields: [
            { name: 'countryName', type: 'string' },
            { name: 'name', type: 'string' },
            { name: 'population', type: 'float' },
            { name: 'continentCode', type: 'string' }
        ],
        url: 'http://api.geonames.org/searchJSON'
    };
         
    dataAdapter: any = new jqx.dataAdapter(this.source,
        {
            formatData: function (data: any): any {
                data.featureClass = 'P';
                data.style = 'full';
                data.username = 'jqwidgets';
                data.maxRows = 50;
                return data;
            }
        }
    );
 
    columns: any[] =
    [
        { text: 'Country Name', dataField: 'countryName', width: 200 },
        { text: 'City', dataField: 'name', width: 250 },
        { text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
        { text: 'Continent Code', dataField: 'continentCode' }
    ];
}

This event is triggered when the jqxDataTable binding is completed. *Bind to that event before the jqxDataTable's initialization. Otherwise, if you are populating the widget from a local data source and bind to bindingComplete after the initialization, the event could be already raised when you attach an event handler to it.

Code examples

Bind to the bindingComplete event of jqxDataTable.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDataTable #myDataTable (onBindingComplete)="BindingComplete($event)"
            [source]="dataAdapter" [columns]="columns" [width]="850">
        </jqxDataTable>
    `
})
 
export class AppComponent {
    BindingComplete(event: any): void 
    {
        // Do Something
    }

    source: any =
    {
        dataType: 'jsonp',
        dataFields: [
            { name: 'countryName', type: 'string' },
            { name: 'name', type: 'string' },
            { name: 'population', type: 'float' },
            { name: 'continentCode', type: 'string' }
        ],
        url: 'http://api.geonames.org/searchJSON'
    };
         
    dataAdapter: any = new jqx.dataAdapter(this.source,
        {
            formatData: function (data: any): any {
                data.featureClass = 'P';
                data.style = 'full';
                data.username = 'jqwidgets';
                data.maxRows = 50;
                return data;
            }
        }
    );
 
    columns: any[] =
    [
        { text: 'Country Name', dataField: 'countryName', width: 200 },
        { text: 'City', dataField: 'name', width: 250 },
        { text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
        { text: 'Continent Code', dataField: 'continentCode' }
    ];
}
							
						

This is triggered when a cell edit begins. Note: To turn on cell editing, you should set the editSettings property and make sure that its editSingleCell sub property is set to true.

Code examples

Bind to the cellBeginEdit event of jqxDataTable.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDataTable #myDataTable (onCellBeginEdit)="CellBeginEdit($event)"
            [source]="dataAdapter" [columns]="columns" [width]="850">
        </jqxDataTable>
    `
})
 
export class AppComponent {
    CellBeginEdit(event: any): void 
    {
        // Do Something
    }

    source: any =
    {
        dataType: 'jsonp',
        dataFields: [
            { name: 'countryName', type: 'string' },
            { name: 'name', type: 'string' },
            { name: 'population', type: 'float' },
            { name: 'continentCode', type: 'string' }
        ],
        url: 'http://api.geonames.org/searchJSON'
    };
         
    dataAdapter: any = new jqx.dataAdapter(this.source,
        {
            formatData: function (data: any): any {
                data.featureClass = 'P';
                data.style = 'full';
                data.username = 'jqwidgets';
                data.maxRows = 50;
                return data;
            }
        }
    );
 
    columns: any[] =
    [
        { text: 'Country Name', dataField: 'countryName', width: 200 },
        { text: 'City', dataField: 'name', width: 250 },
        { text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
        { text: 'Continent Code', dataField: 'continentCode' }
    ];
}
							
						

This is triggered when a cell edit ends. Note: To turn on cell editing, you should set the editSettings property and make sure that its editSingleCell sub property is set to true.

Code examples

Bind to the cellEndEdit event of jqxDataTable.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDataTable #myDataTable (onCellEndEdit)="CellEndEdit($event)"
            [source]="dataAdapter" [columns]="columns" [width]="850">
        </jqxDataTable>
    `
})
 
export class AppComponent {
    CellEndEdit(event: any): void 
    {
        // Do Something
    }

    source: any =
    {
        dataType: 'jsonp',
        dataFields: [
            { name: 'countryName', type: 'string' },
            { name: 'name', type: 'string' },
            { name: 'population', type: 'float' },
            { name: 'continentCode', type: 'string' }
        ],
        url: 'http://api.geonames.org/searchJSON'
    };
         
    dataAdapter: any = new jqx.dataAdapter(this.source,
        {
            formatData: function (data: any): any {
                data.featureClass = 'P';
                data.style = 'full';
                data.username = 'jqwidgets';
                data.maxRows = 50;
                return data;
            }
        }
    );
 
    columns: any[] =
    [
        { text: 'Country Name', dataField: 'countryName', width: 200 },
        { text: 'City', dataField: 'name', width: 250 },
        { text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
        { text: 'Continent Code', dataField: 'continentCode' }
    ];
}
							
						

This event is triggered when a cell value is changed.

Code examples

Bind to the cellValueChanged event of jqxDataTable.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDataTable #myDataTable (onCellValueChanged)="CellValueChanged($event)"
            [source]="dataAdapter" [columns]="columns" [width]="850">
        </jqxDataTable>
    `
})
 
export class AppComponent {
    CellValueChanged(event: any): void 
    {
        // Do Something
    }

    source: any =
    {
        dataType: 'jsonp',
        dataFields: [
            { name: 'countryName', type: 'string' },
            { name: 'name', type: 'string' },
            { name: 'population', type: 'float' },
            { name: 'continentCode', type: 'string' }
        ],
        url: 'http://api.geonames.org/searchJSON'
    };
         
    dataAdapter: any = new jqx.dataAdapter(this.source,
        {
            formatData: function (data: any): any {
                data.featureClass = 'P';
                data.style = 'full';
                data.username = 'jqwidgets';
                data.maxRows = 50;
                return data;
            }
        }
    );
 
    columns: any[] =
    [
        { text: 'Country Name', dataField: 'countryName', width: 200 },
        { text: 'City', dataField: 'name', width: 250 },
        { text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
        { text: 'Continent Code', dataField: 'continentCode' }
    ];
}
							
						

This event is triggered when a column is resized.

Code examples

Bind to the columnResized event of jqxDataTable.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDataTable #myDataTable (onColumnResized)="ColumnResized($event)"
            [source]="dataAdapter" [columns]="columns" [width]="850">
        </jqxDataTable>
    `
})
 
export class AppComponent {
    ColumnResized(event: any): void 
    {
        // Do Something
    }

    source: any =
    {
        dataType: 'jsonp',
        dataFields: [
            { name: 'countryName', type: 'string' },
            { name: 'name', type: 'string' },
            { name: 'population', type: 'float' },
            { name: 'continentCode', type: 'string' }
        ],
        url: 'http://api.geonames.org/searchJSON'
    };
         
    dataAdapter: any = new jqx.dataAdapter(this.source,
        {
            formatData: function (data: any): any {
                data.featureClass = 'P';
                data.style = 'full';
                data.username = 'jqwidgets';
                data.maxRows = 50;
                return data;
            }
        }
    );
 
    columns: any[] =
    [
        { text: 'Country Name', dataField: 'countryName', width: 200 },
        { text: 'City', dataField: 'name', width: 250 },
        { text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
        { text: 'Continent Code', dataField: 'continentCode' }
    ];
}
							
						

This event is triggered when the column's order is changed.

Code examples

Bind to the columnReordered event of jqxDataTable.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDataTable #myDataTable (onColumnReordered)="ColumnReordered($event)"
            [source]="dataAdapter" [columns]="columns" [width]="850">
        </jqxDataTable>
    `
})
 
export class AppComponent {
    ColumnReordered(event: any): void 
    {
        // Do Something
    }

    source: any =
    {
        dataType: 'jsonp',
        dataFields: [
            { name: 'countryName', type: 'string' },
            { name: 'name', type: 'string' },
            { name: 'population', type: 'float' },
            { name: 'continentCode', type: 'string' }
        ],
        url: 'http://api.geonames.org/searchJSON'
    };
         
    dataAdapter: any = new jqx.dataAdapter(this.source,
        {
            formatData: function (data: any): any {
                data.featureClass = 'P';
                data.style = 'full';
                data.username = 'jqwidgets';
                data.maxRows = 50;
                return data;
            }
        }
    );
 
    columns: any[] =
    [
        { text: 'Country Name', dataField: 'countryName', width: 200 },
        { text: 'City', dataField: 'name', width: 250 },
        { text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
        { text: 'Continent Code', dataField: 'continentCode' }
    ];
}
							
						

This event is triggered when the jqxDataTable sort order or sort column is changed.

Code examples

Bind to the sort event of jqxDataTable.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDataTable #myDataTable (onSort)="Sort($event)"
            [source]="dataAdapter" [columns]="columns" [width]="850">
        </jqxDataTable>
    `
})
 
export class AppComponent {
    Sort(event: any): void 
    {
        // Do Something
    }

    source: any =
    {
        dataType: 'jsonp',
        dataFields: [
            { name: 'countryName', type: 'string' },
            { name: 'name', type: 'string' },
            { name: 'population', type: 'float' },
            { name: 'continentCode', type: 'string' }
        ],
        url: 'http://api.geonames.org/searchJSON'
    };
         
    dataAdapter: any = new jqx.dataAdapter(this.source,
        {
            formatData: function (data: any): any {
                data.featureClass = 'P';
                data.style = 'full';
                data.username = 'jqwidgets';
                data.maxRows = 50;
                return data;
            }
        }
    );
 
    columns: any[] =
    [
        { text: 'Country Name', dataField: 'countryName', width: 200 },
        { text: 'City', dataField: 'name', width: 250 },
        { text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
        { text: 'Continent Code', dataField: 'continentCode' }
    ];
}
							
						

This event is triggered when the jqxDataTable's rows filter is changed.

Code examples

Bind to the filter event of jqxDataTable.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDataTable #myDataTable (onFilter)="Filter($event)"
            [source]="dataAdapter" [columns]="columns" [width]="850">
        </jqxDataTable>
    `
})
 
export class AppComponent {
    Filter(event: any): void 
    {
        // Do Something
    }

    source: any =
    {
        dataType: 'jsonp',
        dataFields: [
            { name: 'countryName', type: 'string' },
            { name: 'name', type: 'string' },
            { name: 'population', type: 'float' },
            { name: 'continentCode', type: 'string' }
        ],
        url: 'http://api.geonames.org/searchJSON'
    };
         
    dataAdapter: any = new jqx.dataAdapter(this.source,
        {
            formatData: function (data: any): any {
                data.featureClass = 'P';
                data.style = 'full';
                data.username = 'jqwidgets';
                data.maxRows = 50;
                return data;
            }
        }
    );
 
    columns: any[] =
    [
        { text: 'Country Name', dataField: 'countryName', width: 200 },
        { text: 'City', dataField: 'name', width: 250 },
        { text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
        { text: 'Continent Code', dataField: 'continentCode' }
    ];
}
							
						

This is triggered when the jqxDataTable's current page is changed.

Code examples

Bind to the pageChanged event of jqxDataTable.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDataTable #myDataTable (onPageChanged)="PageChanged($event)"
            [source]="dataAdapter" [columns]="columns" [width]="850">
        </jqxDataTable>
    `
})
 
export class AppComponent {
    PageChanged(event: any): void 
    {
        // Do Something
    }

    source: any =
    {
        dataType: 'jsonp',
        dataFields: [
            { name: 'countryName', type: 'string' },
            { name: 'name', type: 'string' },
            { name: 'population', type: 'float' },
            { name: 'continentCode', type: 'string' }
        ],
        url: 'http://api.geonames.org/searchJSON'
    };
         
    dataAdapter: any = new jqx.dataAdapter(this.source,
        {
            formatData: function (data: any): any {
                data.featureClass = 'P';
                data.style = 'full';
                data.username = 'jqwidgets';
                data.maxRows = 50;
                return data;
            }
        }
    );
 
    columns: any[] =
    [
        { text: 'Country Name', dataField: 'countryName', width: 200 },
        { text: 'City', dataField: 'name', width: 250 },
        { text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
        { text: 'Continent Code', dataField: 'continentCode' }
    ];
}
							
						

This is triggered when the jqxDataTable's page size is changed.

Code examples

Bind to the pageSizeChanged event of jqxDataTable.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDataTable #myDataTable (onPageSizeChanged)="PageSizeChanged($event)"
            [source]="dataAdapter" [columns]="columns" [width]="850">
        </jqxDataTable>
    `
})
 
export class AppComponent {
    PageSizeChanged(event: any): void 
    {
        // Do Something
    }

    source: any =
    {
        dataType: 'jsonp',
        dataFields: [
            { name: 'countryName', type: 'string' },
            { name: 'name', type: 'string' },
            { name: 'population', type: 'float' },
            { name: 'continentCode', type: 'string' }
        ],
        url: 'http://api.geonames.org/searchJSON'
    };
         
    dataAdapter: any = new jqx.dataAdapter(this.source,
        {
            formatData: function (data: any): any {
                data.featureClass = 'P';
                data.style = 'full';
                data.username = 'jqwidgets';
                data.maxRows = 50;
                return data;
            }
        }
    );
 
    columns: any[] =
    [
        { text: 'Country Name', dataField: 'countryName', width: 200 },
        { text: 'City', dataField: 'name', width: 250 },
        { text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
        { text: 'Continent Code', dataField: 'continentCode' }
    ];
}
							
						

This is triggered when a row is clicked.

Code examples

Bind to the rowClick event of jqxDataTable.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDataTable #myDataTable (onRowClick)="RowClick($event)"
            [source]="dataAdapter" [columns]="columns" [width]="850">
        </jqxDataTable>
    `
})
 
export class AppComponent {
    RowClick(event: any): void 
    {
        // Do Something
    }

    source: any =
    {
        dataType: 'jsonp',
        dataFields: [
            { name: 'countryName', type: 'string' },
            { name: 'name', type: 'string' },
            { name: 'population', type: 'float' },
            { name: 'continentCode', type: 'string' }
        ],
        url: 'http://api.geonames.org/searchJSON'
    };
         
    dataAdapter: any = new jqx.dataAdapter(this.source,
        {
            formatData: function (data: any): any {
                data.featureClass = 'P';
                data.style = 'full';
                data.username = 'jqwidgets';
                data.maxRows = 50;
                return data;
            }
        }
    );
 
    columns: any[] =
    [
        { text: 'Country Name', dataField: 'countryName', width: 200 },
        { text: 'City', dataField: 'name', width: 250 },
        { text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
        { text: 'Continent Code', dataField: 'continentCode' }
    ];
}
							
						

This is triggered when a row is double-clicked.

Code examples

Bind to the rowDoubleClick event of jqxDataTable.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDataTable #myDataTable (onRowDoubleClick)="RowDoubleClick($event)"
            [source]="dataAdapter" [columns]="columns" [width]="850">
        </jqxDataTable>
    `
})
 
export class AppComponent {
    RowDoubleClick(event: any): void 
    {
        // Do Something
    }

    source: any =
    {
        dataType: 'jsonp',
        dataFields: [
            { name: 'countryName', type: 'string' },
            { name: 'name', type: 'string' },
            { name: 'population', type: 'float' },
            { name: 'continentCode', type: 'string' }
        ],
        url: 'http://api.geonames.org/searchJSON'
    };
         
    dataAdapter: any = new jqx.dataAdapter(this.source,
        {
            formatData: function (data: any): any {
                data.featureClass = 'P';
                data.style = 'full';
                data.username = 'jqwidgets';
                data.maxRows = 50;
                return data;
            }
        }
    );
 
    columns: any[] =
    [
        { text: 'Country Name', dataField: 'countryName', width: 200 },
        { text: 'City', dataField: 'name', width: 250 },
        { text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
        { text: 'Continent Code', dataField: 'continentCode' }
    ];
}
							
						

This is triggered when a row is selected.

Code examples

Bind to the rowSelect event of jqxDataTable.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDataTable #myDataTable (onRowSelect)="RowSelect($event)"
            [source]="dataAdapter" [columns]="columns" [width]="850">
        </jqxDataTable>
    `
})
 
export class AppComponent {
    RowSelect(event: any): void 
    {
        // Do Something
    }

    source: any =
    {
        dataType: 'jsonp',
        dataFields: [
            { name: 'countryName', type: 'string' },
            { name: 'name', type: 'string' },
            { name: 'population', type: 'float' },
            { name: 'continentCode', type: 'string' }
        ],
        url: 'http://api.geonames.org/searchJSON'
    };
         
    dataAdapter: any = new jqx.dataAdapter(this.source,
        {
            formatData: function (data: any): any {
                data.featureClass = 'P';
                data.style = 'full';
                data.username = 'jqwidgets';
                data.maxRows = 50;
                return data;
            }
        }
    );
 
    columns: any[] =
    [
        { text: 'Country Name', dataField: 'countryName', width: 200 },
        { text: 'City', dataField: 'name', width: 250 },
        { text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
        { text: 'Continent Code', dataField: 'continentCode' }
    ];
}
							
						

This is triggered when a row is unselected.

Code examples

Bind to the rowUnselect event of jqxDataTable.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDataTable #myDataTable (onRowUnselect)="RowUnselect($event)"
            [source]="dataAdapter" [columns]="columns" [width]="850">
        </jqxDataTable>
    `
})
 
export class AppComponent {
    RowUnselect(event: any): void 
    {
        // Do Something
    }

    source: any =
    {
        dataType: 'jsonp',
        dataFields: [
            { name: 'countryName', type: 'string' },
            { name: 'name', type: 'string' },
            { name: 'population', type: 'float' },
            { name: 'continentCode', type: 'string' }
        ],
        url: 'http://api.geonames.org/searchJSON'
    };
         
    dataAdapter: any = new jqx.dataAdapter(this.source,
        {
            formatData: function (data: any): any {
                data.featureClass = 'P';
                data.style = 'full';
                data.username = 'jqwidgets';
                data.maxRows = 50;
                return data;
            }
        }
    );
 
    columns: any[] =
    [
        { text: 'Country Name', dataField: 'countryName', width: 200 },
        { text: 'City', dataField: 'name', width: 250 },
        { text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
        { text: 'Continent Code', dataField: 'continentCode' }
    ];
}
							
						

This is triggered when a row edit begins.

Code examples

Bind to the rowBeginEdit event of jqxDataTable.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDataTable #myDataTable (onRowBeginEdit)="RowBeginEdit($event)"
            [source]="dataAdapter" [columns]="columns" [width]="850">
        </jqxDataTable>
    `
})
 
export class AppComponent {
    RowBeginEdit(event: any): void 
    {
        // Do Something
    }

    source: any =
    {
        dataType: 'jsonp',
        dataFields: [
            { name: 'countryName', type: 'string' },
            { name: 'name', type: 'string' },
            { name: 'population', type: 'float' },
            { name: 'continentCode', type: 'string' }
        ],
        url: 'http://api.geonames.org/searchJSON'
    };
         
    dataAdapter: any = new jqx.dataAdapter(this.source,
        {
            formatData: function (data: any): any {
                data.featureClass = 'P';
                data.style = 'full';
                data.username = 'jqwidgets';
                data.maxRows = 50;
                return data;
            }
        }
    );
 
    columns: any[] =
    [
        { text: 'Country Name', dataField: 'countryName', width: 200 },
        { text: 'City', dataField: 'name', width: 250 },
        { text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
        { text: 'Continent Code', dataField: 'continentCode' }
    ];
}
							
						

This is triggered when a row edit ends.

Code examples

Bind to the rowEndEdit event of jqxDataTable.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDataTable #myDataTable (onRowEndEdit)="RowEndEdit($event)"
            [source]="dataAdapter" [columns]="columns" [width]="850">
        </jqxDataTable>
    `
})
 
export class AppComponent {
    RowEndEdit(event: any): void 
    {
        // Do Something
    }

    source: any =
    {
        dataType: 'jsonp',
        dataFields: [
            { name: 'countryName', type: 'string' },
            { name: 'name', type: 'string' },
            { name: 'population', type: 'float' },
            { name: 'continentCode', type: 'string' }
        ],
        url: 'http://api.geonames.org/searchJSON'
    };
         
    dataAdapter: any = new jqx.dataAdapter(this.source,
        {
            formatData: function (data: any): any {
                data.featureClass = 'P';
                data.style = 'full';
                data.username = 'jqwidgets';
                data.maxRows = 50;
                return data;
            }
        }
    );
 
    columns: any[] =
    [
        { text: 'Country Name', dataField: 'countryName', width: 200 },
        { text: 'City', dataField: 'name', width: 250 },
        { text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
        { text: 'Continent Code', dataField: 'continentCode' }
    ];
}
							
						

This is triggered when a row is expanded.

Code examples

Bind to the rowExpand event of jqxDataTable.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDataTable #myDataTable (onRowExpand)="RowExpand($event)"
            [source]="dataAdapter" [columns]="columns" [width]="850">
        </jqxDataTable>
    `
})
 
export class AppComponent {
    RowExpand(event: any): void 
    {
        // Do Something
    }

    source: any =
    {
        dataType: 'jsonp',
        dataFields: [
            { name: 'countryName', type: 'string' },
            { name: 'name', type: 'string' },
            { name: 'population', type: 'float' },
            { name: 'continentCode', type: 'string' }
        ],
        url: 'http://api.geonames.org/searchJSON'
    };
         
    dataAdapter: any = new jqx.dataAdapter(this.source,
        {
            formatData: function (data: any): any {
                data.featureClass = 'P';
                data.style = 'full';
                data.username = 'jqwidgets';
                data.maxRows = 50;
                return data;
            }
        }
    );
 
    columns: any[] =
    [
        { text: 'Country Name', dataField: 'countryName', width: 200 },
        { text: 'City', dataField: 'name', width: 250 },
        { text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
        { text: 'Continent Code', dataField: 'continentCode' }
    ];
}
							
						

This is triggered when a row is collapsed.

Code examples

Bind to the rowCollapse event of jqxDataTable.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDataTable #myDataTable (onRowCollapse)="RowCollapse($event)"
            [source]="dataAdapter" [columns]="columns" [width]="850">
        </jqxDataTable>
    `
})
 
export class AppComponent {
    RowCollapse(event: any): void 
    {
        // Do Something
    }

    source: any =
    {
        dataType: 'jsonp',
        dataFields: [
            { name: 'countryName', type: 'string' },
            { name: 'name', type: 'string' },
            { name: 'population', type: 'float' },
            { name: 'continentCode', type: 'string' }
        ],
        url: 'http://api.geonames.org/searchJSON'
    };
         
    dataAdapter: any = new jqx.dataAdapter(this.source,
        {
            formatData: function (data: any): any {
                data.featureClass = 'P';
                data.style = 'full';
                data.username = 'jqwidgets';
                data.maxRows = 50;
                return data;
            }
        }
    );
 
    columns: any[] =
    [
        { text: 'Country Name', dataField: 'countryName', width: 200 },
        { text: 'City', dataField: 'name', width: 250 },
        { text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
        { text: 'Continent Code', dataField: 'continentCode' }
    ];
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDataTable #myDataTable 
            [source]="dataAdapter" [columns]="columns" [width]="850">
        </jqxDataTable>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDataTable') myDataTable: jqxDataTableComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myDataTable.addRow(10,{},'first');
    }

    source: any =
    {
        dataType: 'jsonp',
        dataFields: [
            { name: 'countryName', type: 'string' },
            { name: 'name', type: 'string' },
            { name: 'population', type: 'float' },
            { name: 'continentCode', type: 'string' }
        ],
        url: 'http://api.geonames.org/searchJSON'
    };
         
    dataAdapter: any = new jqx.dataAdapter(this.source,
        {
            formatData: function (data: any): any {
                data.featureClass = 'P';
                data.style = 'full';
                data.username = 'jqwidgets';
                data.maxRows = 50;
                return data;
            }
        }
    );
 
    columns: any[] =
    [
        { text: 'Country Name', dataField: 'countryName', width: 200 },
        { text: 'City', dataField: 'name', width: 250 },
        { text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
        { text: 'Continent Code', dataField: 'continentCode' }
    ];
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDataTable #myDataTable 
            [source]="dataAdapter" [columns]="columns" [width]="850">
        </jqxDataTable>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDataTable') myDataTable: jqxDataTableComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myDataTable.addFilter('firstName',new jqx.filtergroup());
    }

    source: any =
    {
        dataType: 'jsonp',
        dataFields: [
            { name: 'countryName', type: 'string' },
            { name: 'name', type: 'string' },
            { name: 'population', type: 'float' },
            { name: 'continentCode', type: 'string' }
        ],
        url: 'http://api.geonames.org/searchJSON'
    };
         
    dataAdapter: any = new jqx.dataAdapter(this.source,
        {
            formatData: function (data: any): any {
                data.featureClass = 'P';
                data.style = 'full';
                data.username = 'jqwidgets';
                data.maxRows = 50;
                return data;
            }
        }
    );
 
    columns: any[] =
    [
        { text: 'Country Name', dataField: 'countryName', width: 200 },
        { text: 'City', dataField: 'name', width: 250 },
        { text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
        { text: 'Continent Code', dataField: 'continentCode' }
    ];
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDataTable #myDataTable 
            [source]="dataAdapter" [columns]="columns" [width]="850">
        </jqxDataTable>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDataTable') myDataTable: jqxDataTableComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myDataTable.applyFilters();
    }

    source: any =
    {
        dataType: 'jsonp',
        dataFields: [
            { name: 'countryName', type: 'string' },
            { name: 'name', type: 'string' },
            { name: 'population', type: 'float' },
            { name: 'continentCode', type: 'string' }
        ],
        url: 'http://api.geonames.org/searchJSON'
    };
         
    dataAdapter: any = new jqx.dataAdapter(this.source,
        {
            formatData: function (data: any): any {
                data.featureClass = 'P';
                data.style = 'full';
                data.username = 'jqwidgets';
                data.maxRows = 50;
                return data;
            }
        }
    );
 
    columns: any[] =
    [
        { text: 'Country Name', dataField: 'countryName', width: 200 },
        { text: 'City', dataField: 'name', width: 250 },
        { text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
        { text: 'Continent Code', dataField: 'continentCode' }
    ];
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDataTable #myDataTable 
            [source]="dataAdapter" [columns]="columns" [width]="850">
        </jqxDataTable>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDataTable') myDataTable: jqxDataTableComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myDataTable.beginUpdate();
    }

    source: any =
    {
        dataType: 'jsonp',
        dataFields: [
            { name: 'countryName', type: 'string' },
            { name: 'name', type: 'string' },
            { name: 'population', type: 'float' },
            { name: 'continentCode', type: 'string' }
        ],
        url: 'http://api.geonames.org/searchJSON'
    };
         
    dataAdapter: any = new jqx.dataAdapter(this.source,
        {
            formatData: function (data: any): any {
                data.featureClass = 'P';
                data.style = 'full';
                data.username = 'jqwidgets';
                data.maxRows = 50;
                return data;
            }
        }
    );
 
    columns: any[] =
    [
        { text: 'Country Name', dataField: 'countryName', width: 200 },
        { text: 'City', dataField: 'name', width: 250 },
        { text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
        { text: 'Continent Code', dataField: 'continentCode' }
    ];
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDataTable #myDataTable 
            [source]="dataAdapter" [columns]="columns" [width]="850">
        </jqxDataTable>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDataTable') myDataTable: jqxDataTableComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myDataTable.beginRowEdit(10);
    }

    source: any =
    {
        dataType: 'jsonp',
        dataFields: [
            { name: 'countryName', type: 'string' },
            { name: 'name', type: 'string' },
            { name: 'population', type: 'float' },
            { name: 'continentCode', type: 'string' }
        ],
        url: 'http://api.geonames.org/searchJSON'
    };
         
    dataAdapter: any = new jqx.dataAdapter(this.source,
        {
            formatData: function (data: any): any {
                data.featureClass = 'P';
                data.style = 'full';
                data.username = 'jqwidgets';
                data.maxRows = 50;
                return data;
            }
        }
    );
 
    columns: any[] =
    [
        { text: 'Country Name', dataField: 'countryName', width: 200 },
        { text: 'City', dataField: 'name', width: 250 },
        { text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
        { text: 'Continent Code', dataField: 'continentCode' }
    ];
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDataTable #myDataTable 
            [source]="dataAdapter" [columns]="columns" [width]="850">
        </jqxDataTable>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDataTable') myDataTable: jqxDataTableComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myDataTable.beginCellEdit(10,'firstName');
    }

    source: any =
    {
        dataType: 'jsonp',
        dataFields: [
            { name: 'countryName', type: 'string' },
            { name: 'name', type: 'string' },
            { name: 'population', type: 'float' },
            { name: 'continentCode', type: 'string' }
        ],
        url: 'http://api.geonames.org/searchJSON'
    };
         
    dataAdapter: any = new jqx.dataAdapter(this.source,
        {
            formatData: function (data: any): any {
                data.featureClass = 'P';
                data.style = 'full';
                data.username = 'jqwidgets';
                data.maxRows = 50;
                return data;
            }
        }
    );
 
    columns: any[] =
    [
        { text: 'Country Name', dataField: 'countryName', width: 200 },
        { text: 'City', dataField: 'name', width: 250 },
        { text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
        { text: 'Continent Code', dataField: 'continentCode' }
    ];
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDataTable #myDataTable 
            [source]="dataAdapter" [columns]="columns" [width]="850">
        </jqxDataTable>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDataTable') myDataTable: jqxDataTableComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myDataTable.clearSelection();
    }

    source: any =
    {
        dataType: 'jsonp',
        dataFields: [
            { name: 'countryName', type: 'string' },
            { name: 'name', type: 'string' },
            { name: 'population', type: 'float' },
            { name: 'continentCode', type: 'string' }
        ],
        url: 'http://api.geonames.org/searchJSON'
    };
         
    dataAdapter: any = new jqx.dataAdapter(this.source,
        {
            formatData: function (data: any): any {
                data.featureClass = 'P';
                data.style = 'full';
                data.username = 'jqwidgets';
                data.maxRows = 50;
                return data;
            }
        }
    );
 
    columns: any[] =
    [
        { text: 'Country Name', dataField: 'countryName', width: 200 },
        { text: 'City', dataField: 'name', width: 250 },
        { text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
        { text: 'Continent Code', dataField: 'continentCode' }
    ];
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDataTable #myDataTable 
            [source]="dataAdapter" [columns]="columns" [width]="850">
        </jqxDataTable>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDataTable') myDataTable: jqxDataTableComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myDataTable.clearFilters();
    }

    source: any =
    {
        dataType: 'jsonp',
        dataFields: [
            { name: 'countryName', type: 'string' },
            { name: 'name', type: 'string' },
            { name: 'population', type: 'float' },
            { name: 'continentCode', type: 'string' }
        ],
        url: 'http://api.geonames.org/searchJSON'
    };
         
    dataAdapter: any = new jqx.dataAdapter(this.source,
        {
            formatData: function (data: any): any {
                data.featureClass = 'P';
                data.style = 'full';
                data.username = 'jqwidgets';
                data.maxRows = 50;
                return data;
            }
        }
    );
 
    columns: any[] =
    [
        { text: 'Country Name', dataField: 'countryName', width: 200 },
        { text: 'City', dataField: 'name', width: 250 },
        { text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
        { text: 'Continent Code', dataField: 'continentCode' }
    ];
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDataTable #myDataTable 
            [source]="dataAdapter" [columns]="columns" [width]="850">
        </jqxDataTable>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDataTable') myDataTable: jqxDataTableComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myDataTable.clear();
    }

    source: any =
    {
        dataType: 'jsonp',
        dataFields: [
            { name: 'countryName', type: 'string' },
            { name: 'name', type: 'string' },
            { name: 'population', type: 'float' },
            { name: 'continentCode', type: 'string' }
        ],
        url: 'http://api.geonames.org/searchJSON'
    };
         
    dataAdapter: any = new jqx.dataAdapter(this.source,
        {
            formatData: function (data: any): any {
                data.featureClass = 'P';
                data.style = 'full';
                data.username = 'jqwidgets';
                data.maxRows = 50;
                return data;
            }
        }
    );
 
    columns: any[] =
    [
        { text: 'Country Name', dataField: 'countryName', width: 200 },
        { text: 'City', dataField: 'name', width: 250 },
        { text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
        { text: 'Continent Code', dataField: 'continentCode' }
    ];
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDataTable #myDataTable 
            [source]="dataAdapter" [columns]="columns" [width]="850">
        </jqxDataTable>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDataTable') myDataTable: jqxDataTableComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myDataTable.destroy();
    }

    source: any =
    {
        dataType: 'jsonp',
        dataFields: [
            { name: 'countryName', type: 'string' },
            { name: 'name', type: 'string' },
            { name: 'population', type: 'float' },
            { name: 'continentCode', type: 'string' }
        ],
        url: 'http://api.geonames.org/searchJSON'
    };
         
    dataAdapter: any = new jqx.dataAdapter(this.source,
        {
            formatData: function (data: any): any {
                data.featureClass = 'P';
                data.style = 'full';
                data.username = 'jqwidgets';
                data.maxRows = 50;
                return data;
            }
        }
    );
 
    columns: any[] =
    [
        { text: 'Country Name', dataField: 'countryName', width: 200 },
        { text: 'City', dataField: 'name', width: 250 },
        { text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
        { text: 'Continent Code', dataField: 'continentCode' }
    ];
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDataTable #myDataTable 
            [source]="dataAdapter" [columns]="columns" [width]="850">
        </jqxDataTable>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDataTable') myDataTable: jqxDataTableComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myDataTable.deleteRow(0);
    }

    source: any =
    {
        dataType: 'jsonp',
        dataFields: [
            { name: 'countryName', type: 'string' },
            { name: 'name', type: 'string' },
            { name: 'population', type: 'float' },
            { name: 'continentCode', type: 'string' }
        ],
        url: 'http://api.geonames.org/searchJSON'
    };
         
    dataAdapter: any = new jqx.dataAdapter(this.source,
        {
            formatData: function (data: any): any {
                data.featureClass = 'P';
                data.style = 'full';
                data.username = 'jqwidgets';
                data.maxRows = 50;
                return data;
            }
        }
    );
 
    columns: any[] =
    [
        { text: 'Country Name', dataField: 'countryName', width: 200 },
        { text: 'City', dataField: 'name', width: 250 },
        { text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
        { text: 'Continent Code', dataField: 'continentCode' }
    ];
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDataTable #myDataTable 
            [source]="dataAdapter" [columns]="columns" [width]="850">
        </jqxDataTable>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDataTable') myDataTable: jqxDataTableComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myDataTable.endUpdate();
    }

    source: any =
    {
        dataType: 'jsonp',
        dataFields: [
            { name: 'countryName', type: 'string' },
            { name: 'name', type: 'string' },
            { name: 'population', type: 'float' },
            { name: 'continentCode', type: 'string' }
        ],
        url: 'http://api.geonames.org/searchJSON'
    };
         
    dataAdapter: any = new jqx.dataAdapter(this.source,
        {
            formatData: function (data: any): any {
                data.featureClass = 'P';
                data.style = 'full';
                data.username = 'jqwidgets';
                data.maxRows = 50;
                return data;
            }
        }
    );
 
    columns: any[] =
    [
        { text: 'Country Name', dataField: 'countryName', width: 200 },
        { text: 'City', dataField: 'name', width: 250 },
        { text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
        { text: 'Continent Code', dataField: 'continentCode' }
    ];
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDataTable #myDataTable 
            [source]="dataAdapter" [columns]="columns" [width]="850">
        </jqxDataTable>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDataTable') myDataTable: jqxDataTableComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myDataTable.ensureRowVisible(10);
    }

    source: any =
    {
        dataType: 'jsonp',
        dataFields: [
            { name: 'countryName', type: 'string' },
            { name: 'name', type: 'string' },
            { name: 'population', type: 'float' },
            { name: 'continentCode', type: 'string' }
        ],
        url: 'http://api.geonames.org/searchJSON'
    };
         
    dataAdapter: any = new jqx.dataAdapter(this.source,
        {
            formatData: function (data: any): any {
                data.featureClass = 'P';
                data.style = 'full';
                data.username = 'jqwidgets';
                data.maxRows = 50;
                return data;
            }
        }
    );
 
    columns: any[] =
    [
        { text: 'Country Name', dataField: 'countryName', width: 200 },
        { text: 'City', dataField: 'name', width: 250 },
        { text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
        { text: 'Continent Code', dataField: 'continentCode' }
    ];
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDataTable #myDataTable 
            [source]="dataAdapter" [columns]="columns" [width]="850">
        </jqxDataTable>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDataTable') myDataTable: jqxDataTableComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myDataTable.endRowEdit(10,true);
    }

    source: any =
    {
        dataType: 'jsonp',
        dataFields: [
            { name: 'countryName', type: 'string' },
            { name: 'name', type: 'string' },
            { name: 'population', type: 'float' },
            { name: 'continentCode', type: 'string' }
        ],
        url: 'http://api.geonames.org/searchJSON'
    };
         
    dataAdapter: any = new jqx.dataAdapter(this.source,
        {
            formatData: function (data: any): any {
                data.featureClass = 'P';
                data.style = 'full';
                data.username = 'jqwidgets';
                data.maxRows = 50;
                return data;
            }
        }
    );
 
    columns: any[] =
    [
        { text: 'Country Name', dataField: 'countryName', width: 200 },
        { text: 'City', dataField: 'name', width: 250 },
        { text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
        { text: 'Continent Code', dataField: 'continentCode' }
    ];
}