plotly · n-riesco · Mar 3, 2018 · Feb 28, 2018 · Mar 1, 2018 · Mar 1, 2018
diff --git a/app/components/SQLTable.react.js b/app/components/SQLTable.react.js
diff --git a/app/components/Settings/DialectSelector/DialectSelector.react.js b/app/components/Settings/DialectSelector/DialectSelector.react.js
@@ -12,7 +12,7 @@ import classnames from 'classnames';
  * @param {object} props.connectionObject - Connect Object
  * @param {string} props.connectionObject.dialect - Dialect
  * @param {function} props.updateConnection - Updates the Connection with dialect
- * @returns {DialectSelector}
+ * @returns {ReactElement} rendered element
  */
 const DialectSelector = function DialectSelector(props) {
     const {connectionObject, updateConnection} = props;

diff --git a/app/components/Settings/Preview/Preview.react.js b/app/components/Settings/Preview/Preview.react.js
@@ -4,7 +4,7 @@ import {connect} from 'react-redux';
 import R, {has, isEmpty, propOr} from 'ramda';
 import {Tab, Tabs, TabList, TabPanel} from 'react-tabs';
 
-import SQLTable from './SQLTable.react.js';
+import SQLTable from './sql-table.jsx';
 import CodeEditorField from './CodeEditorField.react.js';
 import ChartEditor from './ChartEditor.react.js';
 import ApacheDrillPreview from './ApacheDrillPreview.js';

diff --git a/app/components/Settings/Preview/SQLTable.react.js b/app/components/Settings/Preview/SQLTable.react.js
diff --git a/app/components/Settings/Preview/sql-table.jsx b/app/components/Settings/Preview/sql-table.jsx
@@ -0,0 +1,155 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import ReactDataGrid from 'react-data-grid';
+const {Data: {Selectors}} = require('react-data-grid-addons');
+
+export default class SQLTable extends React.Component {
+    static propTypes = {
+        columnNames: PropTypes.array,
+        rows: PropTypes.array
+    }
+
+    /**
+     * SQLTable displays query results as a table
+     *
+     * @param {object} props - Component properties
+     *
+     * @param {Array}         props.columnNames - Array of column names
+     * @param {Array.<Array>} props.rows - Array of rows
+     */
+    constructor(props) {
+        super(props);
+
+        /**
+         * @member {object} state - Component state
+         * @property {Array.<object>} state.filters - filters
+         */
+        this.state = {
+            filters: []
+        };
+
+        /**
+         * @member {Array} columns - Array of column descriptions
+         */
+        this.columns = this.props.columnNames.map((name, key) => {
+            return {key, name, filterable: true};
+        });
+
+        /**
+         * Get number of selected rows
+         * @returns {number} size
+         */
+        this.getSize = () => {
+            return this.getRows().length;
+        };
+
+        /**
+         * Get selected row
+         * @param {object} index - Row index
+         * @returns {Array} row
+         */
+        this.getRow = (index) => {
+            return this.getRows()[index];
+        };
+
+        /**
+         * Get all the selected rows
+         * @returns {Array} rows
+         */
+        this.getRows = () => {
+            const {rows} = this.props;
+            const {filters} = this.state;
+            return Selectors.getRows({rows, filters});
+        };
+
+        /**
+         * Handler of filter updates
+         * @param {object} filter - updated filters
+         * @returns {undefined}
+         */
+        this.onAddFilter = (filter) => {
+            const filters = this.state.filters.slice();
+
+            if (filter.filterTerm) {
+                filters[filter.column.key] = filter;
+            } else {
+                delete filters[filter.column.key];
+            }
+
+            this.setState({filters});
+        };
+
+        /**
+         * Delete all filters
+         * @returns {undefined}
+         */
+        this.onClearFilters = () => {
+            this.setState({filters: []});
+        };
+    }
+
+    componentWillReceiveProps(newProps) {
+        // Did columnNames change?
+        const {columnNames} = this.props;
+        const {columnNames: newColumnNames} = newProps;
+
+        let isEqual = (columnNames.length === newColumnNames.length);
+        for (let i = 0; isEqual && (i < columnNames); i++) {
+            isEqual = isEqual && (columnNames[i] === newColumnNames[i]);
+        }
+
+        // If it did, update `this.columns`
+        if (!isEqual) {
+            this.columns = newColumnNames.map((name, key) => {
+                return {key, name, filterable: true};
+            });
+        }
+    }
+
+    render() {
+        return (
+            <div>
+                <div
+                    className={'sqltable-click-overlay'}
+
+                    style={{
+                        float: 'left',
+                        minWidth: '100%',
+                        minHeight: '32px',
+                        position: 'absolute',
+                        zIndex: 2
+                    }}
+
+                    onClick={() => this.refs.reactDataGrid.onToggleFilter()}
+                />
+                <ReactDataGrid
+                    ref={'reactDataGrid'}
+
+                    minWidth={740}
+                    minHeight={200}
+                    headerRowHeight={32}
+                    rowHeight={30}
+
+                    columns={this.columns}
+                    rowGetter={this.getRow}
+                    rowsCount={this.getSize()}
+
+                    enableCellSelect={true}
+
+                    onAddFilter={this.onAddFilter}
+                    onClearFilters={this.onClearFilters}
+                />
+                <small><code
+                    style={{
+                        display: 'block',
+                        textAlign: 'center',
+                        width: '100%'
+                    }}
+                >
+                    (click on header to toggle row filter)
+                </code></small>
+            </div>
+        );
+    }
+}
diff --git a/package.json b/package.json
@@ -46,7 +46,7 @@
     "package": "cross-env NODE_ENV=production node -r babel-register package.js",
     "package-all": "yarn run package -- --all",
     "rebuild-and-e2e": "yarn run build && yarn run test-e2e",
-    "start": "cross-env NODE_ENV=production electron ./",
+    "start": "cross-env NODE_ENV=production electron --disable-http-cache ./",
     "start-headless": "cross-env NODE_ENV=production node ./dist/headless-bundle.js",
     "start-hot": "cross-env HOT=1 NODE_ENV=development electron --disable-http-cache -r babel-register ./backend/main.development",
     "watch-headless": "cross-env NODE_ENV=production node -r babel-register ./node_modules/webpack/bin/webpack --config webpack.config.headless.js --profile --colors --watch",
@@ -172,7 +172,6 @@
     "eslint-plugin-jsx-a11y": "^6.0.2",
     "eslint-plugin-react": "^7.5.1",
     "fetch-cookie": "^0.7.0",
-    "fixed-data-table": "^0.6.5",
     "form-data": "^2.3.1",
     "fs-extra": "^4.0.2",
     "immutable": "^3.8.2",
@@ -229,6 +228,8 @@
     "papaparse": "^4.3.7",
     "pg": "^4.5.5",
     "pg-hstore": "^2.3.2",
+    "react-data-grid": "^3.0.11",
+    "react-data-grid-addons": "^3.0.11",
     "restify": "^4.3.2",
     "sequelize": "^3.30.4",
     "source-map-support": "^0.5.0",

diff --git a/static/css-vendor/fixed-data-table-custom.css b/static/css-vendor/fixed-data-table-custom.css