React FancyGrid

App.js

import React, { Component } from 'react';

import { Fancy, Grid } from 'fancygrid-react';

import 'fancygrid/client/modules/sort.min';
import 'fancygrid/client/modules/dom.min';
import 'fancygrid/client/modules/edit.min';
import 'fancygrid/client/modules/grid.min';
import 'fancygrid/client/modules/selection.min';
import 'fancygrid/client/modules/menu.min';
import 'fancygrid/client/modules/exporter';
import 'fancygrid/client/modules/excel.min';

import 'fancygrid/client/fancy.min.css';
Fancy.stylesLoaded = true;

class App extends Component {
  constructor(props) {
    super(props);
  }

  render() {
      return (
        <div>
          <Grid
            title='My Grid'
            selModel='rows'
            theme='gray'
            height={400}
            width={500}
            exporter={true}
            defaults={{sortable: true}}
            trackOver={true}
            events={this.getEvents()}
            columns={this.getColumns()}    
            contextmenu={true}
            data={this.getData()}>
          </Grid>
        </div>
      );
    }
  
  getColumns() {
    return [{
      type: 'select'
    },{
      index: 'company',
      title: 'Company',
      type: 'string',
      width: 100
    },{
      index: 'name',
      title: 'Name',
      type: 'string',
      width: 100
    },{
      index: 'surname',
      title: 'Sur Name',
      type: 'string',
      width: 100
    },{
      index: 'age',
      title: 'Age',
      type: 'number',
      width: 100
    }];
  }
  
  getData() {
    return [
      {name: 'Ted', surname: 'Smith', company: 'Electrical Systems', age: 30},
      {name: 'Ed', surname: 'Johnson', company: 'Energy and Oil', age: 35},
      {name: 'Sam', surname: 'Williams',  company: 'Airbus', age: 38},
      {name: 'Alexander', surname: 'Brown', company: 'Renault', age: 24},
      {name: 'Nicholas', surname: 'Miller', company: 'Adobe', age: 33}
    ];
  }
  
  getEvents() {
    return [{
    init: this.onGridInit
    }];
  }

  onGridInit = (grid) => {
    setTimeout(function(){
    grid.setTitle('New Title');
    }, 1000);
  }
}

export default App;