React UI Components Documentation

Sets or gets the altRows property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDataTable, { jqx } from 'jqwidgets-react/react_jqxdatatable.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            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'
        };
         
        let dataAdapter = new jqx.dataAdapter(source,
            {
                formatData: function (data) {
                    data.featureClass = 'P';
                    data.style = 'full';
                    data.username = 'jqwidgets';
                    data.maxRows = 50;
                    return data;
                }
            }
        );
 
        let columns =
        [
            { 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' }
        ];
        return (
            <JqxDataTable ref='myDataTable'
                source={dataAdapter} columns={columns} width={850} altRows={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the autoRowHeight property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDataTable, { jqx } from 'jqwidgets-react/react_jqxdatatable.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            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'
        };
         
        let dataAdapter = new jqx.dataAdapter(source,
            {
                formatData: function (data) {
                    data.featureClass = 'P';
                    data.style = 'full';
                    data.username = 'jqwidgets';
                    data.maxRows = 50;
                    return data;
                }
            }
        );
 
        let columns =
        [
            { 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' }
        ];
        return (
            <JqxDataTable ref='myDataTable'
                source={dataAdapter} columns={columns} width={850} autoRowHeight={false}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the aggregatesHeight property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDataTable, { jqx } from 'jqwidgets-react/react_jqxdatatable.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            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'
        };
         
        let dataAdapter = new jqx.dataAdapter(source,
            {
                formatData: function (data) {
                    data.featureClass = 'P';
                    data.style = 'full';
                    data.username = 'jqwidgets';
                    data.maxRows = 50;
                    return data;
                }
            }
        );
 
        let columns =
        [
            { 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' }
        ];
        return (
            <JqxDataTable ref='myDataTable'
                source={dataAdapter} columns={columns} width={850} aggregatesHeight={40}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the autoShowLoadElement property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDataTable, { jqx } from 'jqwidgets-react/react_jqxdatatable.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            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'
        };
         
        let dataAdapter = new jqx.dataAdapter(source,
            {
                formatData: function (data) {
                    data.featureClass = 'P';
                    data.style = 'full';
                    data.username = 'jqwidgets';
                    data.maxRows = 50;
                    return data;
                }
            }
        );
 
        let columns =
        [
            { 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' }
        ];
        return (
            <JqxDataTable ref='myDataTable'
                source={dataAdapter} columns={columns} width={850} autoShowLoadElement={false}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the columnsHeight property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDataTable, { jqx } from 'jqwidgets-react/react_jqxdatatable.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            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'
        };
         
        let dataAdapter = new jqx.dataAdapter(source,
            {
                formatData: function (data) {
                    data.featureClass = 'P';
                    data.style = 'full';
                    data.username = 'jqwidgets';
                    data.maxRows = 50;
                    return data;
                }
            }
        );
 
        let columns =
        [
            { 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' }
        ];
        return (
            <JqxDataTable ref='myDataTable'
                source={dataAdapter} columns={columns} width={850} columnsHeight={20}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the columns property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDataTable, { jqx } from 'jqwidgets-react/react_jqxdatatable.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            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'
        };
         
        let dataAdapter = new jqx.dataAdapter(source,
            {
                formatData: function (data) {
                    data.featureClass = 'P';
                    data.style = 'full';
                    data.username = 'jqwidgets';
                    data.maxRows = 50;
                    return data;
                }
            }
        );
 
        let columns =
        [
            { 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' }
        ];
        return (
            <JqxDataTable ref='myDataTable'
                source={dataAdapter} columns={columns} width={850}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the columnGroups property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDataTable, { jqx } from 'jqwidgets-react/react_jqxdatatable.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            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'
        };
         
        let dataAdapter = new jqx.dataAdapter(source,
            {
                formatData: function (data) {
                    data.featureClass = 'P';
                    data.style = 'full';
                    data.username = 'jqwidgets';
                    data.maxRows = 50;
                    return data;
                }
            }
        );
 
        let columns =
        [
            { 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' }
        ];
        return (
            <JqxDataTable ref='myDataTable'
                source={dataAdapter} columns={columns} width={850} columnGroups={columnGroups}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the columnsResize property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDataTable, { jqx } from 'jqwidgets-react/react_jqxdatatable.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            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'
        };
         
        let dataAdapter = new jqx.dataAdapter(source,
            {
                formatData: function (data) {
                    data.featureClass = 'P';
                    data.style = 'full';
                    data.username = 'jqwidgets';
                    data.maxRows = 50;
                    return data;
                }
            }
        );
 
        let columns =
        [
            { 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' }
        ];
        return (
            <JqxDataTable ref='myDataTable'
                source={dataAdapter} columns={columns} width={850} columnsResize={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the columnsReorder property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDataTable, { jqx } from 'jqwidgets-react/react_jqxdatatable.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            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'
        };
         
        let dataAdapter = new jqx.dataAdapter(source,
            {
                formatData: function (data) {
                    data.featureClass = 'P';
                    data.style = 'full';
                    data.username = 'jqwidgets';
                    data.maxRows = 50;
                    return data;
                }
            }
        );
 
        let columns =
        [
            { 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' }
        ];
        return (
            <JqxDataTable ref='myDataTable'
                source={dataAdapter} columns={columns} width={850} columnsReorder={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the disabled property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDataTable, { jqx } from 'jqwidgets-react/react_jqxdatatable.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            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'
        };
         
        let dataAdapter = new jqx.dataAdapter(source,
            {
                formatData: function (data) {
                    data.featureClass = 'P';
                    data.style = 'full';
                    data.username = 'jqwidgets';
                    data.maxRows = 50;
                    return data;
                }
            }
        );
 
        let columns =
        [
            { 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' }
        ];
        return (
            <JqxDataTable ref='myDataTable'
                source={dataAdapter} columns={columns} width={850} disabled={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the editable property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDataTable, { jqx } from 'jqwidgets-react/react_jqxdatatable.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            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'
        };
         
        let dataAdapter = new jqx.dataAdapter(source,
            {
                formatData: function (data) {
                    data.featureClass = 'P';
                    data.style = 'full';
                    data.username = 'jqwidgets';
                    data.maxRows = 50;
                    return data;
                }
            }
        );
 
        let columns =
        [
            { 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' }
        ];
        return (
            <JqxDataTable ref='myDataTable'
                source={dataAdapter} columns={columns} width={850} editable={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the editSettings property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDataTable, { jqx } from 'jqwidgets-react/react_jqxdatatable.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            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'
        };
         
        let dataAdapter = new jqx.dataAdapter(source,
            {
                formatData: function (data) {
                    data.featureClass = 'P';
                    data.style = 'full';
                    data.username = 'jqwidgets';
                    data.maxRows = 50;
                    return data;
                }
            }
        );
 
        let columns =
        [
            { 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' }
        ];
        return (
            <JqxDataTable ref='myDataTable'
                source={dataAdapter} columns={columns} width={850} editSettings={editSettings}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the exportSettings property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDataTable, { jqx } from 'jqwidgets-react/react_jqxdatatable.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            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'
        };
         
        let dataAdapter = new jqx.dataAdapter(source,
            {
                formatData: function (data) {
                    data.featureClass = 'P';
                    data.style = 'full';
                    data.username = 'jqwidgets';
                    data.maxRows = 50;
                    return data;
                }
            }
        );
 
        let columns =
        [
            { 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' }
        ];
        return (
            <JqxDataTable ref='myDataTable'
                source={dataAdapter} columns={columns} width={850} exportSettings={exportSettings}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the enableHover property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDataTable, { jqx } from 'jqwidgets-react/react_jqxdatatable.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            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'
        };
         
        let dataAdapter = new jqx.dataAdapter(source,
            {
                formatData: function (data) {
                    data.featureClass = 'P';
                    data.style = 'full';
                    data.username = 'jqwidgets';
                    data.maxRows = 50;
                    return data;
                }
            }
        );
 
        let columns =
        [
            { 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' }
        ];
        return (
            <JqxDataTable ref='myDataTable'
                source={dataAdapter} columns={columns} width={850} enableHover={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the enableBrowserSelection property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDataTable, { jqx } from 'jqwidgets-react/react_jqxdatatable.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            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'
        };
         
        let dataAdapter = new jqx.dataAdapter(source,
            {
                formatData: function (data) {
                    data.featureClass = 'P';
                    data.style = 'full';
                    data.username = 'jqwidgets';
                    data.maxRows = 50;
                    return data;
                }
            }
        );
 
        let columns =
        [
            { 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' }
        ];
        return (
            <JqxDataTable ref='myDataTable'
                source={dataAdapter} columns={columns} width={850} enableBrowserSelection={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the filterable property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDataTable, { jqx } from 'jqwidgets-react/react_jqxdatatable.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            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'
        };
         
        let dataAdapter = new jqx.dataAdapter(source,
            {
                formatData: function (data) {
                    data.featureClass = 'P';
                    data.style = 'full';
                    data.username = 'jqwidgets';
                    data.maxRows = 50;
                    return data;
                }
            }
        );
 
        let columns =
        [
            { 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' }
        ];
        return (
            <JqxDataTable ref='myDataTable'
                source={dataAdapter} columns={columns} width={850} filterable={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the filterHeight property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDataTable, { jqx } from 'jqwidgets-react/react_jqxdatatable.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            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'
        };
         
        let dataAdapter = new jqx.dataAdapter(source,
            {
                formatData: function (data) {
                    data.featureClass = 'P';
                    data.style = 'full';
                    data.username = 'jqwidgets';
                    data.maxRows = 50;
                    return data;
                }
            }
        );
 
        let columns =
        [
            { 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' }
        ];
        return (
            <JqxDataTable ref='myDataTable'
                source={dataAdapter} columns={columns} width={850} filterHeight={35} filterable={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the filterMode property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDataTable, { jqx } from 'jqwidgets-react/react_jqxdatatable.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            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'
        };
         
        let dataAdapter = new jqx.dataAdapter(source,
            {
                formatData: function (data) {
                    data.featureClass = 'P';
                    data.style = 'full';
                    data.username = 'jqwidgets';
                    data.maxRows = 50;
                    return data;
                }
            }
        );
 
        let columns =
        [
            { 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' }
        ];
        return (
            <JqxDataTable ref='myDataTable'
                source={dataAdapter} columns={columns} width={850} filterable={true} filterMode={'advanced'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the groups property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDataTable, { jqx } from 'jqwidgets-react/react_jqxdatatable.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            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'
        };
         
        let dataAdapter = new jqx.dataAdapter(source,
            {
                formatData: function (data) {
                    data.featureClass = 'P';
                    data.style = 'full';
                    data.username = 'jqwidgets';
                    data.maxRows = 50;
                    return data;
                }
            }
        );
 
        let columns =
        [
            { 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' }
        ];
        return (
            <JqxDataTable ref='myDataTable'
                source={dataAdapter} columns={columns} width={850} groups={['firstname']}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the groupsRenderer property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDataTable, { jqx } from 'jqwidgets-react/react_jqxdatatable.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            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'
        };
         
        let dataAdapter = new jqx.dataAdapter(source,
            {
                formatData: function (data) {
                    data.featureClass = 'P';
                    data.style = 'full';
                    data.username = 'jqwidgets';
                    data.maxRows = 50;
                    return data;
                }
            }
        );
 
        let columns =
        [
            { 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' }
        ];
        return (
            <JqxDataTable ref='myDataTable'
                source={dataAdapter} columns={columns} width={850} groupsRenderer={groupsRenderer}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the height property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDataTable, { jqx } from 'jqwidgets-react/react_jqxdatatable.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            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'
        };
         
        let dataAdapter = new jqx.dataAdapter(source,
            {
                formatData: function (data) {
                    data.featureClass = 'P';
                    data.style = 'full';
                    data.username = 'jqwidgets';
                    data.maxRows = 50;
                    return data;
                }
            }
        );
 
        let columns =
        [
            { 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' }
        ];
        return (
            <JqxDataTable ref='myDataTable'
                source={dataAdapter} columns={columns} width={850} height={350}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the initRowDetails property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDataTable, { jqx } from 'jqwidgets-react/react_jqxdatatable.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            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'
        };
         
        let dataAdapter = new jqx.dataAdapter(source,
            {
                formatData: function (data) {
                    data.featureClass = 'P';
                    data.style = 'full';
                    data.username = 'jqwidgets';
                    data.maxRows = 50;
                    return data;
                }
            }
        );
 
        let columns =
        [
            { 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' }
        ];
        return (
            <JqxDataTable ref='myDataTable'
                source={dataAdapter} columns={columns} width={850} initRowDetails={initRowDetails}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the incrementalSearch property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDataTable, { jqx } from 'jqwidgets-react/react_jqxdatatable.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            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'
        };
         
        let dataAdapter = new jqx.dataAdapter(source,
            {
                formatData: function (data) {
                    data.featureClass = 'P';
                    data.style = 'full';
                    data.username = 'jqwidgets';
                    data.maxRows = 50;
                    return data;
                }
            }
        );
 
        let columns =
        [
            { 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' }
        ];
        return (
            <JqxDataTable ref='myDataTable'
                source={dataAdapter} columns={columns} width={850} incrementalSearch={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the localization property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDataTable, { jqx } from 'jqwidgets-react/react_jqxdatatable.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            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'
        };
         
        let dataAdapter = new jqx.dataAdapter(source,
            {
                formatData: function (data) {
                    data.featureClass = 'P';
                    data.style = 'full';
                    data.username = 'jqwidgets';
                    data.maxRows = 50;
                    return data;
                }
            }
        );
 
        let columns =
        [
            { 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' }
        ];
        return (
            <JqxDataTable ref='myDataTable'
                source={dataAdapter} columns={columns} width={850} localization={localization}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the pagerHeight property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDataTable, { jqx } from 'jqwidgets-react/react_jqxdatatable.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            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'
        };
         
        let dataAdapter = new jqx.dataAdapter(source,
            {
                formatData: function (data) {
                    data.featureClass = 'P';
                    data.style = 'full';
                    data.username = 'jqwidgets';
                    data.maxRows = 50;
                    return data;
                }
            }
        );
 
        let columns =
        [
            { 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' }
        ];
        return (
            <JqxDataTable ref='myDataTable'
                source={dataAdapter} columns={columns} width={850} pagerHeight={35} pageable={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the pageSize property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDataTable, { jqx } from 'jqwidgets-react/react_jqxdatatable.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            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'
        };
         
        let dataAdapter = new jqx.dataAdapter(source,
            {
                formatData: function (data) {
                    data.featureClass = 'P';
                    data.style = 'full';
                    data.username = 'jqwidgets';
                    data.maxRows = 50;
                    return data;
                }
            }
        );
 
        let columns =
        [
            { 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' }
        ];
        return (
            <JqxDataTable ref='myDataTable'
                source={dataAdapter} columns={columns} width={850} pageSize={15} pageable={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the pageSizeOptions property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDataTable, { jqx } from 'jqwidgets-react/react_jqxdatatable.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            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'
        };
         
        let dataAdapter = new jqx.dataAdapter(source,
            {
                formatData: function (data) {
                    data.featureClass = 'P';
                    data.style = 'full';
                    data.username = 'jqwidgets';
                    data.maxRows = 50;
                    return data;
                }
            }
        );
 
        let columns =
        [
            { 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' }
        ];
        return (
            <JqxDataTable ref='myDataTable'
                source={dataAdapter} columns={columns} width={850} pageSizeOptions={[15, 25, 35]} pageable={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the pageable property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDataTable, { jqx } from 'jqwidgets-react/react_jqxdatatable.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            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'
        };
         
        let dataAdapter = new jqx.dataAdapter(source,
            {
                formatData: function (data) {
                    data.featureClass = 'P';
                    data.style = 'full';
                    data.username = 'jqwidgets';
                    data.maxRows = 50;
                    return data;
                }
            }
        );
 
        let columns =
        [
            { 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' }
        ];
        return (
            <JqxDataTable ref='myDataTable'
                source={dataAdapter} columns={columns} width={850} pageable={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the pagerPosition property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDataTable, { jqx } from 'jqwidgets-react/react_jqxdatatable.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            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'
        };
         
        let dataAdapter = new jqx.dataAdapter(source,
            {
                formatData: function (data) {
                    data.featureClass = 'P';
                    data.style = 'full';
                    data.username = 'jqwidgets';
                    data.maxRows = 50;
                    return data;
                }
            }
        );
 
        let columns =
        [
            { 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' }
        ];
        return (
            <JqxDataTable ref='myDataTable'
                source={dataAdapter} columns={columns} width={850} pagerPosition={'top'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the pagerMode property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDataTable, { jqx } from 'jqwidgets-react/react_jqxdatatable.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            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'
        };
         
        let dataAdapter = new jqx.dataAdapter(source,
            {
                formatData: function (data) {
                    data.featureClass = 'P';
                    data.style = 'full';
                    data.username = 'jqwidgets';
                    data.maxRows = 50;
                    return data;
                }
            }
        );
 
        let columns =
        [
            { 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' }
        ];
        return (
            <JqxDataTable ref='myDataTable'
                source={dataAdapter} columns={columns} width={850} pagerMode={'advanced'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the pagerButtonsCount property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDataTable, { jqx } from 'jqwidgets-react/react_jqxdatatable.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            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'
        };
         
        let dataAdapter = new jqx.dataAdapter(source,
            {
                formatData: function (data) {
                    data.featureClass = 'P';
                    data.style = 'full';
                    data.username = 'jqwidgets';
                    data.maxRows = 50;
                    return data;
                }
            }
        );
 
        let columns =
        [
            { 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' }
        ];
        return (
            <JqxDataTable ref='myDataTable'
                source={dataAdapter} columns={columns} width={850} pagerButtonsCount={10}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the pagerRenderer property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDataTable, { jqx } from 'jqwidgets-react/react_jqxdatatable.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            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'
        };
         
        let dataAdapter = new jqx.dataAdapter(source,
            {
                formatData: function (data) {
                    data.featureClass = 'P';
                    data.style = 'full';
                    data.username = 'jqwidgets';
                    data.maxRows = 50;
                    return data;
                }
            }
        );
 
        let columns =
        [
            { 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' }
        ];
        return (
            <JqxDataTable ref='myDataTable'
                source={dataAdapter} columns={columns} width={850} pagerRenderer={pagerRenderer}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the ready property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDataTable, { jqx } from 'jqwidgets-react/react_jqxdatatable.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            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'
        };
         
        let dataAdapter = new jqx.dataAdapter(source,
            {
                formatData: function (data) {
                    data.featureClass = 'P';
                    data.style = 'full';
                    data.username = 'jqwidgets';
                    data.maxRows = 50;
                    return data;
                }
            }
        );
 
        let columns =
        [
            { 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' }
        ];
        return (
            <JqxDataTable ref='myDataTable'
                source={dataAdapter} columns={columns} width={850} ready={ready}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the rowDetails property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDataTable, { jqx } from 'jqwidgets-react/react_jqxdatatable.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            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'
        };
         
        let dataAdapter = new jqx.dataAdapter(source,
            {
                formatData: function (data) {
                    data.featureClass = 'P';
                    data.style = 'full';
                    data.username = 'jqwidgets';
                    data.maxRows = 50;
                    return data;
                }
            }
        );
 
        let columns =
        [
            { 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' }
        ];
        return (
            <JqxDataTable ref='myDataTable'
                source={dataAdapter} columns={columns} width={850} rowDetails={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the renderToolbar property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDataTable, { jqx } from 'jqwidgets-react/react_jqxdatatable.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            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'
        };
         
        let dataAdapter = new jqx.dataAdapter(source,
            {
                formatData: function (data) {
                    data.featureClass = 'P';
                    data.style = 'full';
                    data.username = 'jqwidgets';
                    data.maxRows = 50;
                    return data;
                }
            }
        );
 
        let columns =
        [
            { 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' }
        ];
        return (
            <JqxDataTable ref='myDataTable'
                source={dataAdapter} columns={columns} width={850} renderToolbar={renderToolbar}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the renderStatusbar property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDataTable, { jqx } from 'jqwidgets-react/react_jqxdatatable.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            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'
        };
         
        let dataAdapter = new jqx.dataAdapter(source,
            {
                formatData: function (data) {
                    data.featureClass = 'P';
                    data.style = 'full';
                    data.username = 'jqwidgets';
                    data.maxRows = 50;
                    return data;
                }
            }
        );
 
        let columns =
        [
            { 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' }
        ];
        return (
            <JqxDataTable ref='myDataTable'
                source={dataAdapter} columns={columns} width={850} renderStatusbar={renderStatusbar}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the rendering property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDataTable, { jqx } from 'jqwidgets-react/react_jqxdatatable.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            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'
        };
         
        let dataAdapter = new jqx.dataAdapter(source,
            {
                formatData: function (data) {
                    data.featureClass = 'P';
                    data.style = 'full';
                    data.username = 'jqwidgets';
                    data.maxRows = 50;
                    return data;
                }
            }
        );
 
        let columns =
        [
            { 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' }
        ];
        return (
            <JqxDataTable ref='myDataTable'
                source={dataAdapter} columns={columns} width={850} rendering={rendering}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the rendered property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDataTable, { jqx } from 'jqwidgets-react/react_jqxdatatable.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            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'
        };
         
        let dataAdapter = new jqx.dataAdapter(source,
            {
                formatData: function (data) {
                    data.featureClass = 'P';
                    data.style = 'full';
                    data.username = 'jqwidgets';
                    data.maxRows = 50;
                    return data;
                }
            }
        );
 
        let columns =
        [
            { 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' }
        ];
        return (
            <JqxDataTable ref='myDataTable'
                source={dataAdapter} columns={columns} width={850} rendered={rendered}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the rtl property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDataTable, { jqx } from 'jqwidgets-react/react_jqxdatatable.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            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'
        };
         
        let dataAdapter = new jqx.dataAdapter(source,
            {
                formatData: function (data) {
                    data.featureClass = 'P';
                    data.style = 'full';
                    data.username = 'jqwidgets';
                    data.maxRows = 50;
                    return data;
                }
            }
        );
 
        let columns =
        [
            { 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' }
        ];
        return (
            <JqxDataTable ref='myDataTable'
                source={dataAdapter} columns={columns} width={850} rtl={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the source property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDataTable, { jqx } from 'jqwidgets-react/react_jqxdatatable.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            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'
        };
         
        let dataAdapter = new jqx.dataAdapter(source,
            {
                formatData: function (data) {
                    data.featureClass = 'P';
                    data.style = 'full';
                    data.username = 'jqwidgets';
                    data.maxRows = 50;
                    return data;
                }
            }
        );
 
        let columns =
        [
            { 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' }
        ];
        return (
            <JqxDataTable ref='myDataTable'
                source={dataAdapter} columns={columns} width={850}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the sortable property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDataTable, { jqx } from 'jqwidgets-react/react_jqxdatatable.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            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'
        };
         
        let dataAdapter = new jqx.dataAdapter(source,
            {
                formatData: function (data) {
                    data.featureClass = 'P';
                    data.style = 'full';
                    data.username = 'jqwidgets';
                    data.maxRows = 50;
                    return data;
                }
            }
        );
 
        let columns =
        [
            { 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' }
        ];
        return (
            <JqxDataTable ref='myDataTable'
                source={dataAdapter} columns={columns} width={850} sortable={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the showAggregates property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDataTable, { jqx } from 'jqwidgets-react/react_jqxdatatable.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            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'
        };
         
        let dataAdapter = new jqx.dataAdapter(source,
            {
                formatData: function (data) {
                    data.featureClass = 'P';
                    data.style = 'full';
                    data.username = 'jqwidgets';
                    data.maxRows = 50;
                    return data;
                }
            }
        );
 
        let columns =
        [
            { 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' }
        ];
        return (
            <JqxDataTable ref='myDataTable'
                source={dataAdapter} columns={columns} width={850} showAggregates={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the showToolbar property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDataTable, { jqx } from 'jqwidgets-react/react_jqxdatatable.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            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'
        };
         
        let dataAdapter = new jqx.dataAdapter(source,
            {
                formatData: function (data) {
                    data.featureClass = 'P';
                    data.style = 'full';
                    data.username = 'jqwidgets';
                    data.maxRows = 50;
                    return data;
                }
            }
        );
 
        let columns =
        [
            { 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' }
        ];
        return (
            <JqxDataTable ref='myDataTable'
                source={dataAdapter} columns={columns} width={850} showToolbar={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the showStatusbar property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDataTable, { jqx } from 'jqwidgets-react/react_jqxdatatable.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            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'
        };
         
        let dataAdapter = new jqx.dataAdapter(source,
            {
                formatData: function (data) {
                    data.featureClass = 'P';
                    data.style = 'full';
                    data.username = 'jqwidgets';
                    data.maxRows = 50;
                    return data;
                }
            }
        );
 
        let columns =
        [
            { 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' }
        ];
        return (
            <JqxDataTable ref='myDataTable'
                source={dataAdapter} columns={columns} width={850} showStatusbar={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the statusBarHeight property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDataTable, { jqx } from 'jqwidgets-react/react_jqxdatatable.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            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'
        };
         
        let dataAdapter = new jqx.dataAdapter(source,
            {
                formatData: function (data) {
                    data.featureClass = 'P';
                    data.style = 'full';
                    data.username = 'jqwidgets';
                    data.maxRows = 50;
                    return data;
                }
            }
        );
 
        let columns =
        [
            { 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' }
        ];
        return (
            <JqxDataTable ref='myDataTable'
                source={dataAdapter} columns={columns} width={850} statusBarHeight={40}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the scrollBarSize property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDataTable, { jqx } from 'jqwidgets-react/react_jqxdatatable.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            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'
        };
         
        let dataAdapter = new jqx.dataAdapter(source,
            {
                formatData: function (data) {
                    data.featureClass = 'P';
                    data.style = 'full';
                    data.username = 'jqwidgets';
                    data.maxRows = 50;
                    return data;
                }
            }
        );
 
        let columns =
        [
            { 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' }
        ];
        return (
            <JqxDataTable ref='myDataTable'
                source={dataAdapter} columns={columns} width={850} scrollBarSize={20}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the selectionMode property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDataTable, { jqx } from 'jqwidgets-react/react_jqxdatatable.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            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'
        };
         
        let dataAdapter = new jqx.dataAdapter(source,
            {
                formatData: function (data) {
                    data.featureClass = 'P';
                    data.style = 'full';
                    data.username = 'jqwidgets';
                    data.maxRows = 50;
                    return data;
                }
            }
        );
 
        let columns =
        [
            { 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' }
        ];
        return (
            <JqxDataTable ref='myDataTable'
                source={dataAdapter} columns={columns} width={850} selectionMode={'singleRow'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the serverProcessing property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDataTable, { jqx } from 'jqwidgets-react/react_jqxdatatable.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            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'
        };
         
        let dataAdapter = new jqx.dataAdapter(source,
            {
                formatData: function (data) {
                    data.featureClass = 'P';
                    data.style = 'full';
                    data.username = 'jqwidgets';
                    data.maxRows = 50;
                    return data;
                }
            }
        );
 
        let columns =
        [
            { 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' }
        ];
        return (
            <JqxDataTable ref='myDataTable'
                source={dataAdapter} columns={columns} width={850} serverProcessing={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the showHeader property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDataTable, { jqx } from 'jqwidgets-react/react_jqxdatatable.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            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'
        };
         
        let dataAdapter = new jqx.dataAdapter(source,
            {
                formatData: function (data) {
                    data.featureClass = 'P';
                    data.style = 'full';
                    data.username = 'jqwidgets';
                    data.maxRows = 50;
                    return data;
                }
            }
        );
 
        let columns =
        [
            { 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' }
        ];
        return (
            <JqxDataTable ref='myDataTable'
                source={dataAdapter} columns={columns} width={850} showHeader={false}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the theme property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDataTable, { jqx } from 'jqwidgets-react/react_jqxdatatable.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            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'
        };
         
        let dataAdapter = new jqx.dataAdapter(source,
            {
                formatData: function (data) {
                    data.featureClass = 'P';
                    data.style = 'full';
                    data.username = 'jqwidgets';
                    data.maxRows = 50;
                    return data;
                }
            }
        );
 
        let columns =
        [
            { 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' }
        ];
        return (
            <JqxDataTable ref='myDataTable'
                source={dataAdapter} columns={columns} width={850} theme={'energyblue'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the toolbarHeight property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDataTable, { jqx } from 'jqwidgets-react/react_jqxdatatable.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            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'
        };
         
        let dataAdapter = new jqx.dataAdapter(source,
            {
                formatData: function (data) {
                    data.featureClass = 'P';
                    data.style = 'full';
                    data.username = 'jqwidgets';
                    data.maxRows = 50;
                    return data;
                }
            }
        );
 
        let columns =
        [
            { 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' }
        ];
        return (
            <JqxDataTable ref='myDataTable'
                source={dataAdapter} columns={columns} width={850} toolbarHeight={40}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the width property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDataTable, { jqx } from 'jqwidgets-react/react_jqxdatatable.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            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'
        };
         
        let dataAdapter = new jqx.dataAdapter(source,
            {
                formatData: function (data) {
                    data.featureClass = 'P';
                    data.style = 'full';
                    data.username = 'jqwidgets';
                    data.maxRows = 50;
                    return data;
                }
            }
        );
 
        let columns =
        [
            { 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' }
        ];
        return (
            <JqxDataTable ref='myDataTable'
                source={dataAdapter} columns={columns} width={850}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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 React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDataTable, { jqx } from 'jqwidgets-react/react_jqxdatatable.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myDataTable.on('bindingComplete', (event) => {
            // Do Something...
        });
    }

    render() {       
        let source =
        {
            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'
        };
         
        let dataAdapter = new jqx.dataAdapter(source,
            {
                formatData: function (data) {
                    data.featureClass = 'P';
                    data.style = 'full';
                    data.username = 'jqwidgets';
                    data.maxRows = 50;
                    return data;
                }
            }
        );
 
        let columns =
        [
            { 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' }
        ];
        return (
            <JqxDataTable ref='myDataTable'
                source={dataAdapter} columns={columns} width={850}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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 React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDataTable, { jqx } from 'jqwidgets-react/react_jqxdatatable.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myDataTable.on('cellBeginEdit', (event) => {
            // Do Something...
        });
    }

    render() {       
        let source =
        {
            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'
        };
         
        let dataAdapter = new jqx.dataAdapter(source,
            {
                formatData: function (data) {
                    data.featureClass = 'P';
                    data.style = 'full';
                    data.username = 'jqwidgets';
                    data.maxRows = 50;
                    return data;
                }
            }
        );
 
        let columns =
        [
            { 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' }
        ];
        return (
            <JqxDataTable ref='myDataTable'
                source={dataAdapter} columns={columns} width={850}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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 React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDataTable, { jqx } from 'jqwidgets-react/react_jqxdatatable.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myDataTable.on('cellEndEdit', (event) => {
            // Do Something...
        });
    }

    render() {       
        let source =
        {
            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'
        };
         
        let dataAdapter = new jqx.dataAdapter(source,
            {
                formatData: function (data) {
                    data.featureClass = 'P';
                    data.style = 'full';
                    data.username = 'jqwidgets';
                    data.maxRows = 50;
                    return data;
                }
            }
        );
 
        let columns =
        [
            { 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' }
        ];
        return (
            <JqxDataTable ref='myDataTable'
                source={dataAdapter} columns={columns} width={850}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when a cell value is changed.

Code examples

Bind to the cellValueChanged event of jqxDataTable.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDataTable, { jqx } from 'jqwidgets-react/react_jqxdatatable.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myDataTable.on('cellValueChanged', (event) => {
            // Do Something...
        });
    }

    render() {       
        let source =
        {
            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'
        };
         
        let dataAdapter = new jqx.dataAdapter(source,
            {
                formatData: function (data) {
                    data.featureClass = 'P';
                    data.style = 'full';
                    data.username = 'jqwidgets';
                    data.maxRows = 50;
                    return data;
                }
            }
        );
 
        let columns =
        [
            { 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' }
        ];
        return (
            <JqxDataTable ref='myDataTable'
                source={dataAdapter} columns={columns} width={850}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when a column is resized.

Code examples

Bind to the columnResized event of jqxDataTable.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDataTable, { jqx } from 'jqwidgets-react/react_jqxdatatable.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myDataTable.on('columnResized', (event) => {
            // Do Something...
        });
    }

    render() {       
        let source =
        {
            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'
        };
         
        let dataAdapter = new jqx.dataAdapter(source,
            {
                formatData: function (data) {
                    data.featureClass = 'P';
                    data.style = 'full';
                    data.username = 'jqwidgets';
                    data.maxRows = 50;
                    return data;
                }
            }
        );
 
        let columns =
        [
            { 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' }
        ];
        return (
            <JqxDataTable ref='myDataTable'
                source={dataAdapter} columns={columns} width={850}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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

Code examples

Bind to the columnReordered event of jqxDataTable.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDataTable, { jqx } from 'jqwidgets-react/react_jqxdatatable.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myDataTable.on('columnReordered', (event) => {
            // Do Something...
        });
    }

    render() {       
        let source =
        {
            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'
        };
         
        let dataAdapter = new jqx.dataAdapter(source,
            {
                formatData: function (data) {
                    data.featureClass = 'P';
                    data.style = 'full';
                    data.username = 'jqwidgets';
                    data.maxRows = 50;
                    return data;
                }
            }
        );
 
        let columns =
        [
            { 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' }
        ];
        return (
            <JqxDataTable ref='myDataTable'
                source={dataAdapter} columns={columns} width={850}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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

Code examples

Bind to the sort event of jqxDataTable.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDataTable, { jqx } from 'jqwidgets-react/react_jqxdatatable.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myDataTable.on('sort', (event) => {
            // Do Something...
        });
    }

    render() {       
        let source =
        {
            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'
        };
         
        let dataAdapter = new jqx.dataAdapter(source,
            {
                formatData: function (data) {
                    data.featureClass = 'P';
                    data.style = 'full';
                    data.username = 'jqwidgets';
                    data.maxRows = 50;
                    return data;
                }
            }
        );
 
        let columns =
        [
            { 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' }
        ];
        return (
            <JqxDataTable ref='myDataTable'
                source={dataAdapter} columns={columns} width={850}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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

Code examples

Bind to the filter event of jqxDataTable.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDataTable, { jqx } from 'jqwidgets-react/react_jqxdatatable.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myDataTable.on('filter', (event) => {
            // Do Something...
        });
    }

    render() {       
        let source =
        {
            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'
        };
         
        let dataAdapter = new jqx.dataAdapter(source,
            {
                formatData: function (data) {
                    data.featureClass = 'P';
                    data.style = 'full';
                    data.username = 'jqwidgets';
                    data.maxRows = 50;
                    return data;
                }
            }
        );
 
        let columns =
        [
            { 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' }
        ];
        return (
            <JqxDataTable ref='myDataTable'
                source={dataAdapter} columns={columns} width={850}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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

Code examples

Bind to the pageChanged event of jqxDataTable.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDataTable, { jqx } from 'jqwidgets-react/react_jqxdatatable.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myDataTable.on('pageChanged', (event) => {
            // Do Something...
        });
    }

    render() {       
        let source =
        {
            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'
        };
         
        let dataAdapter = new jqx.dataAdapter(source,
            {
                formatData: function (data) {
                    data.featureClass = 'P';
                    data.style = 'full';
                    data.username = 'jqwidgets';
                    data.maxRows = 50;
                    return data;
                }
            }
        );
 
        let columns =
        [
            { 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' }
        ];
        return (
            <JqxDataTable ref='myDataTable'
                source={dataAdapter} columns={columns} width={850}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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

Code examples

Bind to the pageSizeChanged event of jqxDataTable.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDataTable, { jqx } from 'jqwidgets-react/react_jqxdatatable.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myDataTable.on('pageSizeChanged', (event) => {
            // Do Something...
        });
    }

    render() {       
        let source =
        {
            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'
        };
         
        let dataAdapter = new jqx.dataAdapter(source,
            {
                formatData: function (data) {
                    data.featureClass = 'P';
                    data.style = 'full';
                    data.username = 'jqwidgets';
                    data.maxRows = 50;
                    return data;
                }
            }
        );
 
        let columns =
        [
            { 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' }
        ];
        return (
            <JqxDataTable ref='myDataTable'
                source={dataAdapter} columns={columns} width={850}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This is triggered when a row is clicked.

Code examples

Bind to the rowClick event of jqxDataTable.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDataTable, { jqx } from 'jqwidgets-react/react_jqxdatatable.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myDataTable.on('rowClick', (event) => {
            // Do Something...
        });
    }

    render() {       
        let source =
        {
            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'
        };
         
        let dataAdapter = new jqx.dataAdapter(source,
            {
                formatData: function (data) {
                    data.featureClass = 'P';
                    data.style = 'full';
                    data.username = 'jqwidgets';
                    data.maxRows = 50;
                    return data;
                }
            }
        );
 
        let columns =
        [
            { 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' }
        ];
        return (
            <JqxDataTable ref='myDataTable'
                source={dataAdapter} columns={columns} width={850}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This is triggered when a row is double-clicked.

Code examples

Bind to the rowDoubleClick event of jqxDataTable.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDataTable, { jqx } from 'jqwidgets-react/react_jqxdatatable.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myDataTable.on('rowDoubleClick', (event) => {
            // Do Something...
        });
    }

    render() {       
        let source =
        {
            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'
        };
         
        let dataAdapter = new jqx.dataAdapter(source,
            {
                formatData: function (data) {
                    data.featureClass = 'P';
                    data.style = 'full';
                    data.username = 'jqwidgets';
                    data.maxRows = 50;
                    return data;
                }
            }
        );
 
        let columns =
        [
            { 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' }
        ];
        return (
            <JqxDataTable ref='myDataTable'
                source={dataAdapter} columns={columns} width={850}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This is triggered when a row is selected.

Code examples

Bind to the rowSelect event of jqxDataTable.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDataTable, { jqx } from 'jqwidgets-react/react_jqxdatatable.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myDataTable.on('rowSelect', (event) => {
            // Do Something...
        });
    }

    render() {       
        let source =
        {
            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'
        };
         
        let dataAdapter = new jqx.dataAdapter(source,
            {
                formatData: function (data) {
                    data.featureClass = 'P';
                    data.style = 'full';
                    data.username = 'jqwidgets';
                    data.maxRows = 50;
                    return data;
                }
            }
        );
 
        let columns =
        [
            { 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' }
        ];
        return (
            <JqxDataTable ref='myDataTable'
                source={dataAdapter} columns={columns} width={850}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This is triggered when a row is unselected.

Code examples

Bind to the rowUnselect event of jqxDataTable.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDataTable, { jqx } from 'jqwidgets-react/react_jqxdatatable.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myDataTable.on('rowUnselect', (event) => {
            // Do Something...
        });
    }

    render() {       
        let source =
        {
            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'
        };
         
        let dataAdapter = new jqx.dataAdapter(source,
            {
                formatData: function (data) {
                    data.featureClass = 'P';
                    data.style = 'full';
                    data.username = 'jqwidgets';
                    data.maxRows = 50;
                    return data;
                }
            }
        );
 
        let columns =
        [
            { 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' }
        ];
        return (
            <JqxDataTable ref='myDataTable'
                source={dataAdapter} columns={columns} width={850}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This is triggered when a row edit begins.

Code examples

Bind to the rowBeginEdit event of jqxDataTable.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDataTable, { jqx } from 'jqwidgets-react/react_jqxdatatable.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myDataTable.on('rowBeginEdit', (event) => {
            // Do Something...
        });
    }

    render() {       
        let source =
        {
            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'
        };
         
        let dataAdapter = new jqx.dataAdapter(source,
            {
                formatData: function (data) {
                    data.featureClass = 'P';
                    data.style = 'full';
                    data.username = 'jqwidgets';
                    data.maxRows = 50;
                    return data;
                }
            }
        );
 
        let columns =
        [
            { 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' }
        ];
        return (
            <JqxDataTable ref='myDataTable'
                source={dataAdapter} columns={columns} width={850}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This is triggered when a row edit ends.

Code examples

Bind to the rowEndEdit event of jqxDataTable.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDataTable, { jqx } from 'jqwidgets-react/react_jqxdatatable.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myDataTable.on('rowEndEdit', (event) => {
            // Do Something...
        });
    }

    render() {       
        let source =
        {
            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'
        };
         
        let dataAdapter = new jqx.dataAdapter(source,
            {
                formatData: function (data) {
                    data.featureClass = 'P';
                    data.style = 'full';
                    data.username = 'jqwidgets';
                    data.maxRows = 50;
                    return data;
                }
            }
        );
 
        let columns =
        [
            { 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' }
        ];
        return (
            <JqxDataTable ref='myDataTable'
                source={dataAdapter} columns={columns} width={850}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This is triggered when a row is expanded.

Code examples

Bind to the rowExpand event of jqxDataTable.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDataTable, { jqx } from 'jqwidgets-react/react_jqxdatatable.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myDataTable.on('rowExpand', (event) => {
            // Do Something...
        });
    }

    render() {       
        let source =
        {
            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'
        };
         
        let dataAdapter = new jqx.dataAdapter(source,
            {
                formatData: function (data) {
                    data.featureClass = 'P';
                    data.style = 'full';
                    data.username = 'jqwidgets';
                    data.maxRows = 50;
                    return data;
                }
            }
        );
 
        let columns =
        [
            { 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' }
        ];
        return (
            <JqxDataTable ref='myDataTable'
                source={dataAdapter} columns={columns} width={850}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This is triggered when a row is collapsed.

Code examples

Bind to the rowCollapse event of jqxDataTable.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDataTable, { jqx } from 'jqwidgets-react/react_jqxdatatable.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myDataTable.on('rowCollapse', (event) => {
            // Do Something...
        });
    }

    render() {       
        let source =
        {
            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'
        };
         
        let dataAdapter = new jqx.dataAdapter(source,
            {
                formatData: function (data) {
                    data.featureClass = 'P';
                    data.style = 'full';
                    data.username = 'jqwidgets';
                    data.maxRows = 50;
                    return data;
                }
            }
        );
 
        let columns =
        [
            { 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' }
        ];
        return (
            <JqxDataTable ref='myDataTable'
                source={dataAdapter} columns={columns} width={850}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDataTable, { jqx } from 'jqwidgets-react/react_jqxdatatable.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myDataTable.addRow(10,{},'first');
    }

    render() {       
        let source =
        {
            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'
        };
         
        let dataAdapter = new jqx.dataAdapter(source,
            {
                formatData: function (data) {
                    data.featureClass = 'P';
                    data.style = 'full';
                    data.username = 'jqwidgets';
                    data.maxRows = 50;
                    return data;
                }
            }
        );
 
        let columns =
        [
            { 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' }
        ];
        return (
            <JqxDataTable ref='myDataTable'
                source={dataAdapter} columns={columns} width={850}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDataTable, { jqx } from 'jqwidgets-react/react_jqxdatatable.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myDataTable.addFilter('firstName',new $.jqx.filtergroup());
    }

    render() {       
        let source =
        {
            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'
        };
         
        let dataAdapter = new jqx.dataAdapter(source,
            {
                formatData: function (data) {
                    data.featureClass = 'P';
                    data.style = 'full';
                    data.username = 'jqwidgets';
                    data.maxRows = 50;
                    return data;
                }
            }
        );
 
        let columns =
        [
            { 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' }
        ];
        return (
            <JqxDataTable ref='myDataTable'
                source={dataAdapter} columns={columns} width={850}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDataTable, { jqx } from 'jqwidgets-react/react_jqxdatatable.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myDataTable.applyFilters();
    }

    render() {       
        let source =
        {
            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'
        };
         
        let dataAdapter = new jqx.dataAdapter(source,
            {
                formatData: function (data) {
                    data.featureClass = 'P';
                    data.style = 'full';
                    data.username = 'jqwidgets';
                    data.maxRows = 50;
                    return data;
                }
            }
        );
 
        let columns =
        [
            { 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' }
        ];
        return (
            <JqxDataTable ref='myDataTable'
                source={dataAdapter} columns={columns} width={850}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDataTable, { jqx } from 'jqwidgets-react/react_jqxdatatable.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myDataTable.beginUpdate();
    }

    render() {       
        let source =
        {
            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'
        };
         
        let dataAdapter = new jqx.dataAdapter(source,
            {
                formatData: function (data) {
                    data.featureClass = 'P';
                    data.style = 'full';
                    data.username = 'jqwidgets';
                    data.maxRows = 50;
                    return data;
                }
            }
        );
 
        let columns =
        [
            { 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' }
        ];
        return (
            <JqxDataTable ref='myDataTable'
                source={dataAdapter} columns={columns} width={850}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDataTable, { jqx } from 'jqwidgets-react/react_jqxdatatable.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myDataTable.beginRowEdit(10);
    }

    render() {       
        let source =
        {
            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'
        };
         
        let dataAdapter = new jqx.dataAdapter(source,
            {
                formatData: function (data) {
                    data.featureClass = 'P';
                    data.style = 'full';
                    data.username = 'jqwidgets';
                    data.maxRows = 50;
                    return data;
                }
            }
        );
 
        let columns =
        [
            { 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' }
        ];
        return (
            <JqxDataTable ref='myDataTable'
                source={dataAdapter} columns={columns} width={850}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDataTable, { jqx } from 'jqwidgets-react/react_jqxdatatable.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myDataTable.beginCellEdit(10,'firstName');
    }

    render() {       
        let source =
        {
            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'
        };
         
        let dataAdapter = new jqx.dataAdapter(source,
            {
                formatData: function (data) {
                    data.featureClass = 'P';
                    data.style = 'full';
                    data.username = 'jqwidgets';
                    data.maxRows = 50;
                    return data;
                }
            }
        );
 
        let columns =
        [
            { 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' }
        ];
        return (
            <JqxDataTable ref='myDataTable'
                source={dataAdapter} columns={columns} width={850}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDataTable, { jqx } from 'jqwidgets-react/react_jqxdatatable.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myDataTable.clearSelection();
    }

    render() {       
        let source =
        {
            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'
        };
         
        let dataAdapter = new jqx.dataAdapter(source,
            {
                formatData: function (data) {
                    data.featureClass = 'P';
                    data.style = 'full';
                    data.username = 'jqwidgets';
                    data.maxRows = 50;
                    return data;
                }
            }
        );
 
        let columns =
        [
            { 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' }
        ];
        return (
            <JqxDataTable ref='myDataTable'
                source={dataAdapter} columns={columns} width={850}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDataTable, { jqx } from 'jqwidgets-react/react_jqxdatatable.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myDataTable.clearFilters();
    }

    render() {       
        let source =
        {
            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'
        };
         
        let dataAdapter = new jqx.dataAdapter(source,
            {
                formatData: function (data) {
                    data.featureClass = 'P';
                    data.style = 'full';
                    data.username = 'jqwidgets';
                    data.maxRows = 50;
                    return data;
                }
            }
        );
 
        let columns =
        [
            { 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' }
        ];
        return (
            <JqxDataTable ref='myDataTable'
                source={dataAdapter} columns={columns} width={850}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDataTable, { jqx } from 'jqwidgets-react/react_jqxdatatable.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myDataTable.clear();
    }

    render() {       
        let source =
        {
            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'
        };
         
        let dataAdapter = new jqx.dataAdapter(source,
            {
                formatData: function (data) {
                    data.featureClass = 'P';
                    data.style = 'full';
                    data.username = 'jqwidgets';
                    data.maxRows = 50;
                    return data;
                }
            }
        );
 
        let columns =
        [
            { 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' }
        ];
        return (
            <JqxDataTable ref='myDataTable'
                source={dataAdapter} columns={columns} width={850}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDataTable, { jqx } from 'jqwidgets-react/react_jqxdatatable.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myDataTable.destroy();
    }

    render() {       
        let source =
        {
            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'
        };
         
        let dataAdapter = new jqx.dataAdapter(source,
            {
                formatData: function (data) {
                    data.featureClass = 'P';
                    data.style = 'full';
                    data.username = 'jqwidgets';
                    data.maxRows = 50;
                    return data;
                }
            }
        );
 
        let columns =
        [
            { 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' }
        ];
        return (
            <JqxDataTable ref='myDataTable'
                source={dataAdapter} columns={columns} width={850}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));