Enables or disables the alternating rows.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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 (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
        altrows={true}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This property specifies the first alternating row.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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 (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
        altrows={true} altstart={2}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the alternating step

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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 (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
        altrows={true} altstart={0} altstep={2}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Determines whether the loading image should be displayed until the Grid's data is loaded.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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 (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
        autoshowloadelement={false}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Displays the filter icon only when the column is filtered. When the value of this property is set to false, all grid columns will display a filter icon when the filtering is enabled.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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 (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
        filterable={true} autoshowfiltericon={false}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets whether the columns menu button will be displayed only when the mouse cursor is over a columns header or will be always displayed.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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 (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
        filterable={true} autoshowcolumnsmenubutton={false}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets whether the columns lines are displayed.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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 (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
        showcolumnlines={false}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets whether the row lines are displayed.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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 (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
        showrowlines={false}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets whether the column header lines are displayed.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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 (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
        showcolumnheaderlines={false}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets whether adaptive mode is enabled.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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 (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
        adaptive={true}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the Grid's breakpoint width when adaptive mode is actived.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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 (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
        adaptive={true} adaptivewidth={400}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Enables or disables the clipboard operations

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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 (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
        clipboard={false}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

When the value of this property is true, a close button is displayed in each grouping column.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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 (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
        groupable={true} groups={['City']} closeablegroups={false}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the columns menu width.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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 (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
        filterable={true} autoshowcolumnsmenubutton={false} columnsmenuwidth={40}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Callback called when a column menu is opening. You can use it for changing the size of the menu or cancelling the opening. Three params are passed - menu, datafield and menu's height. If you return false, the opening will be cancelled.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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 = {
        columnmenuopening: (menu: any, datafield: any, height: number | string): any => {
          alert('Menu Opening');
        },
        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 (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
        columnmenuopening={this.state.columnmenuopening} filterable={true}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Callback called when a column menu is opening. You can use it for changing the size of the menu or cancelling the opening. Three params are passed - menu, datafield and menu's height. If you return false, the opening will be cancelled.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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 = {
        columnmenuclosing: (menu: any, datafield: any, height: number | string): any => {
          alert('Menu Closing');
        },
        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 (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
        columnmenuclosing={this.state.columnmenuclosing} filterable={true}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Callback called when a cell is hovered.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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 = {
        cellhover: (cellhtmlElement: any, x: any, y: any): any => {
          alert('Cell Hovered!');
        },
        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 (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
        cellhover={this.state.cellhover}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Enables or disables the delete of a cell/row values by using the "delete" key.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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 (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
        editable={true} enablekeyboarddelete={false}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Determines whether ellipsis will be displayed, if the cells or columns content overflows.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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 (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
        enableellipsis={false}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Determines whether mousewheel scrolling is enabled.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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 (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={false}
        height={100} enablemousewheel={false}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Enables or disables the grid animations.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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 (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
        filterable={true} enableanimations={false}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Enables or disables the grid tooltips.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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 (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
        enabletooltips={true}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Enables or disables the grid rows hover state.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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 (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
        enablehover={false}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Enables the text selection of the browser.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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 (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
        enablebrowserselection={true}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets the position of the ever present row. Possible values: "top", "bottom", "topAboveFilterRow".

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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 (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
        showeverpresentrow={true} everpresentrowposition={'bottom'}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets the height of the ever present row.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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 (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
        showeverpresentrow={true} everpresentrowheight={40}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets the actions of the ever present row. Possible values: "add", "reset", "update", "delete". Instead of "add", you can also use "addBottom" which is the same as "add", but adds the new row to the bottom of the Grid.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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 (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
        showeverpresentrow={true} everpresentrowactions={'add update delete reset'}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets the actions display mode. By default they are displayed in a popup. You can set the property to "columns" and define columns with datafields - addButtonColumn, resetButtonColumn, updateButtonColumn and deleteButtonColumn to display the actions in columns.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>();
 
  private 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'
  };
 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' },
          { datafield: 'addButtonColumn', width: 50 },
          { datafield: 'resetButtonColumn', width: 50 }
        ]
    }
  }
  
  public render() {
    return (
      <JqxGrid ref={this.myGrid}
           width={850} source={this.state.source} columns={this.state.columns} autoheight={true} showeverpresentrow={true}
           everpresentrowactionsmode={'columns'} />
    );
  }
}
  
ReactDOM.render(, document.querySelector('#app') as HTMLElement);

Sets or gets the filter row's height.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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 (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
        filterable={true} showfilterrow={true} filterrowheight={40}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

The property specifies the type of rendering of the Filter Menu. Possible values: "default" and "excel". In "excel" mode, the Filter Menu displays a ListBox with Checkboxes with all unique cell values.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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 (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
        filterable={true} filtermode={'excel'}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This function is called when a group is rendered. You can use it to customize the default group rendering.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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: (text: string, group: number, expanded: boolean, data: object): any => {
          return 'City: ' + group;
        },
        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 (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
        groupsrenderer={this.state.groupsrenderer} groupable={true} groups={['City']}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets a custom renderer for the grouping columns displayed in the grouping header when the grouping feature is enabled.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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 = {
        groupcolumnrenderer: (text: any): any => {
          return 'Grouped By: ' + text;
        },
        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 (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
        groupcolumnrenderer={this.state.groupcolumnrenderer} groupable={true}
        groups={['City']}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the default state of the grouped rows.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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 (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
        groupable={true} groups={['ContactName']} groupsexpandedbydefault={true}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

The function is called when a key is pressed. If the result of the function is true, the default keyboard navigation will be overriden for the pressed key.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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 = {
        handlekeyboardnavigation: (): any => {
          // const key = event.charCode ? event.charCode : event.keyCode ? event.keyCode : 0;
         // alert(key);
        },
        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 (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
        handlekeyboardnavigation={this.state.handlekeyboardnavigation}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

The function is called when the Grid Pager is rendered. This allows you to customize the default 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 JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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 => {
          const element = document.createElement('div');
        element.innerHTML = 'Custom Render of the JqxGrid Pager!';
        return element;
        },
        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 (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
        pagerrenderer={this.state.pagerrenderer} pageable={true}
      />
    );
  }

}
 
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 JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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 (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
        rtl={true}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Determines whether the Grid should display the built-in loading element or should use a DIV tag with class 'jqx-grid-load'

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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 (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
        showdefaultloadelement={false}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

When this property is true, the Grid adds an additional visual style to the grid cells in the filter column(s).

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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 (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
        filterable={true} showfiltercolumnbackground={false}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Determines whether to display the filtering items in the column's menu.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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 (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
        filterable={true} showfiltermenuitems={false}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

When this property is true, the Grid adds an additional visual style to the grid cells in the pinned column(s).

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>();
 
  private 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'
  };
 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { pinned: true, text: 'Contact Name', datafield: 'ContactName', width: 150 },
          { text: 'Contact Title', datafield: 'Title', width: 150 },
          { text: 'City', datafield: 'City', width: 150 },
          { text: 'Country', datafield: 'Country', width: 150 },
          { text: 'Country1', width: 150 },
          { text: 'Country2', width: 150 },
          { text: 'Country3', width: 150 },
          { text: 'Country4', width: 150 },
          { text: 'Country5', width: 150 }
        ]
    }
  }
  
  public render() {
    return (
      <JqxGrid ref={this.myGrid}
           width={500} source={this.state.source} columns={this.state.columns} autoheight={true} showpinnedcolumnbackground={false} />
    );
  }
}
  
ReactDOM.render(, document.querySelector('#app') as HTMLElement);

When this property is true, the Grid adds an additional visual style to the grid cells in the sort column.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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 (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
        sortable={true} showsortcolumnbackground={false}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Determines whether to display the sort menu items.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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 (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
        sortable={true} showsortmenuitems={false}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Determines whether to display the group menu items.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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 (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
        groupable={true} showgroupmenuitems={false}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Shows an additional column with expand/collapse toggle buttons when the Row details feature is enabled.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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 (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
        rowdetails={true} showrowdetailscolumn={false}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Shows or hides 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 JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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 (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
        showheader={false}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Shows or hides the groups header area.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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 (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
        groupable={true} showgroupsheader={false}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Shows or hides the aggregates in the grid's statusbar.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>();
 
  private 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'
  };
 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          {
            text: 'Contact Title', datafield: 'Title', aggregates: ['count', {
              'Owners': function (aggregatedValue, currentValue) {
                if (currentValue == 'Owner') {
                  return aggregatedValue + 1;
                }
                return aggregatedValue;
              }
            }]
          },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country', aggregates: ['count'] }
        ]
    }
  }
  
  public render() {
    return (
      <JqxGrid ref={this.myGrid}
           width={850} source={this.state.source} columns={this.state.columns} autoheight={true} showaggregates={true} showstatusbar={true} statusbarheight={50}/>
    );
  }
}
  
ReactDOM.render(, document.querySelector('#app') as HTMLElement);

Shows or hides the aggregates in Grid groups.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>();
 
  private 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'
  };
 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          {
            text: 'Contact Title', datafield: 'Title', aggregates: ['count', {
              'Owners': function (aggregatedValue, currentValue) {
                if (currentValue == 'Owner') {
                  return aggregatedValue + 1;
                }
                return aggregatedValue;
              }
            }]
          },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country', aggregates: ['count'] }
        ]
    }
  }
  
  public render() {
    return (
      <JqxGrid ref={this.myGrid}
           width={850} source={this.state.source} columns={this.state.columns} autoheight={true} groupable={true} 
           showaggregates={true} showgroupaggregates={true} showstatusbar={true} statusbarheight={50} />
    );
  }
}
  
ReactDOM.render(, document.querySelector('#app') as HTMLElement);

Shows or hides an additional row in jqxGrid which allows you to easily add new rows.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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 (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
        showeverpresentrow={true}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Shows or hides the filter row.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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 (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
        filterable={true} showfilterrow={true}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Shows or hides the empty row label when the Grid has no records to display.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>();
 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
    }
  }
  
  public render() {
    return (
      <JqxGrid ref={this.myGrid}
           width={850} columns={this.state.columns} autoheight={true} showemptyrow={false} />
    );
  }
}
  
ReactDOM.render(, document.querySelector('#app') as HTMLElement);

Shows or hides the grid's statusbar.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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 (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
        showstatusbar={true}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets the statusbar's height.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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 (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
        showstatusbar={true} statusbarheight={50}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Shows or hides the grid's toolbar.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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 (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
        showtoolbar={true}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the selection mode.

'none'-disables the selection

'singlerow'- full row selection

'multiplerows' - each click selects a new row. Click on a selected row unselects it

'multiplerowsextended' - multiple rows selection with drag and drop. The selection behavior resembles the selection of icons on your desktop

'singlecell' - single cell selection

'multiplecells' - each click selects a new cell. Click on a selected cell unselects it

'multiplecellsextended' - in this mode, users can select multiple cells with a drag and drop. The selection behavior resembles the selection of icons on your desktop

'multiplecellsadvanced' - this mode is the most advanced cells selection mode. In this mode, users can select multiple cells with a drag and drop. The selection behavior resembles the selection of cells in a spreadsheet

'checkbox' - multiple rows selection through a checkbox.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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 (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
        selectionmode={'multiplerows'}
      />
    );
  }

}
 
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 JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>();
 
  private 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'
  };
 
 
  constructor(props: {}) {
    super(props);
    
    this.addfilter = this.addfilter.bind(this);
    this.updatefilterconditions = this.updatefilterconditions.bind(this);
    this.updatefilterpanel = this.updatefilterpanel.bind(this);
    this.ready = this.ready.bind(this);
    
    this.state = {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
    }
  }
  
  public render() {
    return (
      <JqxGrid ref={this.myGrid} 
           width={800} source={this.state.source} autoheight={true} columns={this.state.columns} 
           filterable={true} autoshowfiltericon={true} ready={this.state.ready}
           updatefilterconditions={this.state.updatefilterconditions} updatefilterpanel={this.state.updatefilterpanel}>
  </JqxGrid>
    );
  }
  
  private addfilter() {
    let filtergroup = new jqx.filter();
    let filter_or_operator = 1;
    let filtervalue = 'Beate';
    let filtercondition = 'contains';
    let filter1 = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
    filtervalue = 'Andrew';
    filtercondition = 'contains';
    let filter2 = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
    filtergroup.addfilter(filter_or_operator, filter1);
    filtergroup.addfilter(filter_or_operator, filter2);
    // add the filters.
    this.myGrid.current!.addfilter('firstname', filtergroup);
    // apply the filters.
    this.myGrid.current!.applyfilters();
  }

  private  updatefilterconditions(type: any, defaultconditions: any) {
    let stringcomparisonoperators = ['CONTAINS', 'DOES_NOT_CONTAIN'];
    let numericcomparisonoperators = ['LESS_THAN', 'GREATER_THAN'];
    let datecomparisonoperators = ['LESS_THAN', 'GREATER_THAN'];
    let booleancomparisonoperators = ['EQUAL', 'NOT_EQUAL'];
    switch (type) {
       case 'stringfilter':
     return stringcomparisonoperators;
       case 'numericfilter':
     return numericcomparisonoperators;
       case 'datefilter':
     return datecomparisonoperators;
       case 'booleanfilter':
     return booleancomparisonoperators;
    }
  }

  private  updatefilterpanel(filtertypedropdown1, filtertypedropdown2, filteroperatordropdown, filterinputfield1,
    filterinputfield2, filterbutton, clearbutton, columnfilter, filtertype, filterconditions) {
    let index1 = 0;
    let index2 = 0;
    if (columnfilter != null) {
       let filter1 = columnfilter.getfilterat(0);
       let filter2 = columnfilter.getfilterat(1);
       if (filter1) {
     index1 = filterconditions.indexOf(filter1.comparisonoperator);
     let value1 = filter1.filtervalue;
     filterinputfield1.val(value1);
       }
       if (filter2) {
     index2 = filterconditions.indexOf(filter2.comparisonoperator);
     let value2 = filter2.filtervalue;
     filterinputfield2.val(value2);
       }
    }
    filtertypedropdown1.jqxDropDownList({ autoDropDownHeight: true, selectedIndex: index1 });
    filtertypedropdown2.jqxDropDownList({ autoDropDownHeight: true, selectedIndex: index2 });
  }

  private  ready() {
    this.addfilter();
    let localizationObject = {
       filterstringcomparisonoperators: ['contains', 'does not contain'],
       // filter numeric comparison operators.
       filternumericcomparisonoperators: ['less than', 'greater than'],
       // filter date comparison operators.
       filterdatecomparisonoperators: ['less than', 'greater than'],
       // filter bool comparison operators.
       filterbooleancomparisonoperators: ['equal', 'not equal']
    }
    this.myGrid.current!.localizestrings(localizationObject);
  }
}
  
ReactDOM.render(, 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 JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>();
 
  private 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'
  };
 
 
  constructor(props: {}) {
    super(props);
    
    this.addfilter = this.addfilter.bind(this);
    this.updatefilterconditions = this.updatefilterconditions.bind(this);
    this.updatefilterpanel = this.updatefilterpanel.bind(this);
    this.ready = this.ready.bind(this);
    
    this.state = {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
    }
  }
  
  public render() {
    return (
      <JqxGrid ref={this.myGrid} 
           width={800} source={this.state.source} autoheight={true} columns={this.state.columns} 
           filterable={true} autoshowfiltericon={true} ready={this.state.ready}
           updatefilterconditions={this.state.updatefilterconditions} updatefilterpanel={this.state.updatefilterpanel}>
  </JqxGrid>
    );
  }
  
  private addfilter() {
    let filtergroup = new jqx.filter();
    let filter_or_operator = 1;
    let filtervalue = 'Beate';
    let filtercondition = 'contains';
    let filter1 = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
    filtervalue = 'Andrew';
    filtercondition = 'contains';
    let filter2 = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
    filtergroup.addfilter(filter_or_operator, filter1);
    filtergroup.addfilter(filter_or_operator, filter2);
    // add the filters.
    this.myGrid.current!.addfilter('firstname', filtergroup);
    // apply the filters.
    this.myGrid.current!.applyfilters();
  }

  private  updatefilterconditions(type: any, defaultconditions: any) {
    let stringcomparisonoperators = ['CONTAINS', 'DOES_NOT_CONTAIN'];
    let numericcomparisonoperators = ['LESS_THAN', 'GREATER_THAN'];
    let datecomparisonoperators = ['LESS_THAN', 'GREATER_THAN'];
    let booleancomparisonoperators = ['EQUAL', 'NOT_EQUAL'];
    switch (type) {
       case 'stringfilter':
     return stringcomparisonoperators;
       case 'numericfilter':
     return numericcomparisonoperators;
       case 'datefilter':
     return datecomparisonoperators;
       case 'booleanfilter':
     return booleancomparisonoperators;
    }
  }

  private  updatefilterpanel(filtertypedropdown1, filtertypedropdown2, filteroperatordropdown, filterinputfield1,
    filterinputfield2, filterbutton, clearbutton, columnfilter, filtertype, filterconditions) {
    let index1 = 0;
    let index2 = 0;
    if (columnfilter != null) {
       let filter1 = columnfilter.getfilterat(0);
       let filter2 = columnfilter.getfilterat(1);
       if (filter1) {
     index1 = filterconditions.indexOf(filter1.comparisonoperator);
     let value1 = filter1.filtervalue;
     filterinputfield1.val(value1);
       }
       if (filter2) {
     index2 = filterconditions.indexOf(filter2.comparisonoperator);
     let value2 = filter2.filtervalue;
     filterinputfield2.val(value2);
       }
    }
    filtertypedropdown1.jqxDropDownList({ autoDropDownHeight: true, selectedIndex: index1 });
    filtertypedropdown2.jqxDropDownList({ autoDropDownHeight: true, selectedIndex: index2 });
  }

  private  ready() {
    this.addfilter();
    let localizationObject = {
       filterstringcomparisonoperators: ['contains', 'does not contain'],
       // filter numeric comparison operators.
       filternumericcomparisonoperators: ['less than', 'greater than'],
       // filter date comparison operators.
       filterdatecomparisonoperators: ['less than', 'greater than'],
       // filter bool comparison operators.
       filterbooleancomparisonoperators: ['equal', 'not equal']
    }
    this.myGrid.current!.localizestrings(localizationObject);
  }
}
  
ReactDOM.render(, 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 JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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 (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
        theme={'material'}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the toolbar's height.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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 (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
        showtoolbar={true} toolbarheight={40}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the height of the grid to be equal to the summary height of the grid rows. This option should be set when the Grid 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 JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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 (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This property works along with the "autoheight" property. When it is set to true, the height of the Grid rows is dynamically changed depending on the cell values.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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 (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
        autorowheight={true}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the columns height.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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 (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
        columnsheight={40}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Determines the cell values displayed in a tooltip next to the scrollbar when the "scrollmode" is set to "deferred".

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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 (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={false}
        height={100} scrollmode={'deferred'} deferreddatafields={['ContactName']}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the height of the Grid Groups Header.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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 (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
        groupable={true} groupsheaderheight={60}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the group indent size. This size is used when the grid is grouped. This is the size of the columns with expand/collapse toggle buttons.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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 (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
        groupable={true} groupindentwidth={40}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the Grid's height.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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 (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={false}
        height={500}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the height of the Grid Pager.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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 (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
        pageable={true} pagerheight={50}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the height of the grid rows.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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 (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
        rowsheight={30}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the scrollbars size.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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 (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={false}
        height={100} scrollbarsize={20}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Determines the scrolling mode.

'default'

'logical'- the movement of the scrollbar thumb is by row, not by pixel

'deferred'-content is stationary when the user drags the Thumb of a ScrollBar

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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 (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={false}
        height={100} scrollmode={'logical'}
      />
    );
  }

}
 
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 JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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 = {
        scrollfeedback: (row: object): any => {
          return 'row ' + row.uid;
        },
        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 (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={false}
        height={100} scrollmode={'deferred'} scrollfeedback={this.state.scrollfeedback}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the Grid's width.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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 (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Determines whether the Grid automatically saves its current state.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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 (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
        autoloadstate={true} autosavestate={true}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Determines whether the Grid automatically loads its current state(if there's already saved one). The Grid's state is loaded when the page is refreshed.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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 (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
        autoloadstate={true} autosavestate={true}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets the Grid columns.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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 (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

• parentgroup - sets the column header's parent group name.
• name - sets the column header's name.
• align - sets the column header's alignment to 'left', 'center' or 'right'.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>();
 
  private 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'
  };
 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName', columngroup: 'ContactInfo' },
          { text: 'Contact Title', datafield: 'Title', columngroup: 'ContactInfo' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ],
        columngroups: [{ text: 'Contact Info', name: 'ContactInfo', align: 'center' }]
    }
  }
  
  public render() {
    return (
      <JqxGrid ref={this.myGrid}
           width={850} source={this.state.source} columns={this.state.columns} autoheight={true} columngroups={this.state.columngroups} />
    );
  }
}
  
ReactDOM.render(, document.querySelector('#app') as HTMLElement);

Enables or disables the columns dropdown menu.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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 (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
        sortable={true} columnsmenu={false}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Enables or disables the columns resizing.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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 (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
        columnsresize={true}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Enables or disables the columns resizing when the column's border is double-clicked and columnsresize 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 JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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 (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
        columnsresize={true} columnsautoresize={false}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Enables or disables the columns reordering.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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 (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
        columnsreorder={true}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Enables or disables the Grid's plugin.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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 (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
        disabled={true}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

The editable property enables or disables the Grid editing feature.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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 (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
        editable={true}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

The editmode property specifies the action that the end-user should make to open an editor.

'click' - Marks the clicked cell as selected and shows the editor. The editor’s value is equal to the cell’s value

'selectedcell' - Marks the cell as selected. A second click on the selected cell shows the editor. The editor’s value is equal to the cell’s value

'selectedrow' - A second click on a selected row shows the row editors.

'dblclick' - Marks the clicked cell as selected and shows the editor. The editor’s value is equal to the cell’s value

'programmatic' - Cell editors are activated and deactivated only through the API(see begincelledit and endcelledit methods)

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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 (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
        editable={true} editmode={'dblclick'}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Custom Filtering function. It overrides the built-in Filtering. When the user filters, the Grid calls this function, when it is implemented. The function is expected to return a boolean value or undefined.

• cellValue - current cell's value.
• rowData - JSON object which contains the current row's data.
• dataField - filter column's field.
• filterGroup - group of filters.
• defaultFilterResult - the default filter result.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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 = {
        filter: (cellValue: any, rowData: any, dataField: string, filterGroup: any, defaultFilterResult: boolean): any => {
          // implements a custom filter for the "Contactname" field. 
        if (dataField === "ContactName") {
          var filters = filterGroup.getfilters();
          for (var i = 0; i < filters.length; i++) {
            var filter = filters[i];
            var filterValue = filter.value;
            var filterCondition = filter.condition;
            var filterType = filter.type;

            if (cellValue.indexOf("Ana") >= 0) {
              return true;
            }
          }

          return false;
        }
        },
        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 (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
        filterable={true} filter={this.state.filter}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Enables or disables the Grid Filtering feature. When the value of this property is true, the Grid displays a filtering panel in the columns popup menus.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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 (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
        filterable={true}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This property enables or disables the grouping feature.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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 (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
        groupable={true} groups={['ContactName']}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the Grid groups when the Grouping feature is enabled.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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 (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
        groupable={true} groups={['ContactName']}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the scrollbar's step when the user clicks the scroll arrows.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>();
 
  private 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'
  };
 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName', width: '100' },
          { text: 'Contact Title', datafield: 'Title', width: '100' },
          { text: 'City', datafield: 'City', width: '100' },
          { text: 'Country', datafield: 'Country', width: '100' },
          { text: 'Column5', width: '100' },
          { text: 'Column6', width: '100' },
          { text: 'Column7', width: '100' },
          { text: 'Column8', width: '100' },
          { text: 'Column9', width: '100' },
          { text: 'Column10', width: '100' },
        ]
    }
  }
  
  public render() {
    return (
      <JqxGrid ref={this.myGrid}
           width={400} source={this.state.source} columns={this.state.columns} autoheight={true} horizontalscrollbarstep={200} />
    );
  }
}
  
ReactDOM.render(, document.querySelector('#app') as HTMLElement);

Sets or gets the scrollbar's large step. This property specifies the step with which the horizontal scrollbar's value is changed when the user clicks the area above or below the thumb.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>();
 
  private 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'
  };
 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName', width: '100' },
          { text: 'Contact Title', datafield: 'Title', width: '100' },
          { text: 'City', datafield: 'City', width: '100' },
          { text: 'Country', datafield: 'Country', width: '100' },
          { text: 'Column5', width: '100' },
          { text: 'Column6', width: '100' },
          { text: 'Column7', width: '100' },
          { text: 'Column8', width: '100' },
          { text: 'Column9', width: '100' },
          { text: 'Column10', width: '100' },
        ]
    }
  }
  
  public render() {
    return (
      <JqxGrid ref={this.myGrid}
           width={400} source={this.state.source} columns={this.state.columns} autoheight={true} horizontalscrollbarlargestep={600} />
    );
  }
}
  
ReactDOM.render(, document.querySelector('#app') as HTMLElement);

This function is called when the user expands the row details and the details are going to be rendered.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>();
 
  private 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'
  };
 
 
  constructor(props: {}) {
    super(props);
    
    this.initrowdetails = this.initrowdetails.bind(this);
    
    this.state = {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ],
        rowdetailstemplate: {
          rowdetails: "<div style='margin: 10px;'>Row Details</div>",
          rowdetailsheight: 50
        }
    }
  }
  
  public render() {
    return (
      <JqxGrid ref={this.myGrid}
           width={850} source={this.state.source} columns={this.state.columns} autoheight={true} 
           rowdetails={true} initrowdetails={this.initrowdetails} rowdetailstemplate={this.state.rowdetailstemplate} />
    );
  }
  
  private initrowdetails(index: any, parentElement: any, gridElement: any, datarecord: any) {
    parentElement.children[0].innerHTML = 'Details: ' + index;
  }
}
  
ReactDOM.render(, document.querySelector('#app') as HTMLElement);

Enables or disables the keyboard navigation.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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 (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
        keyboardnavigation={false}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Localizes the Grid.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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: getLocalization('de'),
        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 (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
        pageable={true} localization={this.state.localization}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the number of visible rows per page when the Grid 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 JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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 (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
        pageable={true} pagesize={2}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the available page size options.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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 (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
        pageable={true} pagesizeoptions={['15', '30', '50']}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the rendering mode of the pager. Available values - "simple" and "default".

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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 (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
        pageable={true} pagermode={'simple'}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the buttons displayed in the pager when the "pagermode" is set to "simple".

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>();
 
  private source = {
    localdata: [
  ['Maria Anders', 'Sales Representative', 'Berlin', 'Germany'],
  ['Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico'],
  ['Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico'],
  ['Maria Anders', 'Sales Representative', 'Berlin', 'Germany'],
  ['Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico'],
  ['Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico'],
  ['Maria Anders', 'Sales Representative', 'Berlin', 'Germany'],
  ['Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico'],
  ['Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico'],
  ['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'
  };
 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
    }
  }
  
  public render() {
    return (
      <JqxGrid ref={this.myGrid}
           width={850} source={this.state.source} columns={this.state.columns} autoheight={true} pageable={true}
           pagermode={'simple'} pagesize={1} pagerbuttonscount={10} />
    );
  }
}
  
ReactDOM.render(, document.querySelector('#app') as HTMLElement);

Enables or disables the Grid Paging feature. When the value of this property is true, the Grid displays a pager below the rows.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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 (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
        pageable={true}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Enables or disables the row details. When this option is enabled, the Grid can show additional information below each grid row.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>();
 
  private 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'
  };
 
 
  constructor(props: {}) {
    super(props);
    
    this.initrowdetails = this.initrowdetails.bind(this);
    
    this.state = {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ],
        rowdetailstemplate: {
          rowdetails: "<div style='margin: 10px;'>Row Details</div>",
          rowdetailsheight: 50
        }
    }
  }
  
  public render() {
    return (
      <JqxGrid ref={this.myGrid}
           width={850} source={this.state.source} columns={this.state.columns} autoheight={true} 
           rowdetails={true} initrowdetails={this.initrowdetails} rowdetailstemplate={this.state.rowdetailstemplate} />
    );
  }
  
  private initrowdetails(index: any, parentElement: any, gridElement: any, datarecord: any) {
    parentElement.children[0].innerHTML = 'Details: ' + index;
  }
}
  
ReactDOM.render(, document.querySelector('#app') as HTMLElement);

Determines the template of the row details. The rowdetails field specifies the HTML used for details. The rowdetailsheight specifies the height of the details.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>();
 
  private 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'
  };
 
 
  constructor(props: {}) {
    super(props);
    
    this.initrowdetails = this.initrowdetails.bind(this);
    
    this.state = {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ],
        rowdetailstemplate: {
          rowdetails: "<div style='margin: 10px;'>Row Details</div>",
          rowdetailsheight: 50
        }
    }
  }
  
  public render() {
    return (
      <JqxGrid ref={this.myGrid}
           width={850} source={this.state.source} columns={this.state.columns} autoheight={true} 
           rowdetails={true} initrowdetails={this.initrowdetails} rowdetailstemplate={this.state.rowdetailstemplate} />
    );
  }
  
  private initrowdetails(index: any, parentElement: any, gridElement: any, datarecord: any) {
    parentElement.children[0].innerHTML = 'Details: ' + index;
  }
}
  
ReactDOM.render(, document.querySelector('#app') as HTMLElement);

This function is called when the grid is initialized and the binding is complete.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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 (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
        ready={this.state.ready}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Callback function which is called when the jqxGrid's render function is called either internally or not.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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 (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
        rendered={this.state.rendered}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Callback function which allows you to customize the rendering of the Grid's statusbar.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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: any): any => {
          statusbar.append($("<span style='margin: 5px;'>Status Bar</span>"));
        },
        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 (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
        showstatusbar={true} renderstatusbar={this.state.renderstatusbar}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Callback function which allows you to customize the rendering of the Grid's toolbar.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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: any): any => {
          toolbar.append($("<span style='margin: 5px;'>Tool Bar</span>"));
        },
        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 (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
        showtoolbar={true} rendertoolbar={this.state.rendertoolbar}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This is a function called when the grid is used in virtual mode. The function should return an array of rows which will be rendered by the Grid.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
 
  private source = {
    datatype: 'array',
    localdata: {},
    totalrecords: 1000000
  }
  private firstNames = [
    'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi', 'Antoni', 'Mayumi', 'Ian', 'Peter', 'Lars', 'Petra', 'Martin', 'Sven', 'Elio', 'Beate', 'Cheryl', 'Michael', 'Guylene'
  ];
  private lastNames = [
    'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase', 'Saavedra', 'Ohno', 'Devling', 'Wilson', 'Peterson', 'Winkler', 'Bein', 'Petersen', 'Rossi', 'Vileid', 'Saylor', 'Bjorn', 'Nodier'
  ];
  private productNames = [
    'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte', 'White Chocolate Mocha', 'Cramel Latte', 'Caffe Americano', 'Cappuccino', 'Espresso Truffle', 'Espresso con Panna', 'Peppermint Mocha Twist'
  ];
  private priceValues = [
    '2.25', '1.5', '3.0', '3.3', '4.5', '3.6', '3.8', '2.5', '5.0', '1.75', '3.25', '4.0'
  ];
 
 
  constructor(props: {}) {
    super(props);
    
    this.generateData = this.generateData.bind(this);
    this.renderGridRows = this.renderGridRows.bind(this);
    this.totalcolumnrenderer = this.totalcolumnrenderer.bind(this);
    
    this.state = {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Id', datafield: 'id', width: 50 },
          { text: 'First Name', datafield: 'firstname', width: 120 },
          { text: 'Last Name', datafield: 'lastname', width: 120 },
          { text: 'Product', datafield: 'productname', width: 180 },
          { text: 'Quantity', datafield: 'quantity', width: 100, cellsalign: 'right' },
          { text: 'Unit Price', datafield: 'price', width: 100, cellsalign: 'right', cellsformat: 'c2' },
          { text: 'Total', datafield: 'total', cellsrenderer: this.totalcolumnrenderer, cellsalign: 'right' }
        ]
    }
  }
  
  public render() {
    return (
      <div>
        <JqxGrid width={800} source={this.state.source} columns={this.state.columns}
                 autoheight={true} virtualmode={true} pageable={true}
                 rendergridrows={this.renderGridRows}>
        </JqxGrid>
  </div>
    );
  }
  
  private generateData(startindex: any, endindex: any) {
    let data = {};
    for (let i = startindex; i < endindex; i++) {
       let row = {};
       let productindex = Math.floor(Math.random() * this.productNames.length);
       let price = parseFloat(this.priceValues[productindex]);
       let quantity = 1 + Math.round(Math.random() * 10);
       row['id'] = i;
       row['firstname'] = this.firstNames[Math.floor(Math.random() * this.firstNames.length)];
       row['lastname'] = this.lastNames[Math.floor(Math.random() * this.lastNames.length)];
       row['productname'] = this.productNames[productindex];
       row['price'] = price;
       row['quantity'] = quantity;
       row['total'] = price * quantity;
       data[i] = row;
    }
    return data;
  }

  private  renderGridRows(params: any) {
    let data = this.generateData(params.startindex, params.endindex);
    return data;
  }

  private  totalcolumnrenderer(row: any, column: any, cellvalue: any) {
    let newCellValue = jqx.dataFormat.formatnumber(cellvalue, 'c2');
    return '<span style="margin: 6px 3px; font-size: 12px; float: right; font-weight: bold;">' + newCellValue + '</span>';
  }
}
  
ReactDOM.render(, document.querySelector('#app') as HTMLElement);

The sortable property enables or 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 JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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 (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
        sortable={true}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

The sortmode property determines the Grid can sort by single or multiple columns.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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 (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
        sortable={true} sortmode={'many'}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Selects a row at a specified index.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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 (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
        selectedrowindex={2}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Selects single or multiple rows.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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 (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
        selectionmode={'multiplerows'} selectedrowindexes={[0, 2]}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets and gets the source.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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 (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

'0'-disables toggling

'1'-enables togging. Click on a column toggles the sort direction

'2'-enables remove sorting option

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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 (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
        sortable={true} sorttogglestates={1}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the rendering update delay. This could be used for deferred scrolling scenarios.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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 (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
        updatedelay={20}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Enables or disables the virtual data mode.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
 
  private source = {
    datatype: 'array',
    localdata: {},
    totalrecords: 1000000
  }
  private firstNames = [
    'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi', 'Antoni', 'Mayumi', 'Ian', 'Peter', 'Lars', 'Petra', 'Martin', 'Sven', 'Elio', 'Beate', 'Cheryl', 'Michael', 'Guylene'
  ];
  private lastNames = [
    'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase', 'Saavedra', 'Ohno', 'Devling', 'Wilson', 'Peterson', 'Winkler', 'Bein', 'Petersen', 'Rossi', 'Vileid', 'Saylor', 'Bjorn', 'Nodier'
  ];
  private productNames = [
    'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte', 'White Chocolate Mocha', 'Cramel Latte', 'Caffe Americano', 'Cappuccino', 'Espresso Truffle', 'Espresso con Panna', 'Peppermint Mocha Twist'
  ];
  private priceValues = [
    '2.25', '1.5', '3.0', '3.3', '4.5', '3.6', '3.8', '2.5', '5.0', '1.75', '3.25', '4.0'
  ];
 
 
  constructor(props: {}) {
    super(props);
    
    this.generateData = this.generateData.bind(this);
    this.renderGridRows = this.renderGridRows.bind(this);
    this.totalcolumnrenderer = this.totalcolumnrenderer.bind(this);
    
    this.state = {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Id', datafield: 'id', width: 50 },
          { text: 'First Name', datafield: 'firstname', width: 120 },
          { text: 'Last Name', datafield: 'lastname', width: 120 },
          { text: 'Product', datafield: 'productname', width: 180 },
          { text: 'Quantity', datafield: 'quantity', width: 100, cellsalign: 'right' },
          { text: 'Unit Price', datafield: 'price', width: 100, cellsalign: 'right', cellsformat: 'c2' },
          { text: 'Total', datafield: 'total', cellsrenderer: this.totalcolumnrenderer, cellsalign: 'right' }
        ]
    }
  }
  
  public render() {
    return (
      <div>
        <JqxGrid width={800} source={this.state.source} columns={this.state.columns}
                 autoheight={true} virtualmode={true} pageable={true}
                 rendergridrows={this.renderGridRows}>
        </JqxGrid>
  </div>
    );
  }
  
  private generateData(startindex: any, endindex: any) {
    let data = {};
    for (let i = startindex; i < endindex; i++) {
       let row = {};
       let productindex = Math.floor(Math.random() * this.productNames.length);
       let price = parseFloat(this.priceValues[productindex]);
       let quantity = 1 + Math.round(Math.random() * 10);
       row['id'] = i;
       row['firstname'] = this.firstNames[Math.floor(Math.random() * this.firstNames.length)];
       row['lastname'] = this.lastNames[Math.floor(Math.random() * this.lastNames.length)];
       row['productname'] = this.productNames[productindex];
       row['price'] = price;
       row['quantity'] = quantity;
       row['total'] = price * quantity;
       data[i] = row;
    }
    return data;
  }

  private  renderGridRows(params: any) {
    let data = this.generateData(params.startindex, params.endindex);
    return data;
  }

  private  totalcolumnrenderer(row: any, column: any, cellvalue: any) {
    let newCellValue = jqx.dataFormat.formatnumber(cellvalue, 'c2');
    return '<span style="margin: 6px 3px; font-size: 12px; float: right; font-weight: bold;">' + newCellValue + '</span>';
  }
}
  
ReactDOM.render(, document.querySelector('#app') as HTMLElement);

Sets or gets the scrollbar's step when the user clicks the scroll arrows.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
 
  private firstNames = [
    'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi', 'Antoni', 'Mayumi', 'Ian', 'Peter', 'Lars', 'Petra', 'Martin', 'Sven', 'Elio', 'Beate', 'Cheryl', 'Michael', 'Guylene'
  ];
  private lastNames = [
    'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase', 'Saavedra', 'Ohno', 'Devling', 'Wilson', 'Peterson', 'Winkler', 'Bein', 'Petersen', 'Rossi', 'Vileid', 'Saylor', 'Bjorn', 'Nodier'
  ];
  private productNames = [
    'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte', 'White Chocolate Mocha', 'Cramel Latte', 'Caffe Americano', 'Cappuccino', 'Espresso Truffle', 'Espresso con Panna', 'Peppermint Mocha Twist'
  ];
  private priceValues = [
    '2.25', '1.5', '3.0', '3.3', '4.5', '3.6', '3.8', '2.5', '5.0', '1.75', '3.25', '4.0'
  ];

  private source = {
    localdata: this.generateData(),
    datatype: 'array',
    datafields:
  [
    { name: 'firstname', type: 'string' },
    { name: 'lastname', type: 'string' },
    { name: 'productname', type: 'string' },
    { name: 'quantity', type: 'number' },
    { name: 'price', type: 'number' },
    { name: 'total', type: 'number' }
  ]
  };
 
 
  constructor(props: {}) {
    super(props);
    
    this.generateData = this.generateData.bind(this);
    
    this.state = {
        width: "80%",
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Name', datafield: 'firstname', width: 120 },
          { text: 'Last Name', datafield: 'lastname', width: 120 },
          { text: 'Product', datafield: 'productname', width: 180 },
          { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
          { text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
          { text: 'Total', datafield: 'total', cellsalign: 'right', cellsformat: 'c2' }
        ]
    }
  }
  
  public render() {
    return (
      <JqxGrid width={this.state.width} source={this.state.source} columns={this.state.columns} columnsresize={true} verticalscrollbarstep={200}>
  </JqxGrid>
    );
  }
  
  private generateData() {
    let data = {};
    for (let i = 0; i < 200; i++) {
       let row = {};
       let productindex = Math.floor(Math.random() * this.productNames.length);
       let price = parseFloat(this.priceValues[productindex]);
       let quantity = 1 + Math.round(Math.random() * 10);
       row['id'] = i;
       row['firstname'] = this.firstNames[Math.floor(Math.random() * this.firstNames.length)];
       row['lastname'] = this.lastNames[Math.floor(Math.random() * this.lastNames.length)];
       row['productname'] = this.productNames[productindex];
       row['price'] = price;
       row['quantity'] = quantity;
       row['total'] = price * quantity;
       data[i] = row;
    }
    return data;
  }
}
  
ReactDOM.render(, document.querySelector('#app') as HTMLElement);

Sets or gets the scrollbar's large step. This property specifies the step with which the vertical scrollbar's value is changed when the user clicks the area above or below the thumb.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
 
  private firstNames = [
    'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi', 'Antoni', 'Mayumi', 'Ian', 'Peter', 'Lars', 'Petra', 'Martin', 'Sven', 'Elio', 'Beate', 'Cheryl', 'Michael', 'Guylene'
  ];
  private lastNames = [
    'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase', 'Saavedra', 'Ohno', 'Devling', 'Wilson', 'Peterson', 'Winkler', 'Bein', 'Petersen', 'Rossi', 'Vileid', 'Saylor', 'Bjorn', 'Nodier'
  ];
  private productNames = [
    'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte', 'White Chocolate Mocha', 'Cramel Latte', 'Caffe Americano', 'Cappuccino', 'Espresso Truffle', 'Espresso con Panna', 'Peppermint Mocha Twist'
  ];
  private priceValues = [
    '2.25', '1.5', '3.0', '3.3', '4.5', '3.6', '3.8', '2.5', '5.0', '1.75', '3.25', '4.0'
  ];

  private source = {
    localdata: this.generateData(),
    datatype: 'array',
    datafields:
  [
    { name: 'firstname', type: 'string' },
    { name: 'lastname', type: 'string' },
    { name: 'productname', type: 'string' },
    { name: 'quantity', type: 'number' },
    { name: 'price', type: 'number' },
    { name: 'total', type: 'number' }
  ]
  };
 
 
  constructor(props: {}) {
    super(props);
    
    this.generateData = this.generateData.bind(this);
    
    this.state = {
        width: "80%",
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Name', datafield: 'firstname', width: 120 },
          { text: 'Last Name', datafield: 'lastname', width: 120 },
          { text: 'Product', datafield: 'productname', width: 180 },
          { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
          { text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
          { text: 'Total', datafield: 'total', cellsalign: 'right', cellsformat: 'c2' }
        ]
    }
  }
  
  public render() {
    return (
      <JqxGrid width={this.state.width} source={this.state.source} columns={this.state.columns} columnsresize={true} verticalscrollbarlargestep={2000}>
  </JqxGrid>
    );
  }
  
  private generateData() {
    let data = {};
    for (let i = 0; i < 200; i++) {
       let row = {};
       let productindex = Math.floor(Math.random() * this.productNames.length);
       let price = parseFloat(this.priceValues[productindex]);
       let quantity = 1 + Math.round(Math.random() * 10);
       row['id'] = i;
       row['firstname'] = this.firstNames[Math.floor(Math.random() * this.firstNames.length)];
       row['lastname'] = this.lastNames[Math.floor(Math.random() * this.lastNames.length)];
       row['productname'] = this.productNames[productindex];
       row['price'] = price;
       row['quantity'] = quantity;
       row['total'] = price * quantity;
       data[i] = row;
    }
    return data;
  }
}
  
ReactDOM.render(, document.querySelector('#app') as HTMLElement);

This event is triggered when the binding is completed. Note: Bind to that event before the Grid's initialization, because if you data bind the Grid to a local data source and bind to the "bindingcomplete" event after the initializaation, the data binding will be already completed.

Code examples

Bind to the bindingcomplete event of jqxGrid.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>();
 
  private 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'
  };
 
 
  constructor(props: {}) {
    super(props);
    
    this.onBindingcomplete = this.onBindingcomplete.bind(this);
    
    this.state = {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myGrid.current!.setOptions({ source: this.state.source });
  }
  
  public render() {
    return (
      <JqxGrid ref={this.myGrid} onBindingcomplete={this.onBindingcomplete}
           width={850} columns={this.state.columns} autoheight={true} />
    );
  }
  
  private onBindingcomplete(e: Event) {
    alert('do something...');
  }
}
  
ReactDOM.render(, document.querySelector('#app') as HTMLElement);

This event is triggered when a Grid Column is resized.

Code examples

Bind to the columnresized event of jqxGrid.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>();
 
  private 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'
  };
 
 
  constructor(props: {}) {
    super(props);
    
    this.onColumnresized = this.onColumnresized.bind(this);
    
    this.state = {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
    }
  }
  
  public render() {
    return (
      <JqxGrid ref={this.myGrid} onColumnresized={this.onColumnresized}
           width={850} source={this.state.source} columns={this.state.columns} columnsresize={true} autoheight={true} />
    );
  }
  
  private onColumnresized(e: Event) {
    alert('do something...');
  }
}
  
ReactDOM.render(, document.querySelector('#app') as HTMLElement);

This event is triggered when a Grid Column is moved to a new position.

Code examples

Bind to the columnreordered event of jqxGrid.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>();
 
  private 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'
  };
 
 
  constructor(props: {}) {
    super(props);
    
    this.onColumnreordered = this.onColumnreordered.bind(this);
    
    this.state = {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
    }
  }
  
  public render() {
    return (
      <JqxGrid ref={this.myGrid} onColumnreordered={this.onColumnreordered}
           width={850} source={this.state.source} columns={this.state.columns} columnsreorder={true} autoheight={true} />
    );
  }
  
  private onColumnreordered(e: Event) {
    alert('do something...');
  }
}
  
ReactDOM.render(, document.querySelector('#app') as HTMLElement);

This event is triggered when a column is clicked.

Code examples

Bind to the columnclick event of jqxGrid.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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 (
      <JqxGrid ref={this.myGrid} onColumnclick={this.onColumnclick} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
      />
    );
  }

 
  private onColumnclick(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This event is triggered when a cell is clicked.

Code examples

Bind to the cellclick event of jqxGrid.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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 (
      <JqxGrid ref={this.myGrid} onCellclick={this.onCellclick} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
      />
    );
  }

 
  private onCellclick(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This event is triggered when a cell is double-clicked.

Code examples

Bind to the celldoubleclick event of jqxGrid.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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 (
      <JqxGrid ref={this.myGrid} onCelldoubleclick={this.onCelldoubleclick} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
      />
    );
  }

 
  private onCelldoubleclick(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This event is triggered when a cell is selected.

Code examples

Bind to the cellselect event of jqxGrid.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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.myGrid.current!.setOptions({ selectionmode: 'singlecell' });
  }
   
  public render() {
    return (
      <JqxGrid ref={this.myGrid} onCellselect={this.onCellselect} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
      />
    );
  }

 
  private onCellselect(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This event is triggered when a cell is unselected.

Code examples

Bind to the cellunselect event of jqxGrid.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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.myGrid.current!.setOptions({ selectionmode: 'singlecell' });
  }
   
  public render() {
    return (
      <JqxGrid ref={this.myGrid} onCellunselect={this.onCellunselect} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
      />
    );
  }

 
  private onCellunselect(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This event is triggered when a cell's value is changed.

Code examples

Bind to the cellvaluechanged event of jqxGrid.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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.myGrid.current!.setOptions({ editable: true });
  }
   
  public render() {
    return (
      <JqxGrid ref={this.myGrid} onCellvaluechanged={this.onCellvaluechanged} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
      />
    );
  }

 
  private onCellvaluechanged(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This event is triggered when a cell's editor is displayed.

Code examples

Bind to the cellbeginedit event of jqxGrid.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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.myGrid.current!.setOptions({ editable: true });
  }
   
  public render() {
    return (
      <JqxGrid ref={this.myGrid} onCellbeginedit={this.onCellbeginedit} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
      />
    );
  }

 
  private onCellbeginedit(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This event is triggered when a cell's edit operation has ended.

Code examples

Bind to the cellendedit event of jqxGrid.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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.myGrid.current!.setOptions({ editable: true });
  }
   
  public render() {
    return (
      <JqxGrid ref={this.myGrid} onCellendedit={this.onCellendedit} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
      />
    );
  }

 
  private onCellendedit(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This event is triggered when the Grid is filtered.

Code examples

Bind to the filter event of jqxGrid.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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.myGrid.current!.setOptions({ filterable: true });
  }
   
  public render() {
    return (
      <JqxGrid ref={this.myGrid} onFilter={this.onFilter} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
      />
    );
  }

 
  private onFilter(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This event is triggered when a group is added, inserted or removed.

Code examples

Bind to the groupschanged event of jqxGrid.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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.myGrid.current!.setOptions({ groupable: true });
  }
   
  public render() {
    return (
      <JqxGrid ref={this.myGrid} onGroupschanged={this.onGroupschanged} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
      />
    );
  }

 
  private onGroupschanged(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This event is triggered when a group is expanded.

Code examples

Bind to the groupexpand event of jqxGrid.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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.myGrid.current!.setOptions({ groupable: true });
  }
   
  public render() {
    return (
      <JqxGrid ref={this.myGrid} onGroupexpand={this.onGroupexpand} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
      />
    );
  }

 
  private onGroupexpand(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This event is triggered when a group is collapsed.

Code examples

Bind to the groupcollapse event of jqxGrid.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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.myGrid.current!.setOptions({ groupable: true });
  }
   
  public render() {
    return (
      <JqxGrid ref={this.myGrid} onGroupcollapse={this.onGroupcollapse} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
      />
    );
  }

 
  private onGroupcollapse(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This event is triggered when the current page is changed.

Code examples

Bind to the pagechanged event of jqxGrid.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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.myGrid.current!.setOptions({ pageable: true, pagesize: 1 });
  }
   
  public render() {
    return (
      <JqxGrid ref={this.myGrid} onPagechanged={this.onPagechanged} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
      />
    );
  }

 
  private onPagechanged(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This event is triggered when the page size is changed.

Code examples

Bind to the pagesizechanged event of jqxGrid.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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.myGrid.current!.setOptions({ pageable: true });
  }
   
  public render() {
    return (
      <JqxGrid ref={this.myGrid} onPagesizechanged={this.onPagesizechanged} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
      />
    );
  }

 
  private onPagesizechanged(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This event is triggered when a row is clicked.

Code examples

Bind to the rowclick event of jqxGrid.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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 (
      <JqxGrid ref={this.myGrid} onRowclick={this.onRowclick} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
      />
    );
  }

 
  private onRowclick(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This event is triggered when a row is double clicked.

Code examples

Bind to the rowdoubleclick event of jqxGrid.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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 (
      <JqxGrid ref={this.myGrid} onRowdoubleclick={this.onRowdoubleclick} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
      />
    );
  }

 
  private onRowdoubleclick(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This event is triggered when a row is selected.

Code examples

Bind to the rowselect event of jqxGrid.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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 (
      <JqxGrid ref={this.myGrid} onRowselect={this.onRowselect} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
      />
    );
  }

 
  private onRowselect(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This event is triggered when a row is unselected.

Code examples

Bind to the rowunselect event of jqxGrid.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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 (
      <JqxGrid ref={this.myGrid} onRowunselect={this.onRowunselect} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
      />
    );
  }

 
  private onRowunselect(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This event is triggered when a row with details is expanded.

Code examples

Bind to the rowexpand event of jqxGrid.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>();
 
  private 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'
  };
 
 
  constructor(props: {}) {
    super(props);
    
    this.initrowdetails = this.initrowdetails.bind(this);
    this.onRowexpand = this.onRowexpand.bind(this);
    
    this.state = {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ],
        rowdetailstemplate: {
          rowdetails: "<div style='margin: 10px;'>Row Details</div>",
          rowdetailsheight: 50
        }
    }
  }
  
  public render() {
    return (
      <JqxGrid ref={this.myGrid} onRowexpand={this.onRowexpand} width={850} source={this.state.source} columns={this.state.columns} 
           rowdetails={true} initrowdetails={this.initrowdetails} rowdetailstemplate={this.state.rowdetailstemplate} autoheight={true} />
    );
  }
  
  private initrowdetails(index: any, parentElement: any, gridElement: any, datarecord: any) {
    parentElement.children[0].innerHTML = 'Details: ' + index;
  }

  private  onRowexpand(e: Event) {
    alert('do something...');
  }
}
  
ReactDOM.render(, document.querySelector('#app') as HTMLElement);

This event is triggered when a row with details is collapsed.

Code examples

Bind to the rowcollapse event of jqxGrid.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>();
 
  private 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'
  };
 
 
  constructor(props: {}) {
    super(props);
    
    this.initrowdetails = this.initrowdetails.bind(this);
    this.onRowcollapse = this.onRowcollapse.bind(this);
    
    this.state = {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ],
        rowdetailstemplate: {
          rowdetails: "<div style='margin: 10px;'>Row Details</div>",
          rowdetailsheight: 50
        }
    }
  }
  
  public render() {
    return (
      <JqxGrid ref={this.myGrid} onRowcollapse={this.onRowcollapse} width={850} source={this.state.source} columns={this.state.columns} 
           rowdetails={true} initrowdetails={this.initrowdetails} rowdetailstemplate={this.state.rowdetailstemplate} autoheight={true} />
    );
  }
  
  private initrowdetails(index: any, parentElement: any, gridElement: any, datarecord: any) {
    parentElement.children[0].innerHTML = 'Details: ' + index;
  }

  private  onRowcollapse(e: Event) {
    alert('do something...');
  }
}
  
ReactDOM.render(, document.querySelector('#app') as HTMLElement);

This event is triggered when the Grid is sorted.

Code examples

Bind to the sort event of jqxGrid.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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.myGrid.current!.setOptions({ sortable: true, showsortmenuitems: true });
  }
   
  public render() {
    return (
      <JqxGrid ref={this.myGrid} onSort={this.onSort} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
      />
    );
  }

 
  private onSort(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Auto-resizes all columns.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
import JqxButton from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>();
 
  private 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'
  };
 
 
  constructor(props: {}) {
    super(props);
    
    this.resizeColumns = this.resizeColumns.bind(this);
    
    this.state = {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName', width: 50 },
          { text: 'Contact Title', datafield: 'Title', width: 50 },
          { text: 'City', datafield: 'City', width: 50 },
          { text: 'Country', datafield: 'Country' }
        ]
    }
  }
  
  public render() {
    return (
      <div>
        <JqxGrid ref={this.myGrid}
           width={410} source={this.state.source} columns={this.state.columns} autoheight={true} />
        <JqxButton width={150} onClick={this.resizeColumns}>Auto Resize Columns</JqxButton>
  </div>
    );
  }
  
  private resizeColumns() {
    this.myGrid.current!.autoresizecolumns();
  }
}
  
ReactDOM.render(, document.querySelector('#app') as HTMLElement);

Auto-resizes a column.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
import JqxButton from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>();
 
  private 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'
  };
 
 
  constructor(props: {}) {
    super(props);
    
    this.resizeColumn = this.resizeColumn.bind(this);
    
    this.state = {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName', width: 150 },
          { text: 'Contact Title', datafield: 'Title', width: 50 },
          { text: 'City', datafield: 'City', width: 100 },
          { text: 'Country', datafield: 'Country' }
        ]
    }
  }
  
  public render() {
    return (
      <div>
        <JqxGrid ref={this.myGrid}
                 width={500} source={this.state.source} columns={this.state.columns} autoheight={true} />
        <JqxButton width={200} onClick={this.resizeColumn}>Auto Resize Second Column</JqxButton>
  </div>
    );
  }
  
  private resizeColumn() {
    this.myGrid.current!.autoresizecolumn('Title');
  }
}
  
ReactDOM.render(, document.querySelector('#app') as HTMLElement);

Starts an update operation. This is appropriate when calling multiple methods or set multiple properties at once. Optional boolean parameter: suspendAllActions. When you call beginupdate with parameter equal to true, the jqxGrid stops all rendering processes and when you call "endupdate", it will call the "render" method. Otherwise, it will try to resume its state with minimial performance impact. Use the suspendAllActions when you make multiple changes which require full-rerender such as changing the Grid's source, columns, groups.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
import JqxButton from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>();
 
  private 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'
  };
 
 
  constructor(props: {}) {
    super(props);
    
    this.beginUpdate = this.beginUpdate.bind(this);
    this.endUpdate = this.endUpdate.bind(this);
    
    this.state = {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
    }
  }
  
  public render() {
    return (
      <div>
        <JqxGrid ref={this.myGrid}
                 width={800} source={this.state.source} columns={this.state.columns} sortable={true} autoheight={true} />
        <JqxButton width={100} onClick={this.beginUpdate}>Begin Update</JqxButton>
        <JqxButton width={100} onClick={this.endUpdate}>End Update</JqxButton>
  </div>
    );
  }
  
  private beginUpdate() {
    this.myGrid.current!.beginupdate();
  }

  private  endUpdate() {
    this.myGrid.current!.endupdate();
  }
}
  
ReactDOM.render(, document.querySelector('#app') as HTMLElement);

Clears the Grid contents.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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.myGrid.current!.clear();
  }
   
  public render() {
    return (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Removes the Grid from the document and releases its resources.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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.myGrid.current!.destroy();
  }
   
  public render() {
    return (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Ends the update operation.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
import JqxButton from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>();
 
  private 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'
  };
 
 
  constructor(props: {}) {
    super(props);
    
    this.beginUpdate = this.beginUpdate.bind(this);
    this.endUpdate = this.endUpdate.bind(this);
    
    this.state = {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
    }
  }
  
  public render() {
    return (
      <div>
        <JqxGrid ref={this.myGrid}
                 width={800} source={this.state.source} columns={this.state.columns} sortable={true} autoheight={true} />
        <JqxButton width={100} onClick={this.beginUpdate}>Begin Update</JqxButton>
        <JqxButton width={100} onClick={this.endUpdate}>End Update</JqxButton>
  </div>
    );
  }
  
  private beginUpdate() {
    this.myGrid.current!.beginupdate();
  }

  private  endUpdate() {
    this.myGrid.current!.endupdate();
  }
}
  
ReactDOM.render(, document.querySelector('#app') as HTMLElement);

Scrolls to a row. The parameter is a bound index.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>();
 
  private 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'
  };
 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myGrid.current!.ensurerowvisible(2);
  }
  
  public render() {
    return (
      <JqxGrid ref={this.myGrid}
           width={850} source={this.state.source} columns={this.state.columns} height={70} />
    );
  }
}
  
ReactDOM.render(, document.querySelector('#app') as HTMLElement);

Sets the keyboard Focus to the jqxGrid widget.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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.myGrid.current!.focus();
  }
   
  public render() {
    return (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Gets the index of a column in the columns collection.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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.myGrid.current!.getcolumnindex('Title');
  }
   
  public render() {
    return (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Gets a column by datafield value.Column's fields:

• datafield - column's datafield. To get the cells labels and values from the data source, the Grid uses the "datafield" and "displayfield" properties. If the "displayfield" is not set, the "displayfield" is equal to the "datafield'.
• text - column's text.
• displayfield - column's displayfield. To get the cells labels and values from the data source, the Grid uses the "datafield" and "displayfield" properties. If the "displayfield" is not set, the "displayfield" is equal to the "datafield'.
• sortable - determines whether the column is sortable.
• filterable - determines whether the column is filterable.
• exportable - determines whether the column will be exported through the "exportdata" method.
• editable - determines whether the column is editable.
• groupable - determines whether the column is groupable.
• resizable - determines whether the column is resizable.
• draggable - determines whether the column is draggable.
• classname - determines the column's header classname.
• cellclassname - determines the column's cells classname.
• width - determines the column's width.
• menu - determines whether the column has an associated popup menu or not.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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.myGrid.current!.getcolumn('Title');
  }
   
  public render() {
    return (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Gets a property of a column. Possible property names: 'text', 'hidden', 'hideable', 'renderer', 'cellsrenderer', 'align', 'cellsalign', 'cellsformat', 'pinned', 'contenttype', 'resizable', 'filterable', 'editable', 'cellclassname', 'classname', 'width', 'minwidth', 'maxwidth'

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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.myGrid.current!.getcolumnproperty('Title','text');
  }
   
  public render() {
    return (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Gets the id of a row. The returned value is a 'string' or 'number' depending on the id's type. The parameter is the row's bound index.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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.myGrid.current!.getrowid(0);
  }
   
  public render() {
    return (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Gets the data of a row. The returned value is a JSON object. The parameter is the row's bound index. Note: If you pass a bound index of a row which is not visible in the Grid, the method returns null.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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.myGrid.current!.getrowdata(0);
  }
   
  public render() {
    return (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Gets the data of a row. The returned value is a JSON object. The parameter is the row's id.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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.myGrid.current!.getrowdatabyid(0);
  }
   
  public render() {
    return (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Gets the index of a row in the array returned by the getboundrows method.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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.myGrid.current!.getrowboundindexbyid(0);
  }
   
  public render() {
    return (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Gets the index of a row in the array returned by the getboundrows method.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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.myGrid.current!.getrowboundindex(0);
  }
   
  public render() {
    return (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Gets all rows. Returns an array of all rows loaded in the Grid. If the Grid is filtered, the returned value is an array of the filtered records.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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.myGrid.current!.getrows();
  }
   
  public render() {
    return (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Gets all rows loaded from the data source. The method returns an Array of all rows. The Grid's sorting, filtering, grouping and paging will not affect the result of this method. It will always return the rows collection loaded from the data source.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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.myGrid.current!.getboundrows();
  }
   
  public render() {
    return (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Gets all rows that are currently displayed in the Grid. The method returns an Array of the displayed rows. The Grid's sorting, filtering, grouping and paging will affect the result of this method.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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.myGrid.current!.getdisplayrows();
  }
   
  public render() {
    return (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Gets bound data information.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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.myGrid.current!.getdatainformation();
  }
   
  public render() {
    return (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Gets the sort information.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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.myGrid.current!.getsortinformation();
  }
   
  public render() {
    return (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Gets the paging information.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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.myGrid.current!.getpaginginformation();
  }
   
  public render() {
    return (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
      />
    );
  }

}
 
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 JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
import JqxButton from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>();
 
  private 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'
  };
 
 
  constructor(props: {}) {
    super(props);
    
    this.showColumn = this.showColumn.bind(this);
    this.hideColumn = this.hideColumn.bind(this);
    
    this.state = {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName'},
          { text: 'Contact Title', datafield: 'Title'},
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
    }
  }
  
  public render() {
    return (
      <div>
        <JqxGrid ref={this.myGrid}
                 width={800} source={this.state.source} columns={this.state.columns} autoheight={true} />
        <JqxButton width={100} onClick={this.showColumn}>Show Column</JqxButton>
        <JqxButton width={100} onClick={this.hideColumn}>Hide Column</JqxButton>
  </div>
    );
  }
  
  private showColumn() {
    this.myGrid.current!.showcolumn('ContactName');
  }

  private  hideColumn() {
    this.myGrid.current!.hidecolumn('ContactName');
  }
}
  
ReactDOM.render(, document.querySelector('#app') as HTMLElement);

Hides the data loading image.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
import JqxButton from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>();
 
  private 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'
  };
 
 
  constructor(props: {}) {
    super(props);
    
    this.showElement = this.showElement.bind(this);
    this.hideElement = this.hideElement.bind(this);
    
    this.state = {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
    }
  }
  
  public render() {
    return (
      <div>
        <JqxGrid ref={this.myGrid}
                 width={800} source={this.state.source} columns={this.state.columns} autoheight={true} />
        <JqxButton width={150} onClick={this.showElement}>Show Load Element</JqxButton>
        <JqxButton width={150} onClick={this.hideElement}>Hide Load Element</JqxButton>
  </div>
    );
  }
  
  private showElement() {
    this.myGrid.current!.showloadelement();
  }

  private  hideElement() {
    this.myGrid.current!.hideloadelement();
  }
}
  
ReactDOM.render(, document.querySelector('#app') as HTMLElement);

Hides the details of a row.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
import JqxButton from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>();
 
  private 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'
  };
 
 
  constructor(props: {}) {
    super(props);
    
    this.initrowdetails = this.initrowdetails.bind(this);
    this.showDetails = this.showDetails.bind(this);
    this.hideDetails = this.hideDetails.bind(this);
    
    this.state = {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ],
        rowdetailstemplate: {
          rowdetails: "<div style='margin: 10px;'>Row Details</div>",
          rowdetailsheight: 50
        }
    }
  }
  
  public render() {
    return (
      <div>
        <JqxGrid ref={this.myGrid}
                 width={800} source={this.state.source} columns={this.state.columns} autoheight={true}
                 rowdetails={true} initrowdetails={this.initrowdetails} rowdetailstemplate={this.state.rowdetailstemplate} />
        <JqxButton width={150} onClick={this.showDetails}>Show Row Details</JqxButton>
        <JqxButton width={150} onClick={this.hideDetails}>Hide Row Details</JqxButton>
  </div>
    );
  }
  
  private initrowdetails(index: any, parentElement: any, gridElement: any, datarecord: any) {
    parentElement.children[0].innerHTML = 'Details: ' + index;
  }

  private  showDetails() {
    this.myGrid.current!.showrowdetails(0);
  }

  private  hideDetails() {
    this.myGrid.current!.hiderowdetails(0);
  }
}
  
ReactDOM.render(, document.querySelector('#app') as HTMLElement);

Gets whether a column is visible. Returns a boolean value.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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.myGrid.current!.iscolumnvisible('ContactName');
  }
   
  public render() {
    return (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Gets whether a column is pinned. Returns a boolean value.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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.myGrid.current!.iscolumnpinned('ContactName');
  }
   
  public render() {
    return (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Localizes the grid strings. This method allows you to change the valus of all Grid strings and also to change the cells formatting settings.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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.myGrid.current!.localizestrings(getLocalization('de'));
  }
   
  public render() {
    return (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Pins the column.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
import JqxButton from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>();
 
  private 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'
  };
 
 
  constructor(props: {}) {
    super(props);
    
    this.pinColumn = this.pinColumn.bind(this);
    this.unpinColumn = this.unpinColumn.bind(this);
    
    this.state = {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
    }
  }
  
  public render() {
    return (
      <div>
        <JqxGrid ref={this.myGrid}
                 width={800} source={this.state.source} columns={this.state.columns} autoheight={true} />
        <JqxButton width={100} onClick={this.pinColumn}>Pin Column</JqxButton>
        <JqxButton width={100} onClick={this.unpinColumn}>Unpin Column</JqxButton>
  </div>
    );
  }
  
  private pinColumn() {
    this.myGrid.current!.pincolumn('ContactName');
  }

  private  unpinColumn() {
    this.myGrid.current!.unpincolumn('ContactName');
  }
}
  
ReactDOM.render(, document.querySelector('#app') as HTMLElement);

Refreshes the data.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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.myGrid.current!.refreshdata();
  }
   
  public render() {
    return (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Repaints the Grid View.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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.myGrid.current!.refresh();
  }
   
  public render() {
    return (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Renders the Grid contents. This method completely refreshes the Grid cells, columns, layout and repaints the view.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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.myGrid.current!.render();
  }
   
  public render() {
    return (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Scrolls the grid contents.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>();
 
  private 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'
  };
 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName', width: 150 },
          { text: 'Contact Title', datafield: 'Title', width: 150 },
          { text: 'City', datafield: 'City', width: 150 },
          { text: 'Country', datafield: 'Country' }
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myGrid.current!.scrolloffset(0, 100);
  }
  
  public render() {
    return (
      <JqxGrid ref={this.myGrid}
           width={400} source={this.state.source} columns={this.state.columns} autoheight={true} />
    );
  }
}
  
ReactDOM.render(, document.querySelector('#app') as HTMLElement);

Returns the scrollbars position.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>();
 
  private 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'
  };
 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName', width: 150 },
          { text: 'Contact Title', datafield: 'Title', width: 150 },
          { text: 'City', datafield: 'City', width: 150 },
          { text: 'Country', datafield: 'Country' }
        ]
    }
  }
 
  public componentDidMount(): void {
    let position = this.myGrid.current!.scrollposition();
      let left = position.left;
      let top = position.top;
      alert('Left: ' + left + ", Top: " + top);
  }
  
  public render() {
    return (
      <JqxGrid ref={this.myGrid}
           width={400} source={this.state.source} columns={this.state.columns} autoheight={true} />
    );
  }
}
  
ReactDOM.render(, document.querySelector('#app') as HTMLElement);

Shows the data loading image.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
import JqxButton from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>();
 
  private 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'
  };
 
 
  constructor(props: {}) {
    super(props);
    
    this.showElement = this.showElement.bind(this);
    this.hideElement = this.hideElement.bind(this);
    
    this.state = {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
    }
  }
  
  public render() {
    return (
      <div>
        <JqxGrid ref={this.myGrid}
                 width={800} source={this.state.source} columns={this.state.columns} autoheight={true} />
        <JqxButton width={150} onClick={this.showElement}>Show Load Element</JqxButton>
        <JqxButton width={150} onClick={this.hideElement}>Hide Load Element</JqxButton>
  </div>
    );
  }
  
  private showElement() {
    this.myGrid.current!.showloadelement();
  }

  private  hideElement() {
    this.myGrid.current!.hideloadelement();
  }
}
  
ReactDOM.render(, document.querySelector('#app') as HTMLElement);

Shows the details of a row.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
import JqxButton from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>();
 
  private 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'
  };
 
 
  constructor(props: {}) {
    super(props);
    
    this.initrowdetails = this.initrowdetails.bind(this);
    this.showDetails = this.showDetails.bind(this);
    this.hideDetails = this.hideDetails.bind(this);
    
    this.state = {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ],
        rowdetailstemplate: {
          rowdetails: "<div style='margin: 10px;'>Row Details</div>",
          rowdetailsheight: 50
        }
    }
  }
  
  public render() {
    return (
      <div>
        <JqxGrid ref={this.myGrid}
                 width={800} source={this.state.source} columns={this.state.columns} autoheight={true}
                 rowdetails={true} initrowdetails={this.initrowdetails} rowdetailstemplate={this.state.rowdetailstemplate} />
        <JqxButton width={150} onClick={this.showDetails}>Show Row Details</JqxButton>
        <JqxButton width={150} onClick={this.hideDetails}>Hide Row Details</JqxButton>
  </div>
    );
  }
  
  private initrowdetails(index: any, parentElement: any, gridElement: any, datarecord: any) {
    parentElement.children[0].innerHTML = 'Details: ' + index;
  }

  private  showDetails() {
    this.myGrid.current!.showrowdetails(0);
  }

  private  hideDetails() {
    this.myGrid.current!.hiderowdetails(0);
  }
}
  
