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);