From a25162cce07163c8a04145c70aadf98617ca228c Mon Sep 17 00:00:00 2001
From: Allen Gilliland <agilliland@gmail.com>
Date: Wed, 10 Jun 2015 15:24:43 -0700
Subject: [PATCH] get the FixedDataTable to actually work with some very basic
settings.
---
.../visualization_table.react.js | 50 +++++++++++++++----
1 file changed, 40 insertions(+), 10 deletions(-)
diff --git a/resources/frontend_client/app/query_builder/visualization_table.react.js b/resources/frontend_client/app/query_builder/visualization_table.react.js
index 1237c03923a..f7db021a142 100644
--- a/resources/frontend_client/app/query_builder/visualization_table.react.js
+++ b/resources/frontend_client/app/query_builder/visualization_table.react.js
@@ -14,10 +14,39 @@ export default React.createClass({
getDefaultProps: function() {
return {
maxRows: 100,
+ minColumnWidth: 75,
page: 1
};
},
+ getInitialState: function() {
+ return {
+ width: 800,
+ height: 300
+ };
+ },
+
+ componentDidMount: function() {
+ this.calculateBoundaries();
+ },
+
+ componentDidUpdate: function(prevProps, prevState) {
+ this.calculateBoundaries();
+ },
+
+ calculateBoundaries: function() {
+ var element = this.getDOMNode(); //React.findDOMNode(this);
+ var width = element.parentElement.offsetWidth;
+ var height = element.parentElement.offsetHeight;
+
+ if (width !== this.state.width && height !== this.state.height) {
+ this.setState({
+ width: width,
+ height: height
+ });
+ }
+ },
+
isSortable: function() {
return (this.props.setSortFn !== undefined);
},
@@ -68,10 +97,15 @@ export default React.createClass({
}
});
+ var calcColumnWidth = 75;
+ if (this.props.data.cols.length > 0) {
+ calcColumnWidth = this.state.width / this.props.data.cols.length;
+ }
var tableColumns = this.props.data.cols.map(function (column, idx) {
var colVal = (column !== null) ? column.name.toString() : null;
+ var colWidth = (component.props.minColumnWidth > calcColumnWidth) ? component.props.minColumnWidth : calcColumnWidth;
- return (<Column label={colVal} width={100} dataKey={idx}></Column>);
+ return (<Column label={colVal} width={colWidth} dataKey={idx}></Column>);
});
// return (
@@ -91,17 +125,13 @@ export default React.createClass({
return (
<Table
- rowHeight={50}
+ rowHeight={35}
rowGetter={this.rowGetter}
rowsCount={this.props.data.rows.length}
- width={5000}
- height={5000}
- headerHeight={50}>
- <Column
- label="Col 1"
- width={3000}
- dataKey={0}
- />
+ width={this.state.width}
+ height={this.state.height}
+ headerHeight={35}>
+ {tableColumns}
</Table>
);
}
--
GitLab