ReactDOM.render(, document.querySelector('#app') as HTMLElement);

Sets the index of a column in the columns collection.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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.myGrid.current!.setcolumnindex('Title',0);
  }
   
  public render() {
    return (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets a property of a column.Possible property names: 'text', 'hidden', 'hideable', 'renderer', 'cellsrenderer', 'align', 'cellsalign', 'cellsformat', 'pinned', 'contenttype', 'resizable', 'filterable', 'editable', 'cellclassname', 'classname', 'width', 'minwidth', 'maxwidth'

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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.myGrid.current!.setcolumnproperty('Title','text','New Name');
  }
   
  public render() {
    return (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Shows a column.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
import JqxButton from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>();
 
  private 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'
  };
 
 
  constructor(props: {}) {
    super(props);
    
    this.showColumn = this.showColumn.bind(this);
    this.hideColumn = this.hideColumn.bind(this);
    
    this.state = {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName'},
          { text: 'Contact Title', datafield: 'Title'},
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
    }
  }
  
  public render() {
    return (
      <div>
        <JqxGrid ref={this.myGrid}
                 width={800} source={this.state.source} columns={this.state.columns} autoheight={true} />
        <JqxButton width={100} onClick={this.showColumn}>Show Column</JqxButton>
        <JqxButton width={100} onClick={this.hideColumn}>Hide Column</JqxButton>
  </div>
    );
  }
  
  private showColumn() {
    this.myGrid.current!.showcolumn('ContactName');
  }

  private  hideColumn() {
    this.myGrid.current!.hidecolumn('ContactName');
  }
}
  
ReactDOM.render(, document.querySelector('#app') as HTMLElement);

Unpins the column.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
import JqxButton from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>();
 
  private 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'
  };
 
 
  constructor(props: {}) {
    super(props);
    
    this.pinColumn = this.pinColumn.bind(this);
    this.unpinColumn = this.unpinColumn.bind(this);
    
    this.state = {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
    }
  }
  
  public render() {
    return (
      <div>
        <JqxGrid ref={this.myGrid}
                 width={800} source={this.state.source} columns={this.state.columns} autoheight={true} />
        <JqxButton width={100} onClick={this.pinColumn}>Pin Column</JqxButton>
        <JqxButton width={100} onClick={this.unpinColumn}>Unpin Column</JqxButton>
  </div>
    );
  }
  
  private pinColumn() {
    this.myGrid.current!.pincolumn('ContactName');
  }

  private  unpinColumn() {
    this.myGrid.current!.unpincolumn('ContactName');
  }
}
  
