Initial commit, including react-bootstrap-table and react-data-grid

app/javascript/packs/shared/data_grid/DataGrid.jsx

@@ -0,0 +1,74 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import ReactDataGrid from 'react-data-grid';
+
+class DataGrid extends Component {
+  constructor(props) {
+    super(props);
+    this.cleanProps = this.cleanProps.bind(this);
+    this.transformColumns = this.transformColumns.bind(this);
+    this.setupDefaultProps = this.setupDefaultProps.bind(this);
+
+    this.transformColumns();
+    this.setupDefaultProps();
+  }
+
+  transformColumns() {
+    // Transform columns from the "sciNote" representation into
+    // ReactDataGrid-compatible representation
+    this._columns =
+      this.props.columns
+      .sort((a, b) => b.position - a.position)
+      .filter((col) => col.visible)
+      .map((col) => {
+        return {
+          key: col.textId,
+          name: col.name,
+          locked: col.locked
+        };
+      });
+  }
+
+  setupDefaultProps() {
+    // Setup the default props if they're not provided
+    const self = this;
+
+    if ('rowGetter' in this.props) {
+      this._rowGetter = this.props.rowGetter;
+    } else {
+      this._rowGetter = function(i) {
+        return this.props.data[i];
+      }.bind(this);
+    }
+    if ('rowsCount' in this.props) {
+      this._rowsCount = this.props.rowsCount;
+    } else {
+      this._rowsCount = this.props.data.length;
+    }
+  }
+
+  cleanProps() {
+    // Remove additional props from the props value
+    const cleanProps = {...this.props};
+    delete cleanProps.columns;
+    delete cleanProps.rowGetter;
+    delete cleanProps.rowsCount;
+    return cleanProps;
+  }
+
+  render() {
+    return (
+      <ReactDataGrid
+        columns={this._columns}
+        rowGetter={this._rowGetter}
+        rowsCount={this._rowsCount}
+        {...this.cleanProps()}
+      />
+    );
+  }
+}
+
+DataGrid.propTypes = {
+};
+
+export default DataGrid;

app/javascript/packs/shared/data_table/DataTable.jsx

@@ -0,0 +1,59 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
+
+class DataTable extends Component {
+  constructor(props) {
+    super(props);
+    this.cleanProps = this.cleanProps.bind(this);
+    this.displayHeader = this.displayHeader.bind(this);
+  }
+
+  cleanProps() {
+    // Remove additional props from the props value
+    const cleanProps = {...this.props};
+    delete cleanProps.columns;
+    return cleanProps;
+  }
+
+  displayHeader() {
+    const orderedCols = [...this.props.columns].sort((a, b) => b.position - a.position);
+    return orderedCols.map((col) => {
+      return (
+        <TableHeaderColumn
+          key={col.id}
+          dataField={col.textId}
+          isKey={col.isKey}
+          hidden={!col.visible}
+        >
+          {col.name}
+        </TableHeaderColumn>
+      );
+    });
+  }
+
+  render() {
+    return (
+      <BootstrapTable {...this.cleanProps()}>
+        {this.displayHeader()}
+      </BootstrapTable>
+    );
+  }
+}
+
+DataTable.propTypes = {
+  columns: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.number.isRequired,
+      isKey: PropTypes.bool.isRequired,
+      textId: PropTypes.string.isRequired,
+      name: PropTypes.string.isRequired,
+      position: PropTypes.number.isRequired,
+      visible: PropTypes.bool,
+      sortable: PropTypes.bool,
+      locked: PropTypes.bool
+    })
+  ).isRequired
+};
+
+export default DataTable;

app/javascript/packs/styles/main.scss

@@ -1,4 +1,5 @@
 @import 'constants';
+@import '~react-bootstrap-table/dist/react-bootstrap-table.min';
 
 body {
   background-color: $color-concrete;

package.json

@@ -76,6 +76,8 @@
     "styled-components": "^2.1.1",
     "webpack": "^3.2.0",
     "webpack-manifest-plugin": "^1.1.2",
-    "webpack-merge": "^4.1.0"
+    "webpack-merge": "^4.1.0",
+    "react-bootstrap-table": "^4.0.0",
+    "react-data-grid": "^2.0.2"
   }
 }