try to import FixedDataTable. not working yet.

package.json

@@ -27,6 +27,7 @@
     "crossfilter": "^1.3.11",
     "d3": "^3.5.3",
     "dc": "^2.0.0-beta.1",
+    "fixed-data-table": "^0.2.0",
     "jquery": "^2.1.4",
     "moment": "^2.9.0",
     "ng-sortable": "^1.2.0",

resources/frontend_client/app/query_builder/visualization_table.react.js

 'use strict';
 
+import FixedDataTable from 'fixed-data-table';
+
+var Table = FixedDataTable.Table;
+var Column = FixedDataTable.Column;
+
 export default React.createClass({
     displayName: 'QueryVisualizationTable',
     propTypes: {
@@ -21,6 +26,10 @@ export default React.createClass({
         this.props.setSortFn(fieldId);
     },
 
+    rowGetter: function(rowIndex) {
+        return this.props.data.rows[rowIndex];
+    },
+
     render: function() {
         if(!this.props.data) {
             return false;
@@ -59,19 +68,41 @@ export default React.createClass({
             }
         });
 
+        var tableColumns = this.props.data.cols.map(function (column, idx) {
+            var colVal = (column !== null) ? column.name.toString() : null;
+
+            return (<Column label={colVal} width={100} dataKey={idx}></Column>);
+        });
+
+        // return (
+        //     <div className="QueryTable-wrapper Table-wrapper full">
+        //         <table className="QueryTable Table">
+        //             <thead>
+        //                 <tr>
+        //                     {tableHeaders}
+        //                 </tr>
+        //             </thead>
+        //             <tbody>
+        //                 {tableRows}
+        //             </tbody>
+        //         </table>
+        //     </div>
+        // );
+
         return (
-            <div className="QueryTable-wrapper Table-wrapper full">
-                <table className="QueryTable Table">
-                    <thead>
-                        <tr>
-                            {tableHeaders}
-                        </tr>
-                    </thead>
-                    <tbody>
-                        {tableRows}
-                    </tbody>
-                </table>
-            </div>
+            <Table
+                rowHeight={50}
+                rowGetter={this.rowGetter}
+                rowsCount={this.props.data.rows.length}
+                width={5000}
+                height={5000}
+                headerHeight={50}>
+                <Column
+                  label="Col 1"
+                  width={3000}
+                  dataKey={0}
+                />
+            </Table>
         );
     }
 });

webpack.config.js

@@ -88,6 +88,7 @@ module.exports = {
             'react':                __dirname + '/node_modules/react/dist/react-with-addons.js',
             'react-onclickoutside': __dirname + '/node_modules/react-onclickoutside/index.js',
             'react-datepicker':     __dirname + '/node_modules/react-datepicker/react-datepicker.js',
+            'fixed-data-table':     __dirname + '/node_modules/fixed-data-table/dist/fixed-data-table.js',
             'moment':               __dirname + '/node_modules/moment/min/moment.min.js',
             'tether':               __dirname + '/node_modules/tether/tether.min.js',
             'underscore':           __dirname + '/node_modules/underscore/underscore-min.js',