React UI Components Documentation
Properties
| Name | Type | Default |
|---|---|---|
| altRows | Boolean | false |
|
Sets or gets the 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'));
|
||
| autoRowHeight | Boolean | true |
|
Sets or gets the 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'));
|
||
| aggregatesHeight | Number | 34 |
|
Sets or gets the 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'));
|
||
| autoShowLoadElement | Boolean | true |
|
Sets or gets the 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'));
|
||
| columnsHeight | Number | 30 |
|
Sets or gets the 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'));
|
||
| columns | Array | [] |
|
Sets or gets the 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'));
|
||
| columnGroups | Array | [] |
|
Sets or gets the 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'));
|
||
| columnsResize | Boolean | false |
|
Sets or gets the 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'));
|
||
| columnsReorder | Boolean | false |
|
Sets or gets the 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'));
|
||
| disabled | Boolean | false |
|
Sets or gets the 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'));
|
||
| editable | Boolean | false |
|
Sets or gets the 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'));
|
||
| editSettings | Object | { saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: true, cancelOnEsc: true, saveOnEnter: true, editSingleCell: false, editOnDoubleClick: true, editOnF2: true } |
|
Sets or gets the 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'));
|
||
| exportSettings | Object | { columnsHeader: true, hiddenColumns: false, serverURL: null, characterSet: null, recordsInView: true, fileName: "jqxDataTable"} |
|
Sets or gets the 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'));
|
||
| enableHover | Boolean | true |
|
Sets or gets the 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'));
|
||
| enableBrowserSelection | Boolean | false |
|
Sets or gets the 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'));
|
||
| filterable | Boolean | false |
|
Sets or gets the 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'));
|
||
| filterHeight | Number | 30 |
|
Sets or gets the 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'));
|
||
| filterMode | String | "default" |
|
Sets or gets the 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'));
|
||
| groups | Array | [] |
|
Sets or gets the 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'));
|
||
| groupsRenderer | Function | null |
|
Sets or gets the 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'));
|
||
| height | Number | null |
|
Sets or gets the 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'));
|
||
| initRowDetails | Function | null |
|
Sets or gets the 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'));
|
||
| incrementalSearch | Boolean | true |
|
Sets or gets the 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'));
|
||
| localization | Object | default localization strings. |
|
Sets or gets the 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'));
|
||
| pagerHeight | Number | 28 |
|
Sets or gets the 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'));
|
||
| pageSize | Number | 10 |
|
Sets or gets the 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'));
|
||
| pageSizeOptions | Array | ['5', '10', '20'] |
|
Sets or gets the 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'));
|
||
| pageable | Boolean | false |
|
Sets or gets the 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'));
|
||
| pagerPosition | String | "bottom" |
|
Sets or gets the 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'));
|
||
| pagerMode | String | "default" |
|
Sets or gets the 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'));
|
||
| pagerButtonsCount | Number | 5 |
|
Sets or gets the 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'));
|
||
| pagerRenderer | Function | null |
|
Sets or gets the 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'));
|
||
| ready | Function | null |
|
Sets or gets the 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'));
|
||
| rowDetails | Boolean | false |
|
Sets or gets the 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'));
|
||
| renderToolbar | Function | null |
|
Sets or gets the 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'));
|
||
| renderStatusbar | Function | null |
|
Sets or gets the 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'));
|
||
| rendering | Function | null |
|
Sets or gets the 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'));
|
||
| rendered | Function | null |
|
Sets or gets the 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'));
|
||
| rtl | Boolean | false |
|
Sets or gets the 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'));
|
||
| source | Object | null |
|
Sets or gets the 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'));
|
||
| sortable | Boolean | false |
|
Sets or gets the 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'));
|
||
| showAggregates | Boolean | false |
|
Sets or gets the 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'));
|
||
| showToolbar | Boolean | false |
|
Sets or gets the 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'));
|
||
| showStatusbar | Boolean | false |
|
Sets or gets the 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'));
|
||
| statusBarHeight | Number | 34 |
|
Sets or gets the 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'));
|
||
| scrollBarSize | Number | 17 |
|
Sets or gets the 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'));
|
||
| selectionMode | String | "multipleRows" |
|
Sets or gets the 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'));
|
||
| serverProcessing | Boolean | false |
|
Sets or gets the 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'));
|
||
| showHeader | Boolean | true |
|
Sets or gets the 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'));
|
||
| theme | String | '' |
|
Sets or gets the 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'));
|
||
| toolbarHeight | Number | 34 |
|
Sets or gets the 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'));
|
||
| width | Number | null |
|
Sets or gets the 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'));
|
||
Events |
||
| bindingComplete | Event | |
|
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 Code examples
Bind to the
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...
});
}
|
||
| cellBeginEdit | Event | |
|
This is triggered when a cell edit begins. Note: To turn on cell editing, you should set the Code examples
Bind to the
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...
});
}
|
||
| cellEndEdit | Event | |
|
This is triggered when a cell edit ends. Note: To turn on cell editing, you should set the Code examples
Bind to the
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...
});
}
|
||
| cellValueChanged | Event | |
|
This event is triggered when a cell value is changed. Code examples
Bind to the
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...
});
}
|
||
| columnResized | Event | |
|
This event is triggered when a column is resized. Code examples
Bind to the
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...
});
}
|
||
| columnReordered | Event | |
|
This event is triggered when the column's order is changed. Code examples
Bind to the
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...
});
}
|
||
| sort | Event | |
|
This event is triggered when the jqxDataTable sort order or sort column is changed. Code examples
Bind to the
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...
});
}
|
||
| filter | Event | |
|
This event is triggered when the jqxDataTable's rows filter is changed. Code examples
Bind to the
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...
});
}
|
||
| pageChanged | Event | |
|
This is triggered when the jqxDataTable's current page is changed. Code examples
Bind to the
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...
});
}
|
||
| pageSizeChanged | Event | |
|
This is triggered when the jqxDataTable's page size is changed. Code examples
Bind to the
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...
});
}
|
||
| rowClick | Event | |
|
This is triggered when a row is clicked. Code examples
Bind to the
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...
});
}
|
||
| rowDoubleClick | Event | |
|
This is triggered when a row is double-clicked. Code examples
Bind to the
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...
});
}
|
||
| rowSelect | Event | |
|
This is triggered when a row is selected. Code examples
Bind to the
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...
});
}
|
||
| rowUnselect | Event | |
|
This is triggered when a row is unselected. Code examples
Bind to the
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...
});
}
|
||
| rowBeginEdit | Event | |
|
This is triggered when a row edit begins. Code examples
Bind to the
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...
});
}
|
||
| rowEndEdit | Event | |
|
This is triggered when a row edit ends. Code examples
Bind to the
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...
});
}
|
||
| rowExpand | Event | |
|
This is triggered when a row is expanded. Code examples
Bind to the
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...
});
}
|
||
| rowCollapse | Event | |
|
This is triggered when a row is collapsed. Code examples
Bind to the
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...
});
}
|
||
Methods |
||
| Name | Return Type | |
| addRow | None | |
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');
}
|
||
| addFilter | None | |
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());
}
|
||
| applyFilters | None | |
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();
}
|
||
| beginUpdate | None | |
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();
}
|
||
| beginRowEdit | None | |
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);
}
|
||
| beginCellEdit | None | |
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');
}
|
||
| clearSelection | None | |
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();
}
|
||
| clearFilters | None | |
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();
}
|
||
| clear | None | |
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();
}
|
||
| destroy | None | |
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();
}
|
||
| deleteRow | None | |
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.deleteRow(0);
}
|
||
| endUpdate | None | |
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.endUpdate();
}
|
||
| ensureRowVisible | None | |
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.ensureRowVisible(10);
}
|
||
| endRowEdit | None | |
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.endRowEdit(10,true);
}
|
||
| endCellEdit | None | |
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.endCellEdit(10,'firstName');
}
|
||
| exportData | Object(optional) | |
import React from 'react';
import ReactDOM from 'react-dom';
import JqxDataTable, { jqx } from 'jqwidgets-react/react_jqxdatatable.js';
class App extends React.Component {
componentDidMount() {
let value = this.refs.myDataTable.exportData('xls');
}
|
||
| focus | None | |
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.focus();
}
|
||
| getColumnProperty | Object | |
import React from 'react';
import ReactDOM from 'react-dom';
import JqxDataTable, { jqx } from 'jqwidgets-react/react_jqxdatatable.js';
class App extends React.Component {
componentDidMount() {
let value = this.refs.myDataTable.getColumnProperty('firstName');
}
|
||
| goToPage | None | |
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.goToPage(10);
}
|
||
| goToPrevPage | None | |
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.goToPrevPage();
}
|
||
| goToNextPage | None | |
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.goToNextPage();
}
|
||
| getSelection | Array | |
import React from 'react';
import ReactDOM from 'react-dom';
import JqxDataTable, { jqx } from 'jqwidgets-react/react_jqxdatatable.js';
class App extends React.Component {
componentDidMount() {
let value = this.refs.myDataTable.getSelection();
}
|
||
| getRows | Array | |
import React from 'react';
import ReactDOM from 'react-dom';
import JqxDataTable, { jqx } from 'jqwidgets-react/react_jqxdatatable.js';
class App extends React.Component {
componentDidMount() {
let value = this.refs.myDataTable.getRows();
}
|
||
| getView | Array | |
import React from 'react';
import ReactDOM from 'react-dom';
import JqxDataTable, { jqx } from 'jqwidgets-react/react_jqxdatatable.js';
class App extends React.Component {
componentDidMount() {
let value = this.refs.myDataTable.getView();
}
|
||
| getCellValue | Object | |
import React from 'react';
import ReactDOM from 'react-dom';
import JqxDataTable, { jqx } from 'jqwidgets-react/react_jqxdatatable.js';
class App extends React.Component {
componentDidMount() {
let value = this.refs.myDataTable.getCellValue(1,'firstName');
}
|
||
| hideColumn | None | |
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.hideColumn('firstName');
}
|
||
| hideDetails | None | |
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.hideDetails(1);
}
|
||
| isBindingCompleted | Boolean | |
import React from 'react';
import ReactDOM from 'react-dom';
import JqxDataTable, { jqx } from 'jqwidgets-react/react_jqxdatatable.js';
class App extends React.Component {
componentDidMount() {
let value = this.refs.myDataTable.isBindingCompleted();
}
|
||
| lockRow | None | |
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.lockRow(10);
}
|
||
| refresh | None | |
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.refresh();
}
|
||
| render | None | |
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.render();
}
|
||
| removeFilter | None | |
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.removeFilter(firstName);
}
|
||
| scrollOffset | Object | |
import React from 'react';
import ReactDOM from 'react-dom';
import JqxDataTable, { jqx } from 'jqwidgets-react/react_jqxdatatable.js';
class App extends React.Component {
componentDidMount() {
let value = this.refs.myDataTable.scrollOffset(10,0);
}
|
||
| setColumnProperty | None | |
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.setColumnProperty('firstName','text','New Text');
}
|
||
| showColumn | None | |
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.showColumn('firstName');
}
|
||
| selectRow | None | |
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.selectRow(1);
}
|
||
| showDetails | None | |
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.showDetails(1);
}
|
||
| setCellValue | None | |
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.setCellValue(1,'firstName','New Value');
}
|
||
| sortBy | None | |
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.sortBy('firstNmae','asc');
}
|
||
| updating | Boolean | |
import React from 'react';
import ReactDOM from 'react-dom';
import JqxDataTable, { jqx } from 'jqwidgets-react/react_jqxdatatable.js';
class App extends React.Component {
componentDidMount() {
let value = this.refs.myDataTable.updating();
}
|
||
| updateBoundData | None | |
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.updateBoundData();
}
|
||
| unselectRow | None | |
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.unselectRow(1);
}
|
||
| updateRow | None | |
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.updateRow(1,{});
}
|
||
| unlockRow | None | |
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.unlockRow(1);
}
|
||
