React UI Components Documentation

Sets or gets whether the jqxDataTable automatically alternates row colors.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDataTable, { IDataTableProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatatable';
 
class App extends React.PureComponent<{}, IDataTableProps> {
  private myDataTable = React.createRef<JqxDataTable>(); 
 
  constructor(props: {}) {
    super(props);
 
    const source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        dataFields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
    };
    
    this.state = {
        source: new jqx.dataAdapter(source),
        columns: [
          { text: 'Contact Name', dataField: 'ContactName' },
          { text: 'Contact Title', dataField: 'Title' },
          { text: 'City', dataField: 'City' },
          { text: 'Country', dataField: 'Country' }
        ]
    }
  }
  
  public render() {
    return (
      <JqxDataTable ref={this.myDataTable} 
        width={850} source={this.state.source} columns={this.state.columns} altRows={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets whether the jqxDataTable automatically calculates the rows height and wraps the cell text.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDataTable, { IDataTableProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatatable';
 
class App extends React.PureComponent<{}, IDataTableProps> {
  private myDataTable = React.createRef<JqxDataTable>(); 
 
  constructor(props: {}) {
    super(props);
 
    const source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        dataFields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
    };
    
    this.state = {
        source: new jqx.dataAdapter(source),
        columns: [
          { text: 'Contact Name', dataField: 'ContactName' },
          { text: 'Contact Title', dataField: 'Title' },
          { text: 'City', dataField: 'City' },
          { text: 'Country', dataField: 'Country' }
        ]
    }
  }
  
  public render() {
    return (
      <JqxDataTable ref={this.myDataTable} 
        width={450} source={this.state.source} columns={this.state.columns} autoRowHeight={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the height of the aggregates bar. Aggregates bar is displayed after setting showAggregates to true.

Sets or gets whether the loading html element with animated gif is automatically displayed by the widget during the data binding process.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDataTable, { IDataTableProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatatable';
 
class App extends React.PureComponent<{}, IDataTableProps> {
  private myDataTable = React.createRef<JqxDataTable>(); 
 
  constructor(props: {}) {
    super(props);
 
    const source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        dataFields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
    };
    
    this.state = {
        source: new jqx.dataAdapter(source),
        columns: [
          { text: 'Contact Name', dataField: 'ContactName' },
          { text: 'Contact Title', dataField: 'Title' },
          { text: 'City', dataField: 'City' },
          { text: 'Country', dataField: 'Country' }
        ]
    }
  }
  
  public render() {
    return (
      <JqxDataTable ref={this.myDataTable} 
        width={850} source={this.state.source} columns={this.state.columns} autoShowLoadElement={false}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the height of the columns header.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDataTable, { IDataTableProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatatable';
 
class App extends React.PureComponent<{}, IDataTableProps> {
  private myDataTable = React.createRef<JqxDataTable>(); 
 
  constructor(props: {}) {
    super(props);
 
    const source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        dataFields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
    };
    
    this.state = {
        source: new jqx.dataAdapter(source),
        columns: [
          { text: 'Contact Name', dataField: 'ContactName' },
          { text: 'Contact Title', dataField: 'Title' },
          { text: 'City', dataField: 'City' },
          { text: 'Country', dataField: 'Country' }
        ]
    }
  }
  
  public render() {
    return (
      <JqxDataTable ref={this.myDataTable} 
        width={850} source={this.state.source} columns={this.state.columns} columnsHeight={20}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets the jqxDataTable's columns.

• text - string property which sets the column header's text.
• dataField - string property which sets the column's bound field. It should be unique and should point to a data field defined in the jqxDataAdapter's dataFields array.
• displayField - string property which sets the column's display field. It should be unique and should point to a data field defined in the jqxDataAdapter's dataFields array.
• sortable - boolean property which determines whether the column is sortable.
• filterable - boolean property which determines whether the column is filterable.
• hidden - boolean property which determines whether the column is visible or hidden.
• columnGroup - string property which determines the name of the column's parent group. It should point to a valid name defined in the columnGroups.
• autoCellHeight - boolean property which determines whether the cell's data wrapping is enabled. This property is set to true by default. When autoRowHeight is enabled and autoCellHeight is set to false, the cell's data will not be wrapped.
• renderer - callback function for custom rendering of the column's header.

  /* tslint:disable */
  import * as React from 'react';
  import * as ReactDOM from 'react-dom';
   
  import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
  import JqxDataTable, { IDataTableProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatatable';
   
  class App extends React.PureComponent<{}, IDataTableProps> {
    private myDataTable = React.createRef<JqxDataTable>(); 
   
    constructor(props: {}) {
      super(props);
   
      const source = {
          localdata: [
            [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
            [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
            [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
          ],
          dataFields: [
            { name: 'ContactName', type: 'string', map: '0' },
            { name: 'Title', type: 'string', map: '1' },
            { name: 'City', type: 'string', map: '2' },
            { name: 'Country', type: 'string', map: '3' }
          ],
          datatype: 'array'
      };
      
      this.state = {
          source: new jqx.dataAdapter(source),
          columns: [
            { text: 'Contact Name', dataField: 'ContactName' },
            { text: 'Contact Title', dataField: 'Title' },
            { text: 'City', dataField: 'City' },
            { text: 'Country', dataField: 'Country' }
          ]
      }
    }
    
    public render() {
      return (
        <JqxDataTable ref={this.myDataTable} 
          width={850} source={this.state.source} columns={this.state.columns}
        />
      );
    }
  }
   
  ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
  

Sets the jqxDataTable's column groups.

• parentGroup - string property which determines the parent group's name.
• name - string property which determines the group's name.
• align - string property which determines the column header's alignment. Possible values: 'left', 'center' or 'right'.

Sets or gets the jqxDataTable's columnsResize.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDataTable, { IDataTableProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatatable';
 
class App extends React.PureComponent<{}, IDataTableProps> {
  private myDataTable = React.createRef<JqxDataTable>(); 
 
  constructor(props: {}) {
    super(props);
 
    const source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        dataFields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
    };
    
    this.state = {
        source: new jqx.dataAdapter(source),
        columns: [
          { text: 'Contact Name', dataField: 'ContactName' },
          { text: 'Contact Title', dataField: 'Title' },
          { text: 'City', dataField: 'City' },
          { text: 'Country', dataField: 'Country' }
        ]
    }
  }
  
  public render() {
    return (
      <JqxDataTable ref={this.myDataTable} 
        width={850} source={this.state.source} columns={this.state.columns} columnsResize={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the jqxDataTable's columnsReorder.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDataTable, { IDataTableProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatatable';
 
class App extends React.PureComponent<{}, IDataTableProps> {
  private myDataTable = React.createRef<JqxDataTable>(); 
 
  constructor(props: {}) {
    super(props);
 
    const source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        dataFields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
    };
    
    this.state = {
        source: new jqx.dataAdapter(source),
        columns: [
          { text: 'Contact Name', dataField: 'ContactName' },
          { text: 'Contact Title', dataField: 'Title' },
          { text: 'City', dataField: 'City' },
          { text: 'Country', dataField: 'Country' }
        ]
    }
  }
  
  public render() {
    return (
      <JqxDataTable ref={this.myDataTable} 
        width={850} source={this.state.source} columns={this.state.columns} columnsReorder={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets whether the jqxDataTable is disabled.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDataTable, { IDataTableProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatatable';
 
class App extends React.PureComponent<{}, IDataTableProps> {
  private myDataTable = React.createRef<JqxDataTable>(); 
 
  constructor(props: {}) {
    super(props);
 
    const source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        dataFields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
    };
    
    this.state = {
        source: new jqx.dataAdapter(source),
        columns: [
          { text: 'Contact Name', dataField: 'ContactName' },
          { text: 'Contact Title', dataField: 'Title' },
          { text: 'City', dataField: 'City' },
          { text: 'Country', dataField: 'Country' }
        ]
    }
  }
  
  public render() {
    return (
      <JqxDataTable ref={this.myDataTable} 
        width={850} source={this.state.source} columns={this.state.columns} disabled={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets whether the jqxDataTable editing is enabled.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDataTable, { IDataTableProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatatable';
 
class App extends React.PureComponent<{}, IDataTableProps> {
  private myDataTable = React.createRef<JqxDataTable>(); 
 
  constructor(props: {}) {
    super(props);
 
    const source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        dataFields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
    };
    
    this.state = {
        source: new jqx.dataAdapter(source),
        columns: [
          { text: 'Contact Name', dataField: 'ContactName' },
          { text: 'Contact Title', dataField: 'Title' },
          { text: 'City', dataField: 'City' },
          { text: 'Country', dataField: 'Country' }
        ]
    }
  }
  
  public render() {
    return (
      <JqxDataTable ref={this.myDataTable} 
        width={850} source={this.state.source} columns={this.state.columns} editable={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the jqxDataTable's edit settings.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDataTable, { IDataTableProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatatable';
 
class App extends React.PureComponent<{}, IDataTableProps> {
  private myDataTable = React.createRef<JqxDataTable>(); 
 
  constructor(props: {}) {
    super(props);
 
    const source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        dataFields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
    };
    
    this.state = {
        editSettings:  {
          saveOnPageChange: true,
          saveOnBlur: true,
          saveOnSelectionChange: false,
          cancelOnEsc: true,
          saveOnEnter: true,
          editSingleCell: false,
          editOnDoubleClick: true,
          editOnF2: true
        },
        editable:  true,
        source: new jqx.dataAdapter(source),
        columns: [
          { text: 'Contact Name', dataField: 'ContactName' },
          { text: 'Contact Title', dataField: 'Title' },
          { text: 'City', dataField: 'City' },
          { text: 'Country', dataField: 'Country' }
        ]
    }
  }
  
  public render() {
    return (
      <JqxDataTable ref={this.myDataTable} 
        width={850} source={this.state.source} columns={this.state.columns} editSettings={this.state.editSettings}
        editable={this.state.editable}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Determines the Data Export settings used by jqxDataTable when exportData is called. See also the exportData method.

• columnsHeader - determines whether to export the column's header.
• hiddenColumns - determines whether to export the hidden columns.
• serverURL - determines the URL of the save-file.php.
• characterSet - determines the char set.
• recordsInView - determines whether to export all records or to take also the filtering and sorting into account.
• fileName - determines the file's name. Set this to null if you want to export the data to a local variable.

Sets or gets whether row highlighting is enabled.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDataTable, { IDataTableProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatatable';
 
class App extends React.PureComponent<{}, IDataTableProps> {
  private myDataTable = React.createRef<JqxDataTable>(); 
 
  constructor(props: {}) {
    super(props);
 
    const source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        dataFields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
    };
    
    this.state = {
        source: new jqx.dataAdapter(source),
        columns: [
          { text: 'Contact Name', dataField: 'ContactName' },
          { text: 'Contact Title', dataField: 'Title' },
          { text: 'City', dataField: 'City' },
          { text: 'Country', dataField: 'Country' }
        ]
    }
  }
  
  public render() {
    return (
      <JqxDataTable ref={this.myDataTable} 
        width={850} source={this.state.source} columns={this.state.columns} enableHover={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Enables or disables the default text selection of the web browser.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDataTable, { IDataTableProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatatable';
 
class App extends React.PureComponent<{}, IDataTableProps> {
  private myDataTable = React.createRef<JqxDataTable>(); 
 
  constructor(props: {}) {
    super(props);
 
    const source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        dataFields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
    };
    
    this.state = {
        source: new jqx.dataAdapter(source),
        columns: [
          { text: 'Contact Name', dataField: 'ContactName' },
          { text: 'Contact Title', dataField: 'Title' },
          { text: 'City', dataField: 'City' },
          { text: 'Country', dataField: 'Country' }
        ]
    }
  }
  
  public render() {
    return (
      <JqxDataTable ref={this.myDataTable} 
        width={850} source={this.state.source} columns={this.state.columns} enableBrowserSelection={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Enables/Disables the filtering feature.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDataTable, { IDataTableProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatatable';
 
class App extends React.PureComponent<{}, IDataTableProps> {
  private myDataTable = React.createRef<JqxDataTable>(); 
 
  constructor(props: {}) {
    super(props);
 
    const source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        dataFields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
    };
    
    this.state = {
        source: new jqx.dataAdapter(source),
        columns: [
          { text: 'Contact Name', dataField: 'ContactName' },
          { text: 'Contact Title', dataField: 'Title' },
          { text: 'City', dataField: 'City' },
          { text: 'Country', dataField: 'Country' }
        ]
    }
  }
  
  public render() {
    return (
      <JqxDataTable ref={this.myDataTable} 
        width={850} source={this.state.source} columns={this.state.columns} filterable={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the Filter Element's height.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDataTable, { IDataTableProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatatable';
 
class App extends React.PureComponent<{}, IDataTableProps> {
  private myDataTable = React.createRef<JqxDataTable>(); 
 
  constructor(props: {}) {
    super(props);
 
    const source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        dataFields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
    };
    
    this.state = {
        source: new jqx.dataAdapter(source),
        columns: [
          { text: 'Contact Name', dataField: 'ContactName' },
          { text: 'Contact Title', dataField: 'Title' },
          { text: 'City', dataField: 'City' },
          { text: 'Country', dataField: 'Country' }
        ]
    }
  }
  
  public render() {
    return (
      <JqxDataTable ref={this.myDataTable} 
        width={850} source={this.state.source} columns={this.state.columns} filterHeight={35}
        filterable={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Determines the Filter's mode. Possible values: "default", "simple" and "advanced"

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDataTable, { IDataTableProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatatable';
 
class App extends React.PureComponent<{}, IDataTableProps> {
  private myDataTable = React.createRef<JqxDataTable>(); 
 
  constructor(props: {}) {
    super(props);
 
    const source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        dataFields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
    };
    
    this.state = {
        source: new jqx.dataAdapter(source),
        columns: [
          { text: 'Contact Name', dataField: 'ContactName' },
          { text: 'Contact Title', dataField: 'Title' },
          { text: 'City', dataField: 'City' },
          { text: 'Country', dataField: 'Country' }
        ]
    }
  }
  
  public render() {
    return (
      <JqxDataTable ref={this.myDataTable} 
        width={850} source={this.state.source} columns={this.state.columns} filterable={true}
        filterMode={'advanced'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the jqxDataTable's data groups. Set this property if you want to display the data grouped by a set of column(s).

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDataTable, { IDataTableProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatatable';
 
class App extends React.PureComponent<{}, IDataTableProps> {
  private myDataTable = React.createRef<JqxDataTable>(); 
 
  constructor(props: {}) {
    super(props);
 
    const source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        dataFields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
    };
    
    this.state = {
        source: new jqx.dataAdapter(source),
        columns: [
          { text: 'Contact Name', dataField: 'ContactName' },
          { text: 'Contact Title', dataField: 'Title' },
          { text: 'City', dataField: 'City' },
          { text: 'Country', dataField: 'Country' }
        ]
    }
  }
  
  public render() {
    return (
      <JqxDataTable ref={this.myDataTable} 
        width={850} source={this.state.source} columns={this.state.columns} groups={['Country']}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Callback function which allows you to customize the rendering of the group headers.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDataTable, { IDataTableProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatatable';
 
class App extends React.PureComponent<{}, IDataTableProps> {
  private myDataTable = React.createRef<JqxDataTable>(); 
 
  constructor(props: {}) {
    super(props);
 
    const source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        dataFields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
    };
    
    this.state = {
        groupsRenderer: (value: string, rowdata: object, level: number): any => {
          return 'First Name: ' + value;
        },
        source: new jqx.dataAdapter(source),
        columns: [
          { text: 'Contact Name', dataField: 'ContactName' },
          { text: 'Contact Title', dataField: 'Title' },
          { text: 'City', dataField: 'City' },
          { text: 'Country', dataField: 'Country' }
        ]
    }
  }
  
  public render() {
    return (
      <JqxDataTable ref={this.myDataTable} 
        width={850} source={this.state.source} columns={this.state.columns} groupsRenderer={this.state.groupsRenderer}
        groups={['ContactName']}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the jqxDataTable's height.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDataTable, { IDataTableProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatatable';
 
class App extends React.PureComponent<{}, IDataTableProps> {
  private myDataTable = React.createRef<JqxDataTable>(); 
 
  constructor(props: {}) {
    super(props);
 
    const source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        dataFields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
    };
    
    this.state = {
        source: new jqx.dataAdapter(source),
        columns: [
          { text: 'Contact Name', dataField: 'ContactName' },
          { text: 'Contact Title', dataField: 'Title' },
          { text: 'City', dataField: 'City' },
          { text: 'Country', dataField: 'Country' }
        ]
    }
  }
  
  public render() {
    return (
      <JqxDataTable ref={this.myDataTable} 
        width={850} source={this.state.source} columns={this.state.columns} height={350}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Callback function which is used for initialization of the expanded row's details. The function is called just once when the row is expanded for first time.

• id/key - expanded row's id/key.
• dataRow - the expanded row as a set of Key/Value pairs.
• element - the row's details HTML element as a jQuery selector.
• rowInfo - object which enables you to modify the height of the row details by setting the rowInfo's detailsHeight

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDataTable, { IDataTableProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatatable';
 
class App extends React.PureComponent<{}, IDataTableProps> {
  private myDataTable = React.createRef<JqxDataTable>(); 
 
  constructor(props: {}) {
    super(props);
 
    const source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        dataFields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
    };
    
    this.state = {
        initRowDetails: (id: number, row: number, element: object, rowinfo: object): any => {
          const container = document.createElement('div');
        container.innerHTML = 'Some Details...'
        element[0].appendChild(container);
        },
        source: new jqx.dataAdapter(source),
        columns: [
          { text: 'Contact Name', dataField: 'ContactName' },
          { text: 'Contact Title', dataField: 'Title' },
          { text: 'City', dataField: 'City' },
          { text: 'Country', dataField: 'Country' }
        ]
    }
  }
  
  public render() {
    return (
      <JqxDataTable ref={this.myDataTable} 
        width={850} source={this.state.source} columns={this.state.columns} initRowDetails={this.state.initRowDetails}
        rowDetails={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Determines whether the incremental search is enabled. The feature allows you to quickly find and select data records by typing when the widget is on focus.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDataTable, { IDataTableProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatatable';
 
class App extends React.PureComponent<{}, IDataTableProps> {
  private myDataTable = React.createRef<JqxDataTable>(); 
 
  constructor(props: {}) {
    super(props);
 
    const source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        dataFields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
    };
    
    this.state = {
        source: new jqx.dataAdapter(source),
        columns: [
          { text: 'Contact Name', dataField: 'ContactName' },
          { text: 'Contact Title', dataField: 'Title' },
          { text: 'City', dataField: 'City' },
          { text: 'Country', dataField: 'Country' }
        ]
    }
  }
  
  public render() {
    return (
      <JqxDataTable ref={this.myDataTable} 
        width={850} source={this.state.source} columns={this.state.columns} incrementalSearch={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Applies a localization to the jqxDataTable's strings.

{           
        // separator of parts of a date (e.g. '/' in 11/05/1955)
	'/': "/",
	// separator of parts of a time (e.g. ':' in 05:44 PM)
	':': ":",
	// the first day of the week (0 = Sunday, 1 = Monday, etc)
	firstDay: 0,
	days: {
		// full day names
		names: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
		// abbreviated day names
		namesAbbr: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
		// shortest day names
		namesShort: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]
	},
	months: {
		// full month names (13 months for lunar calendards -- 13th month should be "" if not lunar)
		names: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December", ""],
		// abbreviated month names
		namesAbbr: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec", ""]
	},
	// AM and PM designators in one of these forms:
	// The usual view, and the upper and lower case versions
	//      [standard,lowercase,uppercase]
	// The culture does not use AM or PM (likely all standard date formats use 24 hour time)
	//      null
	AM: ["AM", "am", "AM"],
	PM: ["PM", "pm", "PM"],
	eras: [
	// eras in reverse chronological order.
	// name: the name of the era in this culture (e.g. A.D., C.E.)
	// start: when the era starts in ticks (gregorian, gmt), null if it is the earliest supported era.
	// offset: offset in years from gregorian calendar
	{ "name": "A.D.", "start": null, "offset": 0 }
	],
	twoDigitYearMax: 2029,
	patterns: {
		// short date pattern
		d: "M/d/yyyy",
		// long date pattern
		D: "dddd, MMMM dd, yyyy",
		// short time pattern
		t: "h:mm tt",
		// long time pattern
		T: "h:mm:ss tt",
		// long date, short time pattern
		f: "dddd, MMMM dd, yyyy h:mm tt",
		// long date, long time pattern
		F: "dddd, MMMM dd, yyyy h:mm:ss tt",
		// month/day pattern
		M: "MMMM dd",
		// month/year pattern
		Y: "yyyy MMMM",
		// S is a sortable format that does not vary by culture
		S: "yyyy\u0027-\u0027MM\u0027-\u0027dd\u0027T\u0027HH\u0027:\u0027mm\u0027:\u0027ss",
		// formatting of dates in MySQL DataBases
		ISO: "yyyy-MM-dd hh:mm:ss",
		ISO2: "yyyy-MM-dd HH:mm:ss",
		d1: "dd.MM.yyyy",
		d2: "dd-MM-yyyy",
		d3: "dd-MMMM-yyyy",
		d4: "dd-MM-yy",
		d5: "H:mm",
		d6: "HH:mm",
		d7: "HH:mm tt",
		d8: "dd/MMMM/yyyy",
		d9: "MMMM-dd",
		d10: "MM-dd",
		d11: "MM-dd-yyyy"
	},
	percentSymbol: "%",
	currencySymbol: "$",
	currencySymbolposition: "before",
	decimalSeparator: '.',
	thousandsSeparator: ',',
	pagerGoToPageString: "Go to page:",
	pagerShowRowsString: "Show rows:",
	pagerRangeString: " of ",
	pagerPreviousButtonString: "previous",
	pagerNextButtonString: "next",
	pagerFirstButtonsSring: "first",
	pagerLastButtonString:"last",
	filterApplyString: "Apply",
	filterCancelString: "Cancel",
	filterClearString: "Clear Filter",
	filterString: "advanced",
	filterSearchString: "Search:",
	filterStringComparisonOperators: ['empty', 'not empty', 'contains', 'contains(match case)',
	   'does not contain', 'does not contain(match case)', 'starts with', 'starts with(match case)',
	   'ends with', 'ends with(match case)', 'equal', 'equal(match case)', 'null', 'not null'],
	filterNumericComparisonOperators: ['equal', 'not equal', 'less than', 'less than or equal', 'greater than', 'greater than or equal', 'null', 'not null'],
	filterDateComparisonOperators: ['equal', 'not equal', 'less than', 'less than or equal', 'greater than', 'greater than or equal', 'null', 'not null'],
	filterbooleanComparisoOoperators: ['equal', 'not equal'],
	validationString: "Entered value is not valid",
	emptyDataString: "No data to display",
	filterSelectString: "Select Filter",
	loadText: "Loading...",
	clearString: "Clear",
	todayString: "Today",
	loadingErrorMessage: "The data is still loading and you cannot set a property or call a method. You can do that once the data binding is completed. jqxDataTable raises the 'bindingComplete' event when the binding is completed."           
};

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDataTable, { IDataTableProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatatable';
 
class App extends React.PureComponent<{}, IDataTableProps> {
  private myDataTable = React.createRef<JqxDataTable>(); 
 
  constructor(props: {}) {
    super(props);
 
    const source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        dataFields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
    };
    
    this.state = {
        localization: {
          pagerGoToPageString: 'Gehe zu:',
          pagerShowRowsString: 'Zeige Zeile:',
          pagerRangeString: ' von ',
          pagerNextButtonString: 'voriger',
          pagerFirstButtonString: 'first',
          pagerLastButtonString: 'last',
          pagerPreviousButtonString: 'nächster'
        },
        source: new jqx.dataAdapter(source),
        columns: [
          { text: 'Contact Name', dataField: 'ContactName' },
          { text: 'Contact Title', dataField: 'Title' },
          { text: 'City', dataField: 'City' },
          { text: 'Country', dataField: 'Country' }
        ]
    }
  }
  
  public render() {
    return (
      <JqxDataTable ref={this.myDataTable} 
        width={850} source={this.state.source} columns={this.state.columns} localization={this.state.localization}
        pageable={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the height of the jqxDataTable's Pager(s). Pager(s) is(are) displayed after setting pageable to true.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDataTable, { IDataTableProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatatable';
 
class App extends React.PureComponent<{}, IDataTableProps> {
  private myDataTable = React.createRef<JqxDataTable>(); 
 
  constructor(props: {}) {
    super(props);
 
    const source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        dataFields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
    };
    
    this.state = {
        source: new jqx.dataAdapter(source),
        columns: [
          { text: 'Contact Name', dataField: 'ContactName' },
          { text: 'Contact Title', dataField: 'Title' },
          { text: 'City', dataField: 'City' },
          { text: 'Country', dataField: 'Country' }
        ]
    }
  }
  
  public render() {
    return (
      <JqxDataTable ref={this.myDataTable} 
        width={850} source={this.state.source} columns={this.state.columns} pagerHeight={35}
        pageable={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the rows count per page when paging is enabled.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDataTable, { IDataTableProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatatable';
 
class App extends React.PureComponent<{}, IDataTableProps> {
  private myDataTable = React.createRef<JqxDataTable>(); 
 
  constructor(props: {}) {
    super(props);
 
    const source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        dataFields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
    };
    
    this.state = {
        source: new jqx.dataAdapter(source),
        columns: [
          { text: 'Contact Name', dataField: 'ContactName' },
          { text: 'Contact Title', dataField: 'Title' },
          { text: 'City', dataField: 'City' },
          { text: 'Country', dataField: 'Country' }
        ]
    }
  }
  
  public render() {
    return (
      <JqxDataTable ref={this.myDataTable} 
        width={850} source={this.state.source} columns={this.state.columns} pageSize={15}
        pageable={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the jqxDataTable's page size options when paging is enabled and the pagerMode property is set to "advanced".

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDataTable, { IDataTableProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatatable';
 
class App extends React.PureComponent<{}, IDataTableProps> {
  private myDataTable = React.createRef<JqxDataTable>(); 
 
  constructor(props: {}) {
    super(props);
 
    const source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        dataFields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
    };
    
    this.state = {
        source: new jqx.dataAdapter(source),
        columns: [
          { text: 'Contact Name', dataField: 'ContactName' },
          { text: 'Contact Title', dataField: 'Title' },
          { text: 'City', dataField: 'City' },
          { text: 'Country', dataField: 'Country' }
        ]
    }
  }
  
  public render() {
    return (
      <JqxDataTable ref={this.myDataTable} 
        width={850} source={this.state.source} columns={this.state.columns} pageSizeOptions={[15, 25, 35]}
        pageable={true} pagerMode={'advanced'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Determines whether the jqxDataTable is in paging mode.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDataTable, { IDataTableProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatatable';
 
class App extends React.PureComponent<{}, IDataTableProps> {
  private myDataTable = React.createRef<JqxDataTable>(); 
 
  constructor(props: {}) {
    super(props);
 
    const source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        dataFields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
    };
    
    this.state = {
        source: new jqx.dataAdapter(source),
        columns: [
          { text: 'Contact Name', dataField: 'ContactName' },
          { text: 'Contact Title', dataField: 'Title' },
          { text: 'City', dataField: 'City' },
          { text: 'Country', dataField: 'Country' }
        ]
    }
  }
  
  public render() {
    return (
      <JqxDataTable ref={this.myDataTable} 
        width={850} source={this.state.source} columns={this.state.columns} pageable={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the Pager's position. Possible values: 'top', 'bottom' and 'both'

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDataTable, { IDataTableProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatatable';
 
class App extends React.PureComponent<{}, IDataTableProps> {
  private myDataTable = React.createRef<JqxDataTable>(); 
 
  constructor(props: {}) {
    super(props);
 
    const source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        dataFields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
    };
    
    this.state = {
        source: new jqx.dataAdapter(source),
        columns: [
          { text: 'Contact Name', dataField: 'ContactName' },
          { text: 'Contact Title', dataField: 'Title' },
          { text: 'City', dataField: 'City' },
          { text: 'Country', dataField: 'Country' }
        ]
    }
  }
  
  public render() {
    return (
      <JqxDataTable ref={this.myDataTable} 
        width={850} source={this.state.source} columns={this.state.columns} pagerPosition={'top'}
        pageable={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the Pager's mode. Possible values: "default" and "advanced"

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDataTable, { IDataTableProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatatable';
 
class App extends React.PureComponent<{}, IDataTableProps> {
  private myDataTable = React.createRef<JqxDataTable>(); 
 
  constructor(props: {}) {
    super(props);
 
    const source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        dataFields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
    };
    
    this.state = {
        source: new jqx.dataAdapter(source),
        columns: [
          { text: 'Contact Name', dataField: 'ContactName' },
          { text: 'Contact Title', dataField: 'Title' },
          { text: 'City', dataField: 'City' },
          { text: 'Country', dataField: 'Country' }
        ]
    }
  }
  
  public render() {
    return (
      <JqxDataTable ref={this.myDataTable} 
        width={850} source={this.state.source} columns={this.state.columns} pagerMode={'advanced'}
        pageable={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the count of the buttons displayed on the Pager when pagerMode is set to "default".

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDataTable, { IDataTableProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatatable';
 
class App extends React.PureComponent<{}, IDataTableProps> {
  private myDataTable = React.createRef<JqxDataTable>(); 
 
  constructor(props: {}) {
    super(props);
 
    const source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        dataFields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
    };
    
    this.state = {
        source: new jqx.dataAdapter(source),
        columns: [
          { text: 'Contact Name', dataField: 'ContactName' },
          { text: 'Contact Title', dataField: 'Title' },
          { text: 'City', dataField: 'City' },
          { text: 'Country', dataField: 'Country' }
        ]
    }
  }
  
  public render() {
    return (
      <JqxDataTable ref={this.myDataTable} 
        width={850} source={this.state.source} columns={this.state.columns} pagerButtonsCount={10}
        pageable={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Enables custom rendering of the Pager.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDataTable, { IDataTableProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatatable';
 
class App extends React.PureComponent<{}, IDataTableProps> {
  private myDataTable = React.createRef<JqxDataTable>(); 
 
  constructor(props: {}) {
    super(props);
 
    const source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        dataFields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
    };
    
    this.state = {
        pagerRenderer: (): any => {
          // Do something here and return a HTML Element as a result.
        },
        source: new jqx.dataAdapter(source),
        columns: [
          { text: 'Contact Name', dataField: 'ContactName' },
          { text: 'Contact Title', dataField: 'Title' },
          { text: 'City', dataField: 'City' },
          { text: 'Country', dataField: 'Country' }
        ]
    }
  }
  
  public render() {
    return (
      <JqxDataTable ref={this.myDataTable} 
        width={850} source={this.state.source} columns={this.state.columns} pagerRenderer={this.state.pagerRenderer}
        pageable={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Callback function which is called when the jqxDataTable is rendered and data binding is completed..

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDataTable, { IDataTableProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatatable';
 
class App extends React.PureComponent<{}, IDataTableProps> {
  private myDataTable = React.createRef<JqxDataTable>(); 
 
  constructor(props: {}) {
    super(props);
 
    const source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        dataFields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
    };
    
    this.state = {
        ready: (): any => {
          alert('Ready!')
        },
        source: new jqx.dataAdapter(source),
        columns: [
          { text: 'Contact Name', dataField: 'ContactName' },
          { text: 'Contact Title', dataField: 'Title' },
          { text: 'City', dataField: 'City' },
          { text: 'Country', dataField: 'Country' }
        ]
    }
  }
  
  public render() {
    return (
      <JqxDataTable ref={this.myDataTable} 
        width={850} source={this.state.source} columns={this.state.columns} ready={this.state.ready}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets whether the jqxDataTable rows have details and can be expanded/collapsed. See the initRowDetails for initialization of the row details.

Enables custom rendering of the Toolbar.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDataTable, { IDataTableProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatatable';
 
class App extends React.PureComponent<{}, IDataTableProps> {
  private myDataTable = React.createRef<JqxDataTable>(); 
 
  constructor(props: {}) {
    super(props);
 
    const source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        dataFields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
    };
    
    this.state = {
        renderToolbar: (toolbar: object): any => {
          const container = document.createElement('div');
        container.innerHTML = 'Some custom HTML here...';
        toolbar.append(container);
        },
        source: new jqx.dataAdapter(source),
        columns: [
          { text: 'Contact Name', dataField: 'ContactName' },
          { text: 'Contact Title', dataField: 'Title' },
          { text: 'City', dataField: 'City' },
          { text: 'Country', dataField: 'Country' }
        ]
    }
  }
  
  public render() {
    return (
      <JqxDataTable ref={this.myDataTable} 
        width={850} source={this.state.source} columns={this.state.columns} renderToolbar={this.state.renderToolbar}
        showToolbar={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Enables custom rendering of the Statusbar.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDataTable, { IDataTableProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatatable';
 
class App extends React.PureComponent<{}, IDataTableProps> {
  private myDataTable = React.createRef<JqxDataTable>(); 
 
  constructor(props: {}) {
    super(props);
 
    const source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        dataFields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
    };
    
    this.state = {
        renderStatusBar: (statusbar: object): any => {
          const container = document.createElement('div');
        container.innerHTML = 'Some custom HTML here...';
        toolbar.append(container);
        },
        source: new jqx.dataAdapter(source),
        columns: [
          { text: 'Contact Name', dataField: 'ContactName' },
          { text: 'Contact Title', dataField: 'Title' },
          { text: 'City', dataField: 'City' },
          { text: 'Country', dataField: 'Country' }
        ]
    }
  }
  
  public render() {
    return (
      <JqxDataTable ref={this.myDataTable} 
        width={850} source={this.state.source} columns={this.state.columns} renderStatusBar={this.state.renderStatusBar}
        showStatusbar={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Callback function which is called before the rendering of the jqxDataTable's rows.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDataTable, { IDataTableProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatatable';
 
class App extends React.PureComponent<{}, IDataTableProps> {
  private myDataTable = React.createRef<JqxDataTable>(); 
 
  constructor(props: {}) {
    super(props);
 
    const source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        dataFields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
    };
    
    this.state = {
        rendering: (): any => {
          alert('Rendering!');
        },
        source: new jqx.dataAdapter(source),
        columns: [
          { text: 'Contact Name', dataField: 'ContactName' },
          { text: 'Contact Title', dataField: 'Title' },
          { text: 'City', dataField: 'City' },
          { text: 'Country', dataField: 'Country' }
        ]
    }
  }
  
  public render() {
    return (
      <JqxDataTable ref={this.myDataTable} 
        width={850} source={this.state.source} columns={this.state.columns} rendering={this.state.rendering}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Callback function which is called after the rendering of the jqxDataTable's row.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDataTable, { IDataTableProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatatable';
 
class App extends React.PureComponent<{}, IDataTableProps> {
  private myDataTable = React.createRef<JqxDataTable>(); 
 
  constructor(props: {}) {
    super(props);
 
    const source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        dataFields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
    };
    
    this.state = {
        rendered: (): any => {
          alert('Rendered!');
        },
        source: new jqx.dataAdapter(source),
        columns: [
          { text: 'Contact Name', dataField: 'ContactName' },
          { text: 'Contact Title', dataField: 'Title' },
          { text: 'City', dataField: 'City' },
          { text: 'Country', dataField: 'Country' }
        ]
    }
  }
  
  public render() {
    return (
      <JqxDataTable ref={this.myDataTable} 
        width={850} source={this.state.source} columns={this.state.columns} rendered={this.state.rendered}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDataTable, { IDataTableProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatatable';
 
class App extends React.PureComponent<{}, IDataTableProps> {
  private myDataTable = React.createRef<JqxDataTable>(); 
 
  constructor(props: {}) {
    super(props);
 
    const source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        dataFields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
    };
    
    this.state = {
        source: new jqx.dataAdapter(source),
        columns: [
          { text: 'Contact Name', dataField: 'ContactName' },
          { text: 'Contact Title', dataField: 'Title' },
          { text: 'City', dataField: 'City' },
          { text: 'Country', dataField: 'Country' }
        ]
    }
  }
  
  public render() {
    return (
      <JqxDataTable ref={this.myDataTable} 
        width={850} source={this.state.source} columns={this.state.columns} rtl={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Determines the jqxDataTable's data source. The source property is expected to point to an instance of jqxDataAdapter. For more information about jqxDataAdapter, visit: jquery-data-adapter.htm. To clear the data source, set the source property to null.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDataTable, { IDataTableProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatatable';
 
class App extends React.PureComponent<{}, IDataTableProps> {
  private myDataTable = React.createRef<JqxDataTable>(); 
 
  constructor(props: {}) {
    super(props);
 
    const source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        dataFields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
    };
    
    this.state = {
        source: new jqx.dataAdapter(source),
        columns: [
          { text: 'Contact Name', dataField: 'ContactName' },
          { text: 'Contact Title', dataField: 'Title' },
          { text: 'City', dataField: 'City' },
          { text: 'Country', dataField: 'Country' }
        ]
    }
  }
  
  public render() {
    return (
      <JqxDataTable ref={this.myDataTable} 
        width={850} source={this.state.source} columns={this.state.columns}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Enables/Disables the sorting feature.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDataTable, { IDataTableProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatatable';
 
class App extends React.PureComponent<{}, IDataTableProps> {
  private myDataTable = React.createRef<JqxDataTable>(); 
 
  constructor(props: {}) {
    super(props);
 
    const source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        dataFields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
    };
    
    this.state = {
        source: new jqx.dataAdapter(source),
        columns: [
          { text: 'Contact Name', dataField: 'ContactName' },
          { text: 'Contact Title', dataField: 'Title' },
          { text: 'City', dataField: 'City' },
          { text: 'Country', dataField: 'Country' }
        ]
    }
  }
  
  public render() {
    return (
      <JqxDataTable ref={this.myDataTable} 
        width={850} source={this.state.source} columns={this.state.columns} sortable={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Determines whether the jqxDataTable's Aggregates bar is visible.

Determines whether the jqxDataTable's Toolbar is visible.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDataTable, { IDataTableProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatatable';
 
class App extends React.PureComponent<{}, IDataTableProps> {
  private myDataTable = React.createRef<JqxDataTable>(); 
 
  constructor(props: {}) {
    super(props);
 
    const source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        dataFields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
    };
    
    this.state = {
        source: new jqx.dataAdapter(source),
        columns: [
          { text: 'Contact Name', dataField: 'ContactName' },
          { text: 'Contact Title', dataField: 'Title' },
          { text: 'City', dataField: 'City' },
          { text: 'Country', dataField: 'Country' }
        ]
    }
  }
  
  public render() {
    return (
      <JqxDataTable ref={this.myDataTable} 
        width={850} source={this.state.source} columns={this.state.columns} showToolbar={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Determines whether the jqxDataTable's Statusbar is visible.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDataTable, { IDataTableProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatatable';
 
class App extends React.PureComponent<{}, IDataTableProps> {
  private myDataTable = React.createRef<JqxDataTable>(); 
 
  constructor(props: {}) {
    super(props);
 
    const source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        dataFields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
    };
    
    this.state = {
        source: new jqx.dataAdapter(source),
        columns: [
          { text: 'Contact Name', dataField: 'ContactName' },
          { text: 'Contact Title', dataField: 'Title' },
          { text: 'City', dataField: 'City' },
          { text: 'Country', dataField: 'Country' }
        ]
    }
  }
  
  public render() {
    return (
      <JqxDataTable ref={this.myDataTable} 
        width={850} source={this.state.source} columns={this.state.columns} showStatusbar={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the height of the Statusbar. Statusbar is displayed after setting showStatusbar to true.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDataTable, { IDataTableProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatatable';
 
class App extends React.PureComponent<{}, IDataTableProps> {
  private myDataTable = React.createRef<JqxDataTable>(); 
 
  constructor(props: {}) {
    super(props);
 
    const source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        dataFields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
    };
    
    this.state = {
        source: new jqx.dataAdapter(source),
        columns: [
          { text: 'Contact Name', dataField: 'ContactName' },
          { text: 'Contact Title', dataField: 'Title' },
          { text: 'City', dataField: 'City' },
          { text: 'Country', dataField: 'Country' }
        ]
    }
  }
  
  public render() {
    return (
      <JqxDataTable ref={this.myDataTable} 
        width={850} source={this.state.source} columns={this.state.columns} statusBarHeight={40}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the size of the scrollbars.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDataTable, { IDataTableProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatatable';
 
class App extends React.PureComponent<{}, IDataTableProps> {
  private myDataTable = React.createRef<JqxDataTable>(); 
 
  constructor(props: {}) {
    super(props);
 
    const source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        dataFields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
    };
    
    this.state = {
        source: new jqx.dataAdapter(source),
        columns: [
          { text: 'Contact Name', dataField: 'ContactName' },
          { text: 'Contact Title', dataField: 'Title' },
          { text: 'City', dataField: 'City' },
          { text: 'Country', dataField: 'Country' }
        ]
    }
  }
  
  public render() {
    return (
      <JqxDataTable ref={this.myDataTable} 
        width={850} source={this.state.source} columns={this.state.columns} scrollBarSize={20}
        height={100}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the selection mode. Possible values: "multipleRows", "singleRow" and "custom". In the "custom" mode, rows could be selected/unselected only through the API.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDataTable, { IDataTableProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatatable';
 
class App extends React.PureComponent<{}, IDataTableProps> {
  private myDataTable = React.createRef<JqxDataTable>(); 
 
  constructor(props: {}) {
    super(props);
 
    const source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        dataFields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
    };
    
    this.state = {
        source: new jqx.dataAdapter(source),
        columns: [
          { text: 'Contact Name', dataField: 'ContactName' },
          { text: 'Contact Title', dataField: 'Title' },
          { text: 'City', dataField: 'City' },
          { text: 'Country', dataField: 'Country' }
        ]
    }
  }
  
  public render() {
    return (
      <JqxDataTable ref={this.myDataTable} 
        width={850} source={this.state.source} columns={this.state.columns} selectionMode={'singleRow'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets whether the Paging, Sorting and Filtering are handled by a Server and jqxDataTable sends Ajax requests to a Server and displays the returned data. When the current page, page size, sort order or sort column is changed, jqxDataTable will automatically perform a new data binding with the updated parameters. For server synchronization after adding, removing, updating rows, see the source property documentation.

• sortdataField - the sort column's dataField.
• sortorder - the sort order - 'asc', 'desc' or ''.
• pagenum - the current page's number when the paging feature is enabled.
• pagesize - the page's size which represents the number of rows displayed in the view.
• filterscount - the number of filters applied to the jqxDataTable.
• filtervalue - the filter's value. The filtervalue name for the first filter is "filtervalue0", for the second filter is "filtervalue1" and so on.
• filtercondition - the filter's condition. The condition can be any of these: "CONTAINS", "DOES_NOT_CONTAIN", "EQUAL", "EQUAL_CASE_SENSITIVE", NOT_EQUAL","GREATER_THAN", "GREATER_THAN_OR_EQUAL", "LESS_THAN", "LESS_THAN_OR_EQUAL", "STARTS_WITH", "STARTS_WITH_CASE_SENSITIVE", "ENDS_WITH", "ENDS_WITH_CASE_SENSITIVE", "NULL", "NOT_NULL", "EMPTY", "NOT_EMPTY".
• filterdataField - the filter column's dataField.
• filteroperator - the filter's operator - 0 for "AND" and 1 for "OR".

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDataTable, { IDataTableProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatatable';
 
class App extends React.PureComponent<{}, IDataTableProps> {
  private myDataTable = React.createRef<JqxDataTable>(); 
 
  constructor(props: {}) {
    super(props);
 
    const source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        dataFields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
    };
    
    this.state = {
        source: new jqx.dataAdapter(source),
        columns: [
          { text: 'Contact Name', dataField: 'ContactName' },
          { text: 'Contact Title', dataField: 'Title' },
          { text: 'City', dataField: 'City' },
          { text: 'Country', dataField: 'Country' }
        ]
    }
  }
  
  public render() {
    return (
      <JqxDataTable ref={this.myDataTable} 
        width={850} source={this.state.source} columns={this.state.columns} serverProcessing={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the jqxDataTable's columns visibility.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDataTable, { IDataTableProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatatable';
 
class App extends React.PureComponent<{}, IDataTableProps> {
  private myDataTable = React.createRef<JqxDataTable>(); 
 
  constructor(props: {}) {
    super(props);
 
    const source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        dataFields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
    };
    
    this.state = {
        source: new jqx.dataAdapter(source),
        columns: [
          { text: 'Contact Name', dataField: 'ContactName' },
          { text: 'Contact Title', dataField: 'Title' },
          { text: 'City', dataField: 'City' },
          { text: 'Country', dataField: 'Country' }
        ]
    }
  }
  
  public render() {
    return (
      <JqxDataTable ref={this.myDataTable} 
        width={850} source={this.state.source} columns={this.state.columns} showHeader={false}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDataTable, { IDataTableProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatatable';
 
class App extends React.PureComponent<{}, IDataTableProps> {
  private myDataTable = React.createRef<JqxDataTable>(); 
 
  constructor(props: {}) {
    super(props);
 
    const source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        dataFields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
    };
    
    this.state = {
        source: new jqx.dataAdapter(source),
        columns: [
          { text: 'Contact Name', dataField: 'ContactName' },
          { text: 'Contact Title', dataField: 'Title' },
          { text: 'City', dataField: 'City' },
          { text: 'Country', dataField: 'Country' }
        ]
    }
  }
  
  public render() {
    return (
      <JqxDataTable ref={this.myDataTable} 
        width={850} source={this.state.source} columns={this.state.columns} theme={'material'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the height of the Toolbar. Toolbar is displayed after setting showToolbar to true.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDataTable, { IDataTableProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatatable';
 
class App extends React.PureComponent<{}, IDataTableProps> {
  private myDataTable = React.createRef<JqxDataTable>(); 
 
  constructor(props: {}) {
    super(props);
 
    const source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        dataFields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
    };
    
    this.state = {
        source: new jqx.dataAdapter(source),
        columns: [
          { text: 'Contact Name', dataField: 'ContactName' },
          { text: 'Contact Title', dataField: 'Title' },
          { text: 'City', dataField: 'City' },
          { text: 'Country', dataField: 'Country' }
        ]
    }
  }
  
  public render() {
    return (
      <JqxDataTable ref={this.myDataTable} 
        width={850} source={this.state.source} columns={this.state.columns} toolbarHeight={40}
        showToolbar={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the jqxDataTable's width.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDataTable, { IDataTableProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatatable';
 
class App extends React.PureComponent<{}, IDataTableProps> {
  private myDataTable = React.createRef<JqxDataTable>(); 
 
  constructor(props: {}) {
    super(props);
 
    const source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        dataFields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
    };
    
    this.state = {
        source: new jqx.dataAdapter(source),
        columns: [
          { text: 'Contact Name', dataField: 'ContactName' },
          { text: 'Contact Title', dataField: 'Title' },
          { text: 'City', dataField: 'City' },
          { text: 'Country', dataField: 'Country' }
        ]
    }
  }
  
  public render() {
    return (
      <JqxDataTable ref={this.myDataTable} 
        width={850} source={this.state.source} columns={this.state.columns}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

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.

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.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDataTable, { IDataTableProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatatable';
 
class App extends React.PureComponent<{}, IDataTableProps> {
  private myDataTable = React.createRef<JqxDataTable>(); 
 
  constructor(props: {}) {
    super(props);
 
    const source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        dataFields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
    };
    
    this.state = {
        source: new jqx.dataAdapter(source),
        columns: [
          { text: 'Contact Name', dataField: 'ContactName' },
          { text: 'Contact Title', dataField: 'Title' },
          { text: 'City', dataField: 'City' },
          { text: 'Country', dataField: 'Country' }
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myDataTable.current!.setOptions({ editable: true, editSettings: {
                saveOnPageChange: true,
                saveOnBlur: true,
                saveOnSelectionChange: true,
                cancelOnEsc: true,
                saveOnEnter: true,
                editOnDoubleClick: true,
                editOnF2: true,
                editSingleCell: true
            } });
  }
   
  public render() {
    return (
      <JqxDataTable ref={this.myDataTable} onCellBeginEdit={this.onCellBeginEdit} 
        width={850} source={this.state.source} columns={this.state.columns}
      />
    );
  }
 
  private onCellBeginEdit(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

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.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDataTable, { IDataTableProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatatable';
 
class App extends React.PureComponent<{}, IDataTableProps> {
  private myDataTable = React.createRef<JqxDataTable>(); 
 
  constructor(props: {}) {
    super(props);
 
    const source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        dataFields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
    };
    
    this.state = {
        source: new jqx.dataAdapter(source),
        columns: [
          { text: 'Contact Name', dataField: 'ContactName' },
          { text: 'Contact Title', dataField: 'Title' },
          { text: 'City', dataField: 'City' },
          { text: 'Country', dataField: 'Country' }
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myDataTable.current!.setOptions({ editable: true, editSettings: {
                saveOnPageChange: true,
                saveOnBlur: true,
                saveOnSelectionChange: true,
                cancelOnEsc: true,
                saveOnEnter: true,
                editOnDoubleClick: true,
                editOnF2: true,
                editSingleCell: true
            } });
  }
   
  public render() {
    return (
      <JqxDataTable ref={this.myDataTable} onCellEndEdit={this.onCellEndEdit} 
        width={850} source={this.state.source} columns={this.state.columns}
      />
    );
  }
 
  private onCellEndEdit(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This event is triggered when a cell value is changed.

Code examples

Bind to the cellValueChanged event of jqxDataTable.

This event is triggered when a column is resized.

Code examples

Bind to the columnResized event of jqxDataTable.

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

Code examples

Bind to the columnReordered event of jqxDataTable.

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

Code examples

Bind to the sort event of jqxDataTable.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDataTable, { IDataTableProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatatable';
 
class App extends React.PureComponent<{}, IDataTableProps> {
  private myDataTable = React.createRef<JqxDataTable>(); 
 
  constructor(props: {}) {
    super(props);
 
    const source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        dataFields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
    };
    
    this.state = {
        source: new jqx.dataAdapter(source),
        columns: [
          { text: 'Contact Name', dataField: 'ContactName' },
          { text: 'Contact Title', dataField: 'Title' },
          { text: 'City', dataField: 'City' },
          { text: 'Country', dataField: 'Country' }
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myDataTable.current!.setOptions({ sortable: true });
  }
   
  public render() {
    return (
      <JqxDataTable ref={this.myDataTable} onSort={this.onSort} 
        width={850} source={this.state.source} columns={this.state.columns}
      />
    );
  }
 
  private onSort(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

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

Code examples

Bind to the filter event of jqxDataTable.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDataTable, { IDataTableProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatatable';
 
class App extends React.PureComponent<{}, IDataTableProps> {
  private myDataTable = React.createRef<JqxDataTable>(); 
 
  constructor(props: {}) {
    super(props);
 
    const source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        dataFields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
    };
    
    this.state = {
        source: new jqx.dataAdapter(source),
        columns: [
          { text: 'Contact Name', dataField: 'ContactName' },
          { text: 'Contact Title', dataField: 'Title' },
          { text: 'City', dataField: 'City' },
          { text: 'Country', dataField: 'Country' }
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myDataTable.current!.setOptions({ filterable: true });
  }
   
  public render() {
    return (
      <JqxDataTable ref={this.myDataTable} onFilter={this.onFilter} 
        width={850} source={this.state.source} columns={this.state.columns}
      />
    );
  }
 
  private onFilter(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

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

Code examples

Bind to the pageChanged event of jqxDataTable.

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

Code examples

Bind to the pageSizeChanged event of jqxDataTable.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDataTable, { IDataTableProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatatable';
 
class App extends React.PureComponent<{}, IDataTableProps> {
  private myDataTable = React.createRef<JqxDataTable>(); 
 
  constructor(props: {}) {
    super(props);
 
    const source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        dataFields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
    };
    
    this.state = {
        source: new jqx.dataAdapter(source),
        columns: [
          { text: 'Contact Name', dataField: 'ContactName' },
          { text: 'Contact Title', dataField: 'Title' },
          { text: 'City', dataField: 'City' },
          { text: 'Country', dataField: 'Country' }
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myDataTable.current!.setOptions({ pageable: true, pagerMode: 'advanced', pageSizeOptions: [2, 4, 8] });
  }
   
  public render() {
    return (
      <JqxDataTable ref={this.myDataTable} onPageSizeChanged={this.onPageSizeChanged} 
        width={850} source={this.state.source} columns={this.state.columns}
      />
    );
  }
 
  private onPageSizeChanged(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This is triggered when a row is clicked.

Code examples

Bind to the rowClick event of jqxDataTable.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDataTable, { IDataTableProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatatable';
 
class App extends React.PureComponent<{}, IDataTableProps> {
  private myDataTable = React.createRef<JqxDataTable>(); 
 
  constructor(props: {}) {
    super(props);
 
    const source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        dataFields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
    };
    
    this.state = {
        source: new jqx.dataAdapter(source),
        columns: [
          { text: 'Contact Name', dataField: 'ContactName' },
          { text: 'Contact Title', dataField: 'Title' },
          { text: 'City', dataField: 'City' },
          { text: 'Country', dataField: 'Country' }
        ]
    }
  }
  
  public render() {
    return (
      <JqxDataTable ref={this.myDataTable} onRowClick={this.onRowClick} 
        width={850} source={this.state.source} columns={this.state.columns}
      />
    );
  }
 
  private onRowClick(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This is triggered when a row is double-clicked.

Code examples

Bind to the rowDoubleClick event of jqxDataTable.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDataTable, { IDataTableProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatatable';
 
class App extends React.PureComponent<{}, IDataTableProps> {
  private myDataTable = React.createRef<JqxDataTable>(); 
 
  constructor(props: {}) {
    super(props);
 
    const source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        dataFields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
    };
    
    this.state = {
        source: new jqx.dataAdapter(source),
        columns: [
          { text: 'Contact Name', dataField: 'ContactName' },
          { text: 'Contact Title', dataField: 'Title' },
          { text: 'City', dataField: 'City' },
          { text: 'Country', dataField: 'Country' }
        ]
    }
  }
  
  public render() {
    return (
      <JqxDataTable ref={this.myDataTable} onRowDoubleClick={this.onRowDoubleClick} 
        width={850} source={this.state.source} columns={this.state.columns}
      />
    );
  }
 
  private onRowDoubleClick(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This is triggered when a row is selected.

Code examples

Bind to the rowSelect event of jqxDataTable.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDataTable, { IDataTableProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatatable';
 
class App extends React.PureComponent<{}, IDataTableProps> {
  private myDataTable = React.createRef<JqxDataTable>(); 
 
  constructor(props: {}) {
    super(props);
 
    const source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        dataFields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
    };
    
    this.state = {
        source: new jqx.dataAdapter(source),
        columns: [
          { text: 'Contact Name', dataField: 'ContactName' },
          { text: 'Contact Title', dataField: 'Title' },
          { text: 'City', dataField: 'City' },
          { text: 'Country', dataField: 'Country' }
        ]
    }
  }
  
  public render() {
    return (
      <JqxDataTable ref={this.myDataTable} onRowSelect={this.onRowSelect} 
        width={850} source={this.state.source} columns={this.state.columns}
      />
    );
  }
 
  private onRowSelect(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This is triggered when a row is unselected.

Code examples

Bind to the rowUnselect event of jqxDataTable.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDataTable, { IDataTableProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatatable';
 
class App extends React.PureComponent<{}, IDataTableProps> {
  private myDataTable = React.createRef<JqxDataTable>(); 
 
  constructor(props: {}) {
    super(props);
 
    const source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        dataFields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
    };
    
    this.state = {
        source: new jqx.dataAdapter(source),
        columns: [
          { text: 'Contact Name', dataField: 'ContactName' },
          { text: 'Contact Title', dataField: 'Title' },
          { text: 'City', dataField: 'City' },
          { text: 'Country', dataField: 'Country' }
        ]
    }
  }
  
  public render() {
    return (
      <JqxDataTable ref={this.myDataTable} onRowUnselect={this.onRowUnselect} 
        width={850} source={this.state.source} columns={this.state.columns}
      />
    );
  }
 
  private onRowUnselect(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This is triggered when a row edit begins.

Code examples

Bind to the rowBeginEdit event of jqxDataTable.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDataTable, { IDataTableProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatatable';
 
class App extends React.PureComponent<{}, IDataTableProps> {
  private myDataTable = React.createRef<JqxDataTable>(); 
 
  constructor(props: {}) {
    super(props);
 
    const source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        dataFields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
    };
    
    this.state = {
        source: new jqx.dataAdapter(source),
        columns: [
          { text: 'Contact Name', dataField: 'ContactName' },
          { text: 'Contact Title', dataField: 'Title' },
          { text: 'City', dataField: 'City' },
          { text: 'Country', dataField: 'Country' }
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myDataTable.current!.setOptions({ editable: true });
  }
   
  public render() {
    return (
      <JqxDataTable ref={this.myDataTable} onRowBeginEdit={this.onRowBeginEdit} 
        width={850} source={this.state.source} columns={this.state.columns}
      />
    );
  }
 
  private onRowBeginEdit(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This is triggered when a row edit ends.

Code examples

Bind to the rowEndEdit event of jqxDataTable.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDataTable, { IDataTableProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatatable';
 
class App extends React.PureComponent<{}, IDataTableProps> {
  private myDataTable = React.createRef<JqxDataTable>(); 
 
  constructor(props: {}) {
    super(props);
 
    const source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        dataFields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
    };
    
    this.state = {
        source: new jqx.dataAdapter(source),
        columns: [
          { text: 'Contact Name', dataField: 'ContactName' },
          { text: 'Contact Title', dataField: 'Title' },
          { text: 'City', dataField: 'City' },
          { text: 'Country', dataField: 'Country' }
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myDataTable.current!.setOptions({ editable: true });
  }
   
  public render() {
    return (
      <JqxDataTable ref={this.myDataTable} onRowEndEdit={this.onRowEndEdit} 
        width={850} source={this.state.source} columns={this.state.columns}
      />
    );
  }
 
  private onRowEndEdit(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This is triggered when a row is expanded.

Code examples

Bind to the rowExpand event of jqxDataTable.

This is triggered when a row is collapsed.

Code examples

Bind to the rowCollapse event of jqxDataTable.

Adds a new row. For synchronization with a server, please look also the jqxDataAdapter plug-in's help documentation.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDataTable, { IDataTableProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatatable';
 
class App extends React.PureComponent<{}, IDataTableProps> {
  private myDataTable = React.createRef<JqxDataTable>(); 
 
  constructor(props: {}) {
    super(props);
 
    const source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        dataFields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
    };
    
    this.state = {
        source: new jqx.dataAdapter(source),
        columns: [
          { text: 'Contact Name', dataField: 'ContactName' },
          { text: 'Contact Title', dataField: 'Title' },
          { text: 'City', dataField: 'City' },
          { text: 'Country', dataField: 'Country' }
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myDataTable.current!.addRow(null,{ 'ContactName': 'Added Name', 'Title': 'Added Title', 'City': 'Added City', 'Country': 'Added Country' },'first');
  }
   
  public render() {
    return (
      <JqxDataTable ref={this.myDataTable} 
        width={850} source={this.state.source} columns={this.state.columns}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Adds a new filter.

Applies the added/removed filters.

Begins an update and stops all refreshes.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDataTable, { IDataTableProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatatable';
 
class App extends React.PureComponent<{}, IDataTableProps> {
  private myDataTable = React.createRef<JqxDataTable>(); 
 
  constructor(props: {}) {
    super(props);
 
    const source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        dataFields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
    };
    
    this.state = {
        source: new jqx.dataAdapter(source),
        columns: [
          { text: 'Contact Name', dataField: 'ContactName' },
          { text: 'Contact Title', dataField: 'Title' },
          { text: 'City', dataField: 'City' },
          { text: 'Country', dataField: 'Country' }
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myDataTable.current!.beginUpdate();
  }
   
  public render() {
    return (
      <JqxDataTable ref={this.myDataTable} 
        width={850} source={this.state.source} columns={this.state.columns}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Begins a row edit operation when editable is set to true.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDataTable, { IDataTableProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatatable';
 
class App extends React.PureComponent<{}, IDataTableProps> {
  private myDataTable = React.createRef<JqxDataTable>(); 
 
  constructor(props: {}) {
    super(props);
 
    const source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        dataFields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
    };
    
    this.state = {
        source: new jqx.dataAdapter(source),
        columns: [
          { text: 'Contact Name', dataField: 'ContactName' },
          { text: 'Contact Title', dataField: 'Title' },
          { text: 'City', dataField: 'City' },
          { text: 'Country', dataField: 'Country' }
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myDataTable.current!.beginRowEdit(0);
  }
   
  public render() {
    return (
      <JqxDataTable ref={this.myDataTable} 
        width={850} source={this.state.source} columns={this.state.columns}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Begins a cell edit operation when editable is set to true.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDataTable, { IDataTableProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatatable';
 
class App extends React.PureComponent<{}, IDataTableProps> {
  private myDataTable = React.createRef<JqxDataTable>(); 
 
  constructor(props: {}) {
    super(props);
 
    const source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        dataFields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
    };
    
    this.state = {
        source: new jqx.dataAdapter(source),
        columns: [
          { text: 'Contact Name', dataField: 'ContactName' },
          { text: 'Contact Title', dataField: 'Title' },
          { text: 'City', dataField: 'City' },
          { text: 'Country', dataField: 'Country' }
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myDataTable.current!.beginCellEdit(0,'ContactName');
  }
   
  public render() {
    return (
      <JqxDataTable ref={this.myDataTable} 
        width={850} source={this.state.source} columns={this.state.columns}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Clears the selection.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDataTable, { IDataTableProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatatable';
 
class App extends React.PureComponent<{}, IDataTableProps> {
  private myDataTable = React.createRef<JqxDataTable>(); 
 
  constructor(props: {}) {
    super(props);
 
    const source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        dataFields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
    };
    
    this.state = {
        source: new jqx.dataAdapter(source),
        columns: [
          { text: 'Contact Name', dataField: 'ContactName' },
          { text: 'Contact Title', dataField: 'Title' },
          { text: 'City', dataField: 'City' },
          { text: 'Country', dataField: 'Country' }
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myDataTable.current!.clearSelection();
  }
   
  public render() {
    return (
      <JqxDataTable ref={this.myDataTable} 
        width={850} source={this.state.source} columns={this.state.columns}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Clears the filters.

Clears the jqxDataTable.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDataTable, { IDataTableProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatatable';
 
class App extends React.PureComponent<{}, IDataTableProps> {
  private myDataTable = React.createRef<JqxDataTable>(); 
 
  constructor(props: {}) {
    super(props);
 
    const source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        dataFields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
    };
    
    this.state = {
        source: new jqx.dataAdapter(source),
        columns: [
          { text: 'Contact Name', dataField: 'ContactName' },
          { text: 'Contact Title', dataField: 'Title' },
          { text: 'City', dataField: 'City' },
          { text: 'Country', dataField: 'Country' }
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myDataTable.current!.clear();
  }
   
  public render() {
    return (
      <JqxDataTable ref={this.myDataTable} 
        width={850} source={this.state.source} columns={this.state.columns}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Destroys jqxDataTable and removes it from the DOM.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDataTable, { IDataTableProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatatable';
 
class App extends React.PureComponent<{}, IDataTableProps> {
  private myDataTable = React.createRef<JqxDataTable>(); 
 
  constructor(props: {}) {
    super(props);
 
    const source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        dataFields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
    };
    
    this.state = {
        source: new jqx.dataAdapter(source),
        columns: [
          { text: 'Contact Name', dataField: 'ContactName' },
          { text: 'Contact Title', dataField: 'Title' },
          { text: 'City', dataField: 'City' },
          { text: 'Country', dataField: 'Country' }
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myDataTable.current!.destroy();
  }
   
  public render() {
    return (
      <JqxDataTable ref={this.myDataTable} 
        width={850} source={this.state.source} columns={this.state.columns}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Deletes a row. For synchronization with a server, please look also the jqxDataAdapter plug-in's help documentation.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDataTable, { IDataTableProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatatable';
 
class App extends React.PureComponent<{}, IDataTableProps> {
  private myDataTable = React.createRef<JqxDataTable>(); 
 
  constructor(props: {}) {
    super(props);
 
    const source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        dataFields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
    };
    
    this.state = {
        source: new jqx.dataAdapter(source),
        columns: [
          { text: 'Contact Name', dataField: 'ContactName' },
          { text: 'Contact Title', dataField: 'Title' },
          { text: 'City', dataField: 'City' },
          { text: 'Country', dataField: 'Country' }
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myDataTable.current!.deleteRow(0);
  }
   
  public render() {
    return (
      <JqxDataTable ref={this.myDataTable} 
        width={850} source={this.state.source} columns={this.state.columns}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Ends the update and resumes all refreshes.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDataTable, { IDataTableProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatatable';
 
class App extends React.PureComponent<{}, IDataTableProps> {
  private myDataTable = React.createRef<JqxDataTable>(); 
 
  constructor(props: {}) {
    super(props);
 
    const source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        dataFields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
    };
    
    this.state = {
        source: new jqx.dataAdapter(source),
        columns: [
          { text: 'Contact Name', dataField: 'ContactName' },
          { text: 'Contact Title', dataField: 'Title' },
          { text: 'City', dataField: 'City' },
          { text: 'Country', dataField: 'Country' }
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myDataTable.current!.endUpdate();
  }
   
  public render() {
    return (
      <JqxDataTable ref={this.myDataTable} 
        width={850} source={this.state.source} columns={this.state.columns}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Moves the vertical scrollbar to a row index.

Ends a row edit when editable is set to true.
Invoke the endRowEdit method:
".endRowEdit(0)"

Invoke the endRowEdit method and cancel changes:
".endRowEdit(0, true)"

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDataTable, { IDataTableProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatatable';
 
class App extends React.PureComponent<{}, IDataTableProps> {
  private myDataTable = React.createRef<JqxDataTable>(); 
 
  constructor(props: {}) {
    super(props);
 
    const source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        dataFields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
    };
    
    this.state = {
        source: new jqx.dataAdapter(source),
        columns: [
          { text: 'Contact Name', dataField: 'ContactName' },
          { text: 'Contact Title', dataField: 'Title' },
          { text: 'City', dataField: 'City' },
          { text: 'Country', dataField: 'Country' }
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myDataTable.current!.endRowEdit(0,true);
  }
   
  public render() {
    return (
      <JqxDataTable ref={this.myDataTable} 
        width={850} source={this.state.source} columns={this.state.columns}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Ends a cell edit operation when editable is set to true.

Exports jqxDataTable's data to Excel, HTML, XML, JSON, CSV or TSV. See also the exportSettings property

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDataTable, { IDataTableProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatatable';
 
class App extends React.PureComponent<{}, IDataTableProps> {
  private myDataTable = React.createRef<JqxDataTable>(); 
 
  constructor(props: {}) {
    super(props);
 
    const source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        dataFields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
    };
    
    this.state = {
        source: new jqx.dataAdapter(source),
        columns: [
          { text: 'Contact Name', dataField: 'ContactName' },
          { text: 'Contact Title', dataField: 'Title' },
          { text: 'City', dataField: 'City' },
          { text: 'Country', dataField: 'Country' }
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myDataTable.current!.exportData('xls');
  }
   
  public render() {
    return (
      <JqxDataTable ref={this.myDataTable} 
        width={850} source={this.state.source} columns={this.state.columns}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Focus jqxDataTable.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDataTable, { IDataTableProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatatable';
 
class App extends React.PureComponent<{}, IDataTableProps> {
  private myDataTable = React.createRef<JqxDataTable>(); 
 
  constructor(props: {}) {
    super(props);
 
    const source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        dataFields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
    };
    
    this.state = {
        source: new jqx.dataAdapter(source),
        columns: [
          { text: 'Contact Name', dataField: 'ContactName' },
          { text: 'Contact Title', dataField: 'Title' },
          { text: 'City', dataField: 'City' },
          { text: 'Country', dataField: 'Country' }
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myDataTable.current!.focus();
  }
   
  public render() {
    return (
      <JqxDataTable ref={this.myDataTable} 
        width={850} source={this.state.source} columns={this.state.columns}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Gets a property value of a column.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDataTable, { IDataTableProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatatable';
 
class App extends React.PureComponent<{}, IDataTableProps> {
  private myDataTable = React.createRef<JqxDataTable>(); 
 
  constructor(props: {}) {
    super(props);
 
    const source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        dataFields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
    };
    
    this.state = {
        source: new jqx.dataAdapter(source),
        columns: [
          { text: 'Contact Name', dataField: 'ContactName' },
          { text: 'Contact Title', dataField: 'Title' },
          { text: 'City', dataField: 'City' },
          { text: 'Country', dataField: 'Country' }
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myDataTable.current!.getColumnProperty('ContactName','width');
  }
   
  public render() {
    return (
      <JqxDataTable ref={this.myDataTable} 
        width={850} source={this.state.source} columns={this.state.columns}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Navigates to a page when pageable is set to true.

Navigates to a previous page when pageable is set to true.

Navigates to a next page when pageable is set to true.

Returns an array of selected rows.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDataTable, { IDataTableProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatatable';
 
class App extends React.PureComponent<{}, IDataTableProps> {
  private myDataTable = React.createRef<JqxDataTable>(); 
 
  constructor(props: {}) {
    super(props);
 
    const source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        dataFields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
    };
    
    this.state = {
        source: new jqx.dataAdapter(source),
        columns: [
          { text: 'Contact Name', dataField: 'ContactName' },
          { text: 'Contact Title', dataField: 'Title' },
          { text: 'City', dataField: 'City' },
          { text: 'Country', dataField: 'Country' }
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myDataTable.current!.getSelection();
  }
   
  public render() {
    return (
      <JqxDataTable ref={this.myDataTable} 
        width={850} source={this.state.source} columns={this.state.columns}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Returns an array of all rows loaded in the widget.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDataTable, { IDataTableProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatatable';
 
class App extends React.PureComponent<{}, IDataTableProps> {
  private myDataTable = React.createRef<JqxDataTable>(); 
 
  constructor(props: {}) {
    super(props);
 
    const source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        dataFields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
    };
    
    this.state = {
        source: new jqx.dataAdapter(source),
        columns: [
          { text: 'Contact Name', dataField: 'ContactName' },
          { text: 'Contact Title', dataField: 'Title' },
          { text: 'City', dataField: 'City' },
          { text: 'Country', dataField: 'Country' }
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myDataTable.current!.getRows();
  }
   
  public render() {
    return (
      <JqxDataTable ref={this.myDataTable} 
        width={850} source={this.state.source} columns={this.state.columns}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Returns an array of all rows displayed in the view. This method takes into account the Sorting Order and returns the Filtered Set of Rows, if Filtering is applied. The method is different from getRows, because getRows returns a Rows array in their data binding order and that array is not affected by filtering and sorting.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDataTable, { IDataTableProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatatable';
 
class App extends React.PureComponent<{}, IDataTableProps> {
  private myDataTable = React.createRef<JqxDataTable>(); 
 
  constructor(props: {}) {
    super(props);
 
    const source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        dataFields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
    };
    
    this.state = {
        source: new jqx.dataAdapter(source),
        columns: [
          { text: 'Contact Name', dataField: 'ContactName' },
          { text: 'Contact Title', dataField: 'Title' },
          { text: 'City', dataField: 'City' },
          { text: 'Country', dataField: 'Country' }
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myDataTable.current!.getView();
  }
   
  public render() {
    return (
      <JqxDataTable ref={this.myDataTable} 
        width={850} source={this.state.source} columns={this.state.columns}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Returns a value of a cell.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDataTable, { IDataTableProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatatable';
 
class App extends React.PureComponent<{}, IDataTableProps> {
  private myDataTable = React.createRef<JqxDataTable>(); 
 
  constructor(props: {}) {
    super(props);
 
    const source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        dataFields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
    };
    
    this.state = {
        source: new jqx.dataAdapter(source),
        columns: [
          { text: 'Contact Name', dataField: 'ContactName' },
          { text: 'Contact Title', dataField: 'Title' },
          { text: 'City', dataField: 'City' },
          { text: 'Country', dataField: 'Country' }
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myDataTable.current!.getCellValue(1,'ContactName');
  }
   
  public render() {
    return (
      <JqxDataTable ref={this.myDataTable} 
        width={850} source={this.state.source} columns={this.state.columns}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Hides a column.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDataTable, { IDataTableProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatatable';
 
class App extends React.PureComponent<{}, IDataTableProps> {
  private myDataTable = React.createRef<JqxDataTable>(); 
 
  constructor(props: {}) {
    super(props);
 
    const source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        dataFields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
    };
    
    this.state = {
        source: new jqx.dataAdapter(source),
        columns: [
          { text: 'Contact Name', dataField: 'ContactName' },
          { text: 'Contact Title', dataField: 'Title' },
          { text: 'City', dataField: 'City' },
          { text: 'Country', dataField: 'Country' }
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myDataTable.current!.hideColumn('ContactName');
  }
   
  public render() {
    return (
      <JqxDataTable ref={this.myDataTable} 
        width={850} source={this.state.source} columns={this.state.columns}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);