How to use react-data-grid - 10 common examples

/// 
/// 
/// 

import * as React from 'react';
import * as ReactDataGrid from 'react-data-grid';
import * as ReactDataGridPlugins from 'react-data-grid/addons';
import * as faker from 'faker';

var Editors = ReactDataGridPlugins.Editors;
var Toolbar = ReactDataGridPlugins.Toolbar;
var AutoCompleteEditor = Editors.AutoComplete;
var DropDownEditor = Editors.DropDownEditor;

faker.locale = 'en_GB';

function createFakeRowObjectData(index:number):Object {
    return {
        id: 'id_' + index,
        avartar: faker.image.avatar(),
        county: faker.address.county(),
        email: faker.internet.email(),
        title: faker.name.prefix(),
        firstName: faker.name.firstName(),
        lastName: faker.name.lastName(),
        street: faker.address.streetName(),

/// 
/// 
/// 

import * as React from 'react';
import * as ReactDataGrid from 'react-data-grid';
import * as ReactDataGridPlugins from 'react-data-grid/addons';
import * as faker from 'faker';

var Editors = ReactDataGridPlugins.Editors;
var Toolbar = ReactDataGridPlugins.Toolbar;
var AutoCompleteEditor = Editors.AutoComplete;
var DropDownEditor = Editors.DropDownEditor;

faker.locale = 'en_GB';

function createFakeRowObjectData(index:number):Object {
    return {
        id: 'id_' + index,
        avartar: faker.image.avatar(),
        county: faker.address.county(),
        email: faker.internet.email(),
        title: faker.name.prefix(),
        firstName: faker.name.firstName(),
        lastName: faker.name.lastName(),
        street: faker.address.streetName(),
        zipCode: faker.address.zipCode(),

const PropTypes = require('prop-types');
const { editors } = require('react-data-grid');

class AttributeEditor extends editors.SimpleTextEditor {
    static propTypes = {
        onTemporaryChanges: PropTypes.func
    };
    static defaultProps = {
        onTemporaryChanges: () => {}
    };
    componentDidMount() {
        if (this.props.onTemporaryChanges) {
            this.props.onTemporaryChanges(true);
        }
    }
    componentWillUnmount() {
        // needs to be detouched.
        // Otherwise this will trigger before other events out of the editors
        // and so the tempChanges seems to be not present.
        if (this.props.onTemporaryChanges) {

import * as React from 'react';
import ReactDataGrid = require('react-data-grid');
import * as ReactDataGridPlugins from 'react-data-grid/addons';
import faker = require('faker');

var Editors = ReactDataGridPlugins.Editors;
var Toolbar = ReactDataGridPlugins.Toolbar;
var AutoCompleteEditor = Editors.AutoComplete;
var DropDownEditor = Editors.DropDownEditor;

faker.locale = 'en_GB';

function createFakeRowObjectData(index:number):Object {
    return {
        id: 'id_' + index,
        avartar: faker.image.avatar(),
        county: faker.address.county(),
        email: faker.internet.email(),
        title: faker.name.prefix(),
        firstName: faker.name.firstName(),
        lastName: faker.name.lastName(),
        street: faker.address.streetName(),

];

var titles = ['Dr.', 'Mr.', 'Mrs.', 'Miss', 'Ms.'];

var columns:ReactDataGrid.Column[] = [
    {
        key: 'id',
        name: 'ID',
        width: 80,
        resizable: true
    },
    {
        key: 'avartar',
        name: 'Avartar',
        width: 60,
        formatter: ReactDataGridPlugins.Formatters.ImageFormatter,
        resizable: true,
        headerRenderer: 
    },
    {
        key: 'county',
        name: 'County',
        editor: ,
        width: 200,
        resizable: true
    },
    {
        key: 'title',
        name: 'Title',
        editor: ,
        width: 200,
        resizable: true,

];

var titles = ['Dr.', 'Mr.', 'Mrs.', 'Miss', 'Ms.'];

var columns:ReactDataGrid.Column[] = [
    {
        key: 'id',
        name: 'ID',
        width: 80,
        resizable: true
    },
    {
        key: 'avartar',
        name: 'Avartar',
        width: 60,
        formatter: ReactDataGridPlugins.Formatters.ImageFormatter,
        resizable: true,
        headerRenderer: 
    },
    {
        key: 'county',
        name: 'County',
        editor: ,
        width: 200,
        resizable: true
    },
    {
        key: 'title',
        name: 'Title',
        editor: ,
        width: 200,
        resizable: true,

import * as React from 'react';
import ReactDataGrid = require('react-data-grid');
import * as ReactDataGridPlugins from 'react-data-grid/addons';
import faker = require('faker');

var Editors = ReactDataGridPlugins.Editors;
var Toolbar = ReactDataGridPlugins.Toolbar;
var AutoCompleteEditor = Editors.AutoComplete;
var DropDownEditor = Editors.DropDownEditor;

faker.locale = 'en_GB';

function createFakeRowObjectData(index:number):Object {
    return {
        id: 'id_' + index,
        avartar: faker.image.avatar(),
        county: faker.address.county(),
        email: faker.internet.email(),
        title: faker.name.prefix(),
        firstName: faker.name.firstName(),
        lastName: faker.name.lastName(),
        street: faker.address.streetName(),
        zipCode: faker.address.zipCode(),

import '../../../../themes/ron-react-autocomplete.css';

const optionPropType = PropTypes.shape({
  id: PropTypes.required,
  title: PropTypes.string
});

export default class AutoCompleteEditor extends React.Component {
  static propTypes = {
    onCommit: PropTypes.func,
    options: PropTypes.arrayOf(optionPropType),
    label: PropTypes.any,
    value: PropTypes.any,
    height: PropTypes.number,
    valueParams: PropTypes.arrayOf(PropTypes.string),
    column: PropTypes.shape(shapes.Column),
    resultIdentifier: PropTypes.string,
    search: PropTypes.string,
    onKeyDown: PropTypes.func,
    onFocus: PropTypes.func,
    editorDisplayValue: PropTypes.func
  };

  static defaultProps = {
    resultIdentifier: 'id'
  };

  handleChange = () => {
    this.props.onCommit();
  };

  getValue = () => {

import {Table} from 'material-ui/Table';
import ReactDataGrid from 'react-data-grid';
import { Toolbar, Data } from 'react-data-grid/addons';
import IconMenu from 'material-ui/IconMenu';
import FontIcon from 'material-ui/FontIcon';
import IconButton from 'material-ui/IconButton';
import NavigationExpandMoreIcon from 'material-ui/svg-icons/navigation/expand-more';
import MenuItem from 'material-ui/MenuItem';
import _ from 'lodash'
import TextField from 'material-ui/TextField';
import { Link ,browserHistory} from 'react-router'
import Checkbox from 'material-ui/Checkbox';



const Selectors = Data.Selectors;
const log = log2("Question List")
//log("Question List",Data)

var rows = db.getQuestionsFromStorage();

export class detailButton extends React.Component {
  constructor(props) {
    super(props)
  }
  render(){

    return(
      <div>
        Detay
      </div>
    )

require("!style!css!react-data-grid/themes/react-data-grid.css")
import { Link } from 'react-router'
import RaisedButton from 'material-ui/RaisedButton';
import {db,log2,util} from '../../utils/'
import {Table} from 'material-ui/Table';
import ReactDataGrid from 'react-data-grid';
import { Toolbar, Data } from 'react-data-grid/addons';
import IconMenu from 'material-ui/IconMenu';
import FontIcon from 'material-ui/FontIcon';
import IconButton from 'material-ui/IconButton';
import NavigationExpandMoreIcon from 'material-ui/svg-icons/navigation/expand-more';
import MenuItem from 'material-ui/MenuItem';
import _ from 'lodash'
import TextField from 'material-ui/TextField';

const Selectors = Data.Selectors;
const log = log2("Admin Profile")
//log("Admin Profile")

const styles = {
  customWidth: {
   width: 150,
 },
};

var questionSetInstance;

class ButtonsColFormatter extends React.Component{
  constructor(props){
    super(props)
    util.bindFunctions.call(this,['onClick'])
  }