ReactDOM.render(, document.querySelector('#app') as HTMLElement);

Updates the bound data and refreshes the grid. You can pass 'filter' or 'sort' as parameter, if the update reason is change in 'filtering' or 'sorting'. To update only the data without the columns, use the 'data' parameter. To make a quick update of the cells, pass "cells" as parameter. Passing "cells" will refresh only the cells values when the new rows count is equal to the previous rows count. To make a full update, do not pass any parameter.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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.myGrid.current!.updatebounddata();
  }
   
  public render() {
    return (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Gets the updating operation state. Returns a boolean value.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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.myGrid.current!.updating();
  }
   
  public render() {
    return (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Gets the sort column. Returns the column's datafield or null, if sorting is not applied.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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.myGrid.current!.getsortcolumn();
  }
   
  public render() {
    return (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Removes the sorting.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
import JqxButton from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>();
 
  private 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'
  };
 
 
  constructor(props: {}) {
    super(props);
    
    this.removeSort = this.removeSort.bind(this);
    
    this.state = {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
    }
  }
  
  public render() {
    return (
      <div>
        <JqxGrid ref={this.myGrid}
                 width={850} source={this.state.source} columns={this.state.columns} sortable={true} autoheight={true} />
        <JqxButton width={150} onClick={this.removeSort}>Remove Sort</JqxButton>
  </div>
    );
  }
  
  private removeSort() {
    this.myGrid.current!.removesort();
  }
}
  
ReactDOM.render(, document.querySelector('#app') as HTMLElement);

Sorts the Grid data.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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.myGrid.current!.sortby('ContactName','asc');
  }
   
  public render() {
    return (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Groups by a column.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
import JqxButton from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>();
 
  private 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'
  };
 
 
  constructor(props: {}) {
    super(props);
    
    this.addGroup = this.addGroup.bind(this);
    this.removeGroup = this.removeGroup.bind(this);
    
    this.state = {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
    }
  }
  
  public render() {
    return (
      <div>
        <JqxGrid ref={this.myGrid}
                 width={800} source={this.state.source} columns={this.state.columns} groupable={true} autoheight={true} />
        <JqxButton width={100} onClick={this.addGroup}>Add Group</JqxButton>
        <JqxButton width={100} onClick={this.removeGroup}>Remove Group</JqxButton>
  </div>
    );
  }
  
  private addGroup() {
    this.myGrid.current!.addgroup('ContactName');
  }

  private  removeGroup() {
    this.myGrid.current!.removegroup('ContactName');
  }
}
  
ReactDOM.render(, document.querySelector('#app') as HTMLElement);

Clears all groups.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
import JqxButton from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>();
 
  private 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'
  };
 
 
  constructor(props: {}) {
    super(props);
    
    this.clearGroups = this.clearGroups.bind(this);
    
    this.state = {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
    }
  }
  
  public render() {
    return (
      <div>
        <JqxGrid ref={this.myGrid}
                 width={800} source={this.state.source} columns={this.state.columns} groupable={true} autoheight={true} />
        <JqxButton width={100} onClick={this.clearGroups}>Clear Groups</JqxButton>
  </div>
    );
  }
  
  private clearGroups() {
    this.myGrid.current!.cleargroups();
  }
}
  
