tao-react-components/lib/components/DataGrid/index.js

react components crafted with love by Tao

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

require('./style.css');

var ReactDataGrid = require('react-data-grid');
// const exampleWrapper = require('../components/exampleWrapper');
// import 'bootstrap/dist/css/bootstrap.css';

var React = require('react');

var Example = React.createClass({
  displayName: 'Example',
  getInitialState: function getInitialState() {
    this.createRows();
    this._columns = [{
      key: 'id',
      name: 'ID',
      resizable: true,
      width: 40
    }, {
      key: 'task',
      name: 'Title',
      resizable: true
    }, {
      key: 'priority',
      name: 'Priority',
      resizable: true
    }, {
      key: 'issueType',
      name: 'Issue Type',
      resizable: true
    }, {
      key: 'complete',
      name: '% Complete',
      resizable: true
    }, {
      key: 'startDate',
      name: 'Start Date',
      resizable: true
    }, {
      key: 'completeDate',
      name: 'Expected Complete',
      resizable: true
    }];

    return null;
  },
  getRandomDate: function getRandomDate(start, end) {
    return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())).toLocaleDateString();
  },
  createRows: function createRows() {
    var rows = [];
    for (var i = 1; i < 1000; i++) {
      rows.push({
        id: i,
        task: 'Task ' + i,
        complete: Math.min(100, Math.round(Math.random() * 110)),
        priority: ['Critical', 'High', 'Medium', 'Low'][Math.floor(Math.random() * 3 + 1)],
        issueType: ['Bug', 'Improvement', 'Epic', 'Story'][Math.floor(Math.random() * 3 + 1)],
        startDate: this.getRandomDate(new Date(2015, 3, 1), new Date()),
        completeDate: this.getRandomDate(new Date(), new Date(2016, 0, 1))
      });
    }

    this._rows = rows;
  },
  rowGetter: function rowGetter(i) {
    return this._rows[i];
  },
  render: function render() {
    return React.createElement(
      'div',
      { className: 'DataGrid-Wrapper' },
      React.createElement(ReactDataGrid, {
        columns: this._columns,
        rowGetter: this.rowGetter,
        rowsCount: this._rows.length,
        minHeight: 500 })
    );
  }
});

exports.default = Example;