ReactDOM.render(, document.querySelector('#app') as HTMLElement);

Collapses a group.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
import JqxButton from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>();
 
  private 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'
  };
 
 
  constructor(props: {}) {
    super(props);
    
    this.expandGroup = this.expandGroup.bind(this);
    this.collapseGroup = this.collapseGroup.bind(this);
    
    this.state = {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
    }
  }
  
  public render() {
    return (
      <div>
        <JqxGrid ref={this.myGrid}
                 width={800} source={this.state.source} columns={this.state.columns} groupable={true} groups={['ContactName']} autoheight={true} />
        <JqxButton width={100} onClick={this.expandGroup}>Expand Group</JqxButton>
        <JqxButton width={100} onClick={this.collapseGroup}>Collapse Group</JqxButton>
  </div>
    );
  }
  
  private expandGroup() {
    this.myGrid.current!.expandgroup(0);
  }

  private  collapseGroup() {
    this.myGrid.current!.collapsegroup(0);
  }
}
  
ReactDOM.render(, document.querySelector('#app') as HTMLElement);

Collapses all groups.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
import JqxButton from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>();
 
  private 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'
  };
 
 
  constructor(props: {}) {
    super(props);
    
    this.expandGroup = this.expandGroup.bind(this);
    this.collapseGroup = this.collapseGroup.bind(this);
    
    this.state = {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
    }
  }
  
  public render() {
    return (
      <div>
        <JqxGrid ref={this.myGrid}
                 width={800} source={this.state.source} columns={this.state.columns} groupable={true} groups={['ContactName']} autoheight={true} />
        <JqxButton width={110} onClick={this.expandGroup}>Expand Groups</JqxButton>
        <JqxButton width={110} onClick={this.collapseGroup}>Collapse Groups</JqxButton>
  </div>
    );
  }
  
  private expandGroup() {
    this.myGrid.current!.expandallgroups();
  }

  private  collapseGroup() {
    this.myGrid.current!.collapseallgroups();
  }
}
  
ReactDOM.render(, document.querySelector('#app') as HTMLElement);

Expands all groups.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
import JqxButton from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>();
 
  private 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'
  };
 
 
  constructor(props: {}) {
    super(props);
    
    this.expandGroup = this.expandGroup.bind(this);
    this.collapseGroup = this.collapseGroup.bind(this);
    
    this.state = {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
    }
  }
  
  public render() {
    return (
      <div>
        <JqxGrid ref={this.myGrid}
                 width={800} source={this.state.source} columns={this.state.columns} groupable={true} groups={['ContactName']} autoheight={true} />
        <JqxButton width={110} onClick={this.expandGroup}>Expand Groups</JqxButton>
        <JqxButton width={110} onClick={this.collapseGroup}>Collapse Groups</JqxButton>
  </div>
    );
  }
  
  private expandGroup() {
    this.myGrid.current!.expandallgroups();
  }

  private  collapseGroup() {
    this.myGrid.current!.collapseallgroups();
  }
}
  
ReactDOM.render(, document.querySelector('#app') as HTMLElement);

Expands a group.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
import JqxButton from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>();
 
  private 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'
  };
 
 
  constructor(props: {}) {
    super(props);
    
    this.expandGroup = this.expandGroup.bind(this);
    this.collapseGroup = this.collapseGroup.bind(this);
    
    this.state = {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
    }
  }
  
  public render() {
    return (
      <div>
        <JqxGrid ref={this.myGrid}
                 width={800} source={this.state.source} columns={this.state.columns} groupable={true} groups={['ContactName']} autoheight={true} />
        <JqxButton width={100} onClick={this.expandGroup}>Expand Group</JqxButton>
        <JqxButton width={100} onClick={this.collapseGroup}>Collapse Group</JqxButton>
  </div>
    );
  }
  
  private expandGroup() {
    this.myGrid.current!.expandgroup(0);
  }

  private  collapseGroup() {
    this.myGrid.current!.collapsegroup(0);
  }
}
  
ReactDOM.render(, document.querySelector('#app') as HTMLElement);

Gets the number of root groups.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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.myGrid.current!.getrootgroupscount();
  }
   
  public render() {
    return (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Gets a group. The method returns an object with details about the Group. The object has the following fields:

• group - group's name.
• level - group's level in the group's hierarchy.
• expanded - group's expand state.
• subgroups - an array of sub groups or null.
• subrows - an array of rows or null.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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.myGrid.current!.getgroup(0);
  }
   
  public render() {
    return (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Groups by a column.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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.myGrid.current!.insertgroup(0,'Title');
  }
   
  public render() {
    return (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Gets whether the user can group by a column. Returns a boolean value.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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.myGrid.current!.iscolumngroupable('ContactName');
  }
   
  public render() {
    return (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Removes a group at specific index.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
import JqxButton from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>();
 
  private 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'
  };
 
 
  constructor(props: {}) {
    super(props);
    
    this.removeGroupAt = this.removeGroupAt.bind(this);
    
    this.state = {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
    }
  }
  
  public render() {
    return (
      <div>
        <JqxGrid ref={this.myGrid}
                 width={800} source={this.state.source} columns={this.state.columns} groupable={true} autoheight={true} />
        <JqxButton width={150} onClick={this.removeGroupAt}>Remove First Group</JqxButton>
  </div>
    );
  }
  
  private removeGroupAt() {
    this.myGrid.current!.removegroupat('0');
  }
}
  
ReactDOM.render(, document.querySelector('#app') as HTMLElement);

Removes a group.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
import JqxButton from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>();
 
  private 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'
  };
 
 
  constructor(props: {}) {
    super(props);
    
    this.addGroup = this.addGroup.bind(this);
    this.removeGroup = this.removeGroup.bind(this);
    
    this.state = {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
    }
  }
  
  public render() {
    return (
      <div>
        <JqxGrid ref={this.myGrid}
                 width={800} source={this.state.source} columns={this.state.columns} groupable={true} autoheight={true} />
        <JqxButton width={100} onClick={this.addGroup}>Add Group</JqxButton>
        <JqxButton width={100} onClick={this.removeGroup}>Remove Group</JqxButton>
  </div>
    );
  }
  
  private addGroup() {
    this.myGrid.current!.addgroup('ContactName');
  }

  private  removeGroup() {
    this.myGrid.current!.removegroup('ContactName');
  }
}
  
ReactDOM.render(, document.querySelector('#app') as HTMLElement);

Adds a filter to the Grid.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>();
 
  private 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'
  };
 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
    }
  }
 
  public componentDidMount(): void {
    let filtergroup = new jqx.filter();
      let filter_or_operator = 1;
      let filtervalue = 'Maria';
      let filtercondition = 'contains';
      let filter = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
      filtergroup.addfilter(filter_or_operator, filter);
      this.myGrid.current!.addfilter('ContactName', filtergroup);
      this.myGrid.current!.applyfilters();
  }
  
  public render() {
    return (
      <JqxGrid ref={this.myGrid}
           width={850} source={this.state.source} columns={this.state.columns} filterable={true} autoheight={true} />
    );
  }
}
  
ReactDOM.render(, document.querySelector('#app') as HTMLElement);

Applies all filters to the Grid.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>();
 
  private 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'
  };
 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
    }
  }
 
  public componentDidMount(): void {
    let filtergroup = new jqx.filter();
      let filter_or_operator = 1;
      let filtervalue = 'Maria';
      let filtercondition = 'contains';
      let filter = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
      filtergroup.addfilter(filter_or_operator, filter);
      this.myGrid.current!.addfilter('ContactName', filtergroup);
      this.myGrid.current!.applyfilters();
  }
  
  public render() {
    return (
      <JqxGrid ref={this.myGrid}
           width={850} source={this.state.source} columns={this.state.columns} filterable={true} autoheight={true} />
    );
  }
}
  
ReactDOM.render(, document.querySelector('#app') as HTMLElement);

Clears all filters from the Grid. You can call the method with optional boolean parameter. If the parameter is "true" or you call the method without parameter, the Grid will clear the filters and refresh the Grid(default behavior). If the parameter is "false", the method will clear the filters without refreshing the Grid.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
import JqxButton from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>();
 
  private 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'
  };
 
 
  constructor(props: {}) {
    super(props);
    
    this.clearFilters = this.clearFilters.bind(this);
    
    this.state = {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
    }
  }
  
  public render() {
    return (
      <div>
        <JqxGrid ref={this.myGrid}
                 width={800} source={this.state.source} columns={this.state.columns} filterable={true} autoheight={true} />
        <JqxButton width={100} onClick={this.clearFilters}>Clear Filters</JqxButton>
  </div>
    );
  }
  
  private clearFilters() {
    this.myGrid.current!.clearfilters();
  }
}
  
ReactDOM.render(, document.querySelector('#app') as HTMLElement);

Gets the information about the Grid filters. The method returns an array of the applied filters. The returned information includes the filter objects and filter columns. Each filter in the Array has the following fields:

• filter - a filter object which may contain one or more filters.
  Properties and Methods of the filter object.
  • getfilters - returns an array of all filters in the filter object. Each filter in the Array has:
    • value - filter's value.
    • id - filter's id.
    • condition - filter's operator. For string filter the value could be: 'EMPTY', 'NOT_EMPTY', 'CONTAINS', 'CONTAINS_CASE_SENSITIVE', 'DOES_NOT_CONTAIN', 'DOES_NOT_CONTAIN_CASE_SENSITIVE', 'STARTS_WITH', 'STARTS_WITH_CASE_SENSITIVE', 'ENDS_WITH', 'ENDS_WITH_CASE_SENSITIVE', 'EQUAL', 'EQUAL_CASE_SENSITIVE', 'NULL', 'NOT_NULL. For Date and number filter the value could be: 'EQUAL', 'NOT_EQUAL', 'LESS_THAN', 'LESS_THAN_OR_EQUAL', 'GREATER_THAN', 'GREATER_THAN_OR_EQUAL', 'NULL', 'NOT_NULL'. For boolean filter, the value could be: 'EQUAL', 'NOT_EQUAL'
    • type - filter's type - 'stringfilter', 'numericfilter', 'booleanfilter' or 'datefilter'.
  • operator - 'and' or 'or'. Determines the connection between the filters in the group.
• datafield - the column's datafield.
• displayfield - the column's display field.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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.myGrid.current!.getfilterinformation();
  }
   
  public render() {
    return (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Method: getcolumnat

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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.myGrid.current!.getcolumnat(3);
  }
   
  public render() {
    return (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Removes a filter from the Grid.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
import JqxButton from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>();
 
  private 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'
  };
 
 
  constructor(props: {}) {
    super(props);
    
    this.removeFilter = this.removeFilter.bind(this);
    
    this.state = {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
    }
  }
  
  public render() {
    return (
      <div>
        <JqxGrid ref={this.myGrid}
                 width={800} source={this.state.source} columns={this.state.columns} filterable={true} autoheight={true} />
        <JqxButton width={200} onClick={this.removeFilter}>Remove Contact Name Filter</JqxButton>
  </div>
    );
  }
  
  private removeFilter() {
    this.myGrid.current!.removefilter('ContactName');
  }
}
  
ReactDOM.render(, document.querySelector('#app') as HTMLElement);

Refreshes the filter row and updates the filter widgets. The filter row's widgets are synchronized with the applied filters.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
import JqxButton from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>();
 
  private 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'
  };
 
 
  constructor(props: {}) {
    super(props);
    
    this.addFilters = this.addFilters.bind(this);
    this.refresh = this.refresh.bind(this);
    
    this.state = {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
    }
  }
  
  public render() {
    return (
      <div>
        <JqxGrid ref={this.myGrid}
                 width={800} source={this.state.source} columns={this.state.columns} filterable={true} showfilterrow={true} autoheight={true} />
        <JqxButton width={200} onClick={this.refresh}>Refresh filter row</JqxButton>
  </div>
    );
  }
  
  private addFilters() {
    let filtergroup = new jqx.filter();
    let filter_or_operator = 1;
    let filtervalue = 'Maria';
    let filtercondition = 'contains';
    let filter = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
    filtergroup.addfilter(filter_or_operator, filter);
    this.myGrid.current!.addfilter('ContactName', filtergroup);
    this.myGrid.current!.applyfilters();
  }

  private  refresh() {
    this.addFilters()
    this.myGrid.current!.refreshfilterrow();
  }
}
  
ReactDOM.render(, document.querySelector('#app') as HTMLElement);

Navigates to a page when the Grid paging is enabled i.e when the pageable property value is true.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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.myGrid.current!.gotopage(2);
  }
   
  public render() {
    return (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Navigates to a previous page when the Grid paging is enabled i.e when the pageable property value is true.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
import JqxButton from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>();
 
  private 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'
  };
 
 
  constructor(props: {}) {
    super(props);
    
    this.prevPage = this.prevPage.bind(this);
    this.nextPage = this.nextPage.bind(this);
    
    this.state = {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
    }
  }
  
  public render() {
    return (
      <div>
        <JqxGrid ref={this.myGrid}
                 width={800} source={this.state.source} columns={this.state.columns} pageable={true} pagesize={1} autoheight={true} />
        <JqxButton width={100} onClick={this.prevPage}>Previous Page</JqxButton>
        <JqxButton width={100} onClick={this.nextPage}>Next Page</JqxButton>
  </div>
    );
  }
  
  private prevPage() {
    this.myGrid.current!.gotoprevpage();
  }

  private  nextPage() {
    this.myGrid.current!.gotonextpage();
  }
}
  
ReactDOM.render(, document.querySelector('#app') as HTMLElement);

Navigates to a next page when the Grid paging is enabled i.e when the pageable property value is true.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
import JqxButton from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>();
 
  private 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'
  };
 
 
  constructor(props: {}) {
    super(props);
    
    this.prevPage = this.prevPage.bind(this);
    this.nextPage = this.nextPage.bind(this);
    
    this.state = {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
    }
  }
  
  public render() {
    return (
      <div>
        <JqxGrid ref={this.myGrid}
                 width={800} source={this.state.source} columns={this.state.columns} pageable={true} pagesize={1} autoheight={true} />
        <JqxButton width={100} onClick={this.prevPage}>Previous Page</JqxButton>
        <JqxButton width={100} onClick={this.nextPage}>Next Page</JqxButton>
  </div>
    );
  }
  
  private prevPage() {
    this.myGrid.current!.gotoprevpage();
  }

  private  nextPage() {
    this.myGrid.current!.gotonextpage();
  }
}
  
ReactDOM.render(, document.querySelector('#app') as HTMLElement);

Adds a new row or multiple rows.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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.myGrid.current!.addrow(1,{});
  }
   
  public render() {
    return (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Shows the cell's editor.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
import JqxButton from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>();
 
  private 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'
  };
 
 
  constructor(props: {}) {
    super(props);
    
    this.beginEdit = this.beginEdit.bind(this);
    this.endEdit = this.endEdit.bind(this);
    
    this.state = {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
    }
  }
  
  public render() {
    return (
      <div>
        <JqxGrid ref={this.myGrid}
                 width={800} source={this.state.source} columns={this.state.columns} editable={true} autoheight={true} />
        <JqxButton width={100} onClick={this.beginEdit}>Begin Cell Edit</JqxButton>
        <JqxButton width={100} onClick={this.endEdit}>End Cell Edit</JqxButton>
  </div>
    );
  }
  
  private beginEdit() {
    this.myGrid.current!.begincelledit(1, 'Title');
  }

  private  endEdit() {
    this.myGrid.current!.endcelledit(1, 'Title', true);
  }
}
  
ReactDOM.render(, document.querySelector('#app') as HTMLElement);

Shows the cell editors for an entire row.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
import JqxButton from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>();
 
  private 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'
  };
 
 
  constructor(props: {}) {
    super(props);
    
    this.beginEdit = this.beginEdit.bind(this);
    this.endEdit = this.endEdit.bind(this);
    
    this.state = {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
    }
  }
  
  public render() {
    return (
      <div>
        <JqxGrid ref={this.myGrid}
                 width={800} source={this.state.source} columns={this.state.columns} editable={true} autoheight={true} />
        <JqxButton width={100} onClick={this.beginEdit}>Begin Row Edit</JqxButton>
        <JqxButton width={100} onClick={this.endEdit}>End Row Edit</JqxButton>
  </div>
    );
  }
  
  private beginEdit() {
    this.myGrid.current!.beginrowedit(1);
  }

  private  endEdit() {
    this.myGrid.current!.endrowedit(1, true);
  }
}
  
ReactDOM.render(, document.querySelector('#app') as HTMLElement);

Closes a column's menu.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
import JqxButton from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>();
 
  private 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'
  };
 
 
  constructor(props: {}) {
    super(props);
    
    this.openMenu = this.openMenu.bind(this);
    this.closeMenu = this.closeMenu.bind(this);
    
    this.state = {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
    }
  }
  
  public render() {
    return (
      <div>
        <JqxGrid ref={this.myGrid}
                 width={800} source={this.state.source} columns={this.state.columns} filterable={true} autoheight={true} />
        <JqxButton width={100} onClick={this.openMenu}>Open Menu</JqxButton>
        <JqxButton width={100} onClick={this.closeMenu}>Close Menu</JqxButton>
  </div>
    );
  }
  
  private openMenu() {
    this.myGrid.current!.openmenu('ContactName');
  }

  private  closeMenu() {
    this.myGrid.current!.closemenu();
  }
}
  
ReactDOM.render(, document.querySelector('#app') as HTMLElement);

Deletes a row or multiple rows. Returns a boolean value.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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.myGrid.current!.deleterow(1);
  }
   
  public render() {
    return (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Hides the edit cell's editor and saves or cancels the changes.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
import JqxButton from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>();
 
  private 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'
  };
 
 
  constructor(props: {}) {
    super(props);
    
    this.beginEdit = this.beginEdit.bind(this);
    this.endEdit = this.endEdit.bind(this);
    
    this.state = {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
    }
  }
  
  public render() {
    return (
      <div>
        <JqxGrid ref={this.myGrid}
                 width={800} source={this.state.source} columns={this.state.columns} editable={true} autoheight={true} />
        <JqxButton width={100} onClick={this.beginEdit}>Begin Cell Edit</JqxButton>
        <JqxButton width={100} onClick={this.endEdit}>End Cell Edit</JqxButton>
  </div>
    );
  }
  
  private beginEdit() {
    this.myGrid.current!.begincelledit(1, 'Title');
  }

  private  endEdit() {
    this.myGrid.current!.endcelledit(1, 'Title', true);
  }
}
  
ReactDOM.render(, document.querySelector('#app') as HTMLElement);

Hides the edited row's editors and saves or cancels the changes.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
import JqxButton from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>();
 
  private 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'
  };
 
 
  constructor(props: {}) {
    super(props);
    
    this.beginEdit = this.beginEdit.bind(this);
    this.endEdit = this.endEdit.bind(this);
    
    this.state = {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
    }
  }
  
  public render() {
    return (
      <div>
        <JqxGrid ref={this.myGrid}
                 width={800} source={this.state.source} columns={this.state.columns} editable={true} autoheight={true} />
        <JqxButton width={100} onClick={this.beginEdit}>Begin Row Edit</JqxButton>
        <JqxButton width={100} onClick={this.endEdit}>End Row Edit</JqxButton>
  </div>
    );
  }
  
  private beginEdit() {
    this.myGrid.current!.beginrowedit(1);
  }

  private  endEdit() {
    this.myGrid.current!.endrowedit(1, true);
  }
}
  
ReactDOM.render(, document.querySelector('#app') as HTMLElement);

Gets a cell. Returns an object with the following fields:

• value - cell's value.
• row - cell's row number.
• column - column's datafield.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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.myGrid.current!.getcell(1,'ContactName');
  }
   
  public render() {
    return (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Gets a cell at specific position. Returns an object with the following fields:

• value - cell's value.
• row - cell's row number.
• column - column's datafield.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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.myGrid.current!.getcellatposition(10,100);
  }
   
  public render() {
    return (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Gets the text 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 JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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.myGrid.current!.getcelltext(1,'ContactName');
  }
   
  public render() {
    return (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Gets the text 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 JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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.myGrid.current!.getcelltextbyid(1,'ContactName');
  }
   
  public render() {
    return (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Gets the 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 JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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.myGrid.current!.getcellvaluebyid(1,'ContactName');
  }
   
  public render() {
    return (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Gets the 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 JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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.myGrid.current!.getcellvalue(1,'ContactName');
  }
   
  public render() {
    return (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Returns whether the binding is completed and if the result is true, this means that you can invoke methods and set properties. Otherwise, if the binding is not completed and you try to set a property or invoke a method, the widget will throw an exception.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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.myGrid.current!.isBindingCompleted();
  }
   
  public render() {
    return (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Displays a column's menu.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
import JqxButton from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>();
 
  private 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'
  };
 
 
  constructor(props: {}) {
    super(props);
    
    this.openMenu = this.openMenu.bind(this);
    this.closeMenu = this.closeMenu.bind(this);
    
    this.state = {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
    }
  }
  
  public render() {
    return (
      <div>
        <JqxGrid ref={this.myGrid}
                 width={800} source={this.state.source} columns={this.state.columns} filterable={true} autoheight={true} />
        <JqxButton width={100} onClick={this.openMenu}>Open Menu</JqxButton>
        <JqxButton width={100} onClick={this.closeMenu}>Close Menu</JqxButton>
  </div>
    );
  }
  
  private openMenu() {
    this.myGrid.current!.openmenu('ContactName');
  }

  private  closeMenu() {
    this.myGrid.current!.closemenu();
  }
}
  
ReactDOM.render(, document.querySelector('#app') as HTMLElement);

Sets a new value to a cell.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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.myGrid.current!.setcellvalue(1,'ContactName','New Name');
  }
   
  public render() {
    return (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets a new value to a cell.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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.myGrid.current!.setcellvaluebyid(1,'ContactName','New Name');
  }
   
  public render() {
    return (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Displays a validation popup below a Grid cell.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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.myGrid.current!.showvalidationpopup(1,'ContactName','Error message');
  }
   
  public render() {
    return (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Updates a row or multiple rows.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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.myGrid.current!.updaterow(1,{ContactName: 'New Name'});
  }
   
  public render() {
    return (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
      />
    );
  }

}
 
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 JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
import JqxButton from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>();
 
  private 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'
  };
 
 
  constructor(props: {}) {
    super(props);
    
    this.clearSelection = this.clearSelection.bind(this);
    
    this.state = {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
    }
  }
  
  public render() {
    return (
      <div>
        <JqxGrid ref={this.myGrid}
                 width={800} source={this.state.source} columns={this.state.columns} selectionmode={'multiplecells'} autoheight={true} />
        <JqxButton width={200} onClick={this.clearSelection}>Clear Selection</JqxButton>
  </div>
    );
  }
  
  private clearSelection() {
    this.myGrid.current!.clearselection();
  }
}
  
ReactDOM.render(, document.querySelector('#app') as HTMLElement);

The expected selection mode is 'singlerow', 'multiplerows' or 'multiplerowsextended'

Gets the bound index of the selected row. Returns -1, if there's no selection.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
import JqxButton from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>();
 
  private 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'
  };
 
 
  constructor(props: {}) {
    super(props);
    
    this.select = this.select.bind(this);
    this.unselect = this.unselect.bind(this);
    this.getSelected = this.getSelected.bind(this);
    
    this.state = {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
    }
  }
  
  public render() {
    return (
      <div>
        <JqxGrid ref={this.myGrid}
                 width={800} source={this.state.source} columns={this.state.columns} autoheight={true} />
        <JqxButton width={100} onClick={this.select}>Select row</JqxButton>
        <JqxButton width={100} onClick={this.unselect}>Unselect Row</JqxButton>
        <JqxButton width={160} onClick={this.getSelected}>Get selected row index</JqxButton>
  </div>
    );
  }
  
  private select() {
    this.myGrid.current!.selectrow(1);
  }

  private  unselect() {
    this.myGrid.current!.unselectrow(1);
  }

  private  getSelected() {
    const selected = this.myGrid.current!.getselectedrowindex();
    console.log(selected);
  }
}
  
ReactDOM.render(, document.querySelector('#app') as HTMLElement);

The expected selection mode is 'singlerow', 'multiplerows' or 'multiplerowsextended'

Gets the indexes of the selected rows. Returns an array of the selected rows.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
import JqxButton from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>();
 
  private 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'
  };
 
 
  constructor(props: {}) {
    super(props);
    
    this.getSelectedRowIndexes = this.getSelectedRowIndexes.bind(this);
    
    this.state = {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
    }
  }
  
  public render() {
    return (
      <div>
        <JqxGrid ref={this.myGrid}
                 width={800} source={this.state.source} columns={this.state.columns} selectionmode={'multiplerows'} autoheight={true} />
        <JqxButton width={200} onClick={this.getSelectedRowIndexes}>Get selected row indexes</JqxButton>
  </div>
    );
  }
  
  private getSelectedRowIndexes() {
    const selected = this.myGrid.current!.getselectedrowindexes();
    console.log(selected);
  }
}
  
ReactDOM.render(, document.querySelector('#app') as HTMLElement);

The expected selection mode is 'singlecell', 'multiplecells' or 'multiplecellsextended'

Gets the selected cell. The returned value is an object with two fields: 'rowindex' - the row's bound index and 'datafield' - the column's datafield.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
import JqxButton from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>();
 
  private 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'
  };
 
 
  constructor(props: {}) {
    super(props);
    
    this.select = this.select.bind(this);
    this.unselect = this.unselect.bind(this);
    this.getSelected = this.getSelected.bind(this);
    
    this.state = {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
    }
  }
  
  public render() {
    return (
      <div>
        <JqxGrid ref={this.myGrid}
                 width={800} source={this.state.source} columns={this.state.columns} selectionmode={'singlecell'} autoheight={true} />
        <JqxButton width={100} onClick={this.select}>Select cell</JqxButton>
        <JqxButton width={100} onClick={this.unselect}>Unselect Cell</JqxButton>
        <JqxButton width={140} onClick={this.getSelected}>Get selected cell</JqxButton>
  </div>
    );
  }
  
  private select() {
    this.myGrid.current!.selectcell(1, 'ContactName');
  }

  private  unselect() {
    this.myGrid.current!.unselectcell(1, 'ContactName');
  }

  private  getSelected() {
    const selected = this.myGrid.current!.getselectedcell();
    console.log(selected);
  }
}
  
ReactDOM.render(, document.querySelector('#app') as HTMLElement);

The expected selection mode is 'singlecell', 'multiplecells' or 'multiplecellsextended'

Gets all selected cells. Returns an array of all selected cells. Each cell in the array is an object with two fields: 'rowindex' - the row's bound index and 'datafield' - the column's datafield.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
import JqxButton from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>();
 
  private 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'
  };
 
 
  constructor(props: {}) {
    super(props);
    
    this.getSelectedCells = this.getSelectedCells.bind(this);
    
    this.state = {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
    }
  }
  
  public render() {
    return (
      <div>
        <JqxGrid ref={this.myGrid}
                 width={800} source={this.state.source} columns={this.state.columns} selectionmode={'multiplecells'} autoheight={true} />
        <JqxButton width={200} onClick={this.getSelectedCells}>Get selected cells</JqxButton>
  </div>
    );
  }
  
  private getSelectedCells() {
    const selected = this.myGrid.current!.getselectedcells();
    console.log(selected);
  }
}
  
ReactDOM.render(, document.querySelector('#app') as HTMLElement);

The expected selection mode is 'singlecell', 'multiplecells' or 'multiplecellsextended'

Selects a cell.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
import JqxButton from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>();
 
  private 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'
  };
 
 
  constructor(props: {}) {
    super(props);
    
    this.select = this.select.bind(this);
    this.unselect = this.unselect.bind(this);
    this.getSelected = this.getSelected.bind(this);
    
    this.state = {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
    }
  }
  
  public render() {
    return (
      <div>
        <JqxGrid ref={this.myGrid}
                 width={800} source={this.state.source} columns={this.state.columns} selectionmode={'singlecell'} autoheight={true} />
        <JqxButton width={100} onClick={this.select}>Select cell</JqxButton>
        <JqxButton width={100} onClick={this.unselect}>Unselect Cell</JqxButton>
        <JqxButton width={140} onClick={this.getSelected}>Get selected cell</JqxButton>
  </div>
    );
  }
  
  private select() {
    this.myGrid.current!.selectcell(1, 'ContactName');
  }

  private  unselect() {
    this.myGrid.current!.unselectcell(1, 'ContactName');
  }

  private  getSelected() {
    const selected = this.myGrid.current!.getselectedcell();
    console.log(selected);
  }
}
  
ReactDOM.render(, document.querySelector('#app') as HTMLElement);

The selection mode should be set to: 'multiplerows' or 'multiplerowsextended'

Selects all Grid rows.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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.myGrid.current!.selectallrows();
  }
   
  public render() {
    return (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

The expected selection mode is 'singlerow', 'multiplerows' or 'multiplerowsextended'

Selects a row.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
import JqxButton from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>();
 
  private 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'
  };
 
 
  constructor(props: {}) {
    super(props);
    
    this.select = this.select.bind(this);
    this.unselect = this.unselect.bind(this);
    this.getSelected = this.getSelected.bind(this);
    
    this.state = {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
    }
  }
  
  public render() {
    return (
      <div>
        <JqxGrid ref={this.myGrid}
                 width={800} source={this.state.source} columns={this.state.columns} autoheight={true} />
        <JqxButton width={100} onClick={this.select}>Select row</JqxButton>
        <JqxButton width={100} onClick={this.unselect}>Unselect Row</JqxButton>
        <JqxButton width={160} onClick={this.getSelected}>Get selected row index</JqxButton>
  </div>
    );
  }
  
  private select() {
    this.myGrid.current!.selectrow(1);
  }

  private  unselect() {
    this.myGrid.current!.unselectrow(1);
  }

  private  getSelected() {
    const selected = this.myGrid.current!.getselectedrowindex();
    console.log(selected);
  }
}
  
ReactDOM.render(, document.querySelector('#app') as HTMLElement);

The expected selection mode is 'singlerow', 'multiplerows' or 'multiplerowsextended'

Unselects a row.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
import JqxButton from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>();
 
  private 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'
  };
 
 
  constructor(props: {}) {
    super(props);
    
    this.select = this.select.bind(this);
    this.unselect = this.unselect.bind(this);
    this.getSelected = this.getSelected.bind(this);
    
    this.state = {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
    }
  }
  
  public render() {
    return (
      <div>
        <JqxGrid ref={this.myGrid}
                 width={800} source={this.state.source} columns={this.state.columns} autoheight={true} />
        <JqxButton width={100} onClick={this.select}>Select row</JqxButton>
        <JqxButton width={100} onClick={this.unselect}>Unselect Row</JqxButton>
        <JqxButton width={160} onClick={this.getSelected}>Get selected row index</JqxButton>
  </div>
    );
  }
  
  private select() {
    this.myGrid.current!.selectrow(1);
  }

  private  unselect() {
    this.myGrid.current!.unselectrow(1);
  }

  private  getSelected() {
    const selected = this.myGrid.current!.getselectedrowindex();
    console.log(selected);
  }
}
  
ReactDOM.render(, document.querySelector('#app') as HTMLElement);

The expected selection mode is 'singlecell', 'multiplecells' or 'multiplecellsextended'

Unselects a cell.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
import JqxButton from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>();
 
  private 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'
  };
 
 
  constructor(props: {}) {
    super(props);
    
    this.select = this.select.bind(this);
    this.unselect = this.unselect.bind(this);
    this.getSelected = this.getSelected.bind(this);
    
    this.state = {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
    }
  }
  
  public render() {
    return (
      <div>
        <JqxGrid ref={this.myGrid}
                 width={800} source={this.state.source} columns={this.state.columns} selectionmode={'singlecell'} autoheight={true} />
        <JqxButton width={100} onClick={this.select}>Select cell</JqxButton>
        <JqxButton width={100} onClick={this.unselect}>Unselect Cell</JqxButton>
        <JqxButton width={140} onClick={this.getSelected}>Get selected cell</JqxButton>
  </div>
    );
  }
  
  private select() {
    this.myGrid.current!.selectcell(1, 'ContactName');
  }

  private  unselect() {
    this.myGrid.current!.unselectcell(1, 'ContactName');
  }

  private  getSelected() {
    const selected = this.myGrid.current!.getselectedcell();
    console.log(selected);
  }
}
  
ReactDOM.render(, document.querySelector('#app') as HTMLElement);

Gets the aggregated data of a Grid column. Returns a JSON object. Each field name is the aggregate's type('min', 'max', 'sum', etc.).

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>();
 
  private 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'
  };
 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title', aggregates: ['count'] },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country', aggregates: ['count'] }
        ]
    }
  }
 
  public componentDidMount(): void {
    const data = this.myGrid.current!.getcolumnaggregateddata('Country', ['count']);
      console.log(data);
  }
  
  public render() {
    return (
      <JqxGrid ref={this.myGrid}
                 width={800} source={this.state.source} columns={this.state.columns} showaggregates={true} showstatusbar={true} autoheight={true} />
    );
  }
}
  
ReactDOM.render(, document.querySelector('#app') as HTMLElement);

Refreshes the Aggregates in the Grid's status bar.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>();
 
  private 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'
  };
 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title', aggregates: ['count'] },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country', aggregates: ['count'] }
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myGrid.current!.refreshaggregates();
  }
  
  public render() {
    return (
      <JqxGrid ref={this.myGrid}
                 width={800} source={this.state.source} columns={this.state.columns} showaggregates={true} showstatusbar={true} autoheight={true} />
    );
  }
}
  
ReactDOM.render(, document.querySelector('#app') as HTMLElement);

Renders the aggregates in the Grid's status bar.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>();
 
  private 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'
  };
 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title', aggregates: ['count'] },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country', aggregates: ['count'] }
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myGrid.current!.renderaggregates();
  }
  
  public render() {
    return (
      <JqxGrid ref={this.myGrid}
                 width={800} source={this.state.source} columns={this.state.columns} showaggregates={true} showstatusbar={true} autoheight={true} />
    );
  }
}
  
ReactDOM.render(, document.querySelector('#app') as HTMLElement);

Exports all rows loaded within the Grid to Excel, XML, CSV, TSV, HTML or JSON.

var data = $("#jqxgrid").jqxGrid('exportdata', 'json');

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>(); 
 
  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.myGrid.current!.exportdata('xls','grid');
  }
   
  public render() {
    return (
      <JqxGrid ref={this.myGrid} 
        width={850} source={this.state.source} columns={this.state.columns} autoheight={true}
      />
    );
  }

}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Gets the Grid's state. the getstate method gets the following information: 'sort column, sort order, page number, page size, applied filters and filter row values, column widths and visibility, cells and rows selection and groups.

• width - the Grid's width.
• height - the Grid's height.
• pagenum - the Grid's page number.
• pagesize - the Grid's page size.
• pagesizeoptions - the Grid's page size options - an array of the available page sizes.
• sortcolumn - the Grid's sort column. The value is the column's datafield or null, if sorting is not applied.
• sortdirection - JSON object with two boolean fields: 'ascending' and 'descending'.
• filters - the applied filters. See the 'getfilterinformation' method.
• groups - the Grid's groups array which contains the grouped columns data fields.
• columns - an array of Columns. Each column in the array has the following fields:
  • width - column's width.
  • hidden - column's visible state.
  • pinned - column's pinned state.
  • groupable - column's groupable state.
  • resizable - column's resizable state.
  • draggable - column's draggable state.
  • text - column's text.
  • align - column's align.
  • cellsalign - column's cells align.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
import JqxButton from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>();
 
  private 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'
  };
 
 
  constructor(props: {}) {
    super(props);
    
    this.savestate = this.savestate.bind(this);
    this.loadstate = this.loadstate.bind(this);
    this.getstate = this.getstate.bind(this);
    
    this.state = {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
    }
  }
  
  public render() {
    return (
      <div>
        <JqxGrid ref={this.myGrid}
                 width={800} source={this.state.source} columns={this.state.columns} sortable={true} filterable={true} autoheight={true} />
        <JqxButton width={100} onClick={this.savestate}>Save state</JqxButton>
        <JqxButton width={100} onClick={this.loadstate}>Load State</JqxButton>
        <JqxButton width={100} onClick={this.getstate}>Get state</JqxButton>
  </div>
    );
  }
  
  private savestate() {
    this.myGrid.current!.savestate();
  }

  private  loadstate() {
    this.myGrid.current!.loadstate();
  }

  private  getstate() {
    const state = this.myGrid.current!.getstate();
    console.log(state);
  }
}
  
ReactDOM.render(, document.querySelector('#app') as HTMLElement);

Loads the Grid's state. the loadstate method loads the following information: 'sort column, sort order, page number, page size, applied filters and filter row values, column widths and visibility, cells and rows selection and groups.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
import JqxButton from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>();
 
  private 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'
  };
 
 
  constructor(props: {}) {
    super(props);
    
    this.savestate = this.savestate.bind(this);
    this.loadstate = this.loadstate.bind(this);
    this.getstate = this.getstate.bind(this);
    
    this.state = {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
    }
  }
  
  public render() {
    return (
      <div>
        <JqxGrid ref={this.myGrid}
                 width={800} source={this.state.source} columns={this.state.columns} sortable={true} filterable={true} autoheight={true} />
        <JqxButton width={100} onClick={this.savestate}>Save state</JqxButton>
        <JqxButton width={100} onClick={this.loadstate}>Load State</JqxButton>
        <JqxButton width={100} onClick={this.getstate}>Get state</JqxButton>
  </div>
    );
  }
  
  private savestate() {
    this.myGrid.current!.savestate();
  }

  private  loadstate() {
    this.myGrid.current!.loadstate();
  }

  private  getstate() {
    const state = this.myGrid.current!.getstate();
    console.log(state);
  }
}
  
ReactDOM.render(, document.querySelector('#app') as HTMLElement);

Saves the Grid's current state. the savestate method saves the following information: 'sort column, sort order, page number, page size, applied filters and filter row values, column widths and visibility, cells and rows selection and groups.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
import JqxButton from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
 
class App extends React.PureComponent<{}, IGridProps> {
  private myGrid = React.createRef<JqxGrid>();
 
  private 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'
  };
 
 
  constructor(props: {}) {
    super(props);
    
    this.savestate = this.savestate.bind(this);
    this.loadstate = this.loadstate.bind(this);
    this.getstate = this.getstate.bind(this);
    
    this.state = {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
    }
  }
  
  public render() {
    return (
      <div>
        <JqxGrid ref={this.myGrid}
                 width={800} source={this.state.source} columns={this.state.columns} sortable={true} filterable={true} autoheight={true} />
        <JqxButton width={100} onClick={this.savestate}>Save state</JqxButton>
        <JqxButton width={100} onClick={this.loadstate}>Load State</JqxButton>
        <JqxButton width={100} onClick={this.getstate}>Get state</JqxButton>
  </div>
    );
  }
  
  private savestate() {
    this.myGrid.current!.savestate();
  }

  private  loadstate() {
    this.myGrid.current!.loadstate();
  }

  private  getstate() {
    const state = this.myGrid.current!.getstate();
    console.log(state);
  }
}
  
ReactDOM.render(, document.querySelector('#app') as HTMLElement);