diff --git a/src/data-table/data-cell.jsx b/src/data-table/data-cell.jsx
index 1f6a003..fde7cc2 100644
--- a/src/data-table/data-cell.jsx
+++ b/src/data-table/data-cell.jsx
@@ -24,7 +24,6 @@ class DataCell extends React.PureComponent {
render () {
const {
- data,
general,
measurement,
styleBuilder,
@@ -37,11 +36,12 @@ class DataCell extends React.PureComponent {
fontFamily: styling.options.fontFamily,
...styleBuilder.getStyle(),
paddingLeft: '5px',
- textAlign: textAlignment
+ textAlign: textAlignment,
+ minWidth: general.cellWidth,
+ maxWidth: general.cellWidth
};
const isEmptyCell = measurement.displayValue === '';
- const isColumnPercentageBased = (/%/).test(measurement.format);
let formattedMeasurementValue;
if (isEmptyCell) {
formattedMeasurementValue = '';
@@ -68,16 +68,9 @@ class DataCell extends React.PureComponent {
}
}
- let cellClass = 'grid-cells';
- const hasTwoDimensions = data.headers.dimension2 && data.headers.dimension2.length > 0;
- const shouldUseSmallCells = isColumnPercentageBased && data.headers.measurements.length > 1 && hasTwoDimensions;
- if (shouldUseSmallCells) {
- cellClass = 'grid-cells-small';
- }
-
return (
@@ -99,7 +92,7 @@ DataCell.propTypes = {
}).isRequired
}).isRequired,
general: PropTypes.shape({
- cellSuffix: PropTypes.string.isRequired
+ cellWidth: PropTypes.string.isRequired
}).isRequired,
measurement: PropTypes.shape({
format: PropTypes.string,
diff --git a/src/definition/table-format.js b/src/definition/table-format.js
index c5201c5..726e09f 100644
--- a/src/definition/table-format.js
+++ b/src/definition/table-format.js
@@ -214,10 +214,10 @@ const tableFormat = {
component: 'slider',
label: 'Column width',
ref: 'columnwidthslider',
- min: 1,
- max: 3,
- step: 1,
- defaultValue: 2
+ min: 20,
+ max: 250,
+ step: 10,
+ defaultValue: 50
},
SymbolForNulls: {
ref: 'symbolfornulls',
diff --git a/src/headers-table/column-header.jsx b/src/headers-table/column-header.jsx
index 4215c06..785c881 100644
--- a/src/headers-table/column-header.jsx
+++ b/src/headers-table/column-header.jsx
@@ -15,7 +15,7 @@ class ColumnHeader extends React.PureComponent {
}
render () {
- const { baseCSS, cellSuffix, colSpan, entry, styling, qlik } = this.props;
+ const { baseCSS, cellWidth, colSpan, entry, styling, qlik } = this.props;
const inEditState = qlik.inEditState();
const isMediumFontSize = styling.headerOptions.fontSizeAdjustment === HEADER_FONT_SIZE.MEDIUM;
@@ -23,12 +23,14 @@ class ColumnHeader extends React.PureComponent {
...baseCSS,
fontSize: `${14 + styling.headerOptions.fontSizeAdjustment}px`,
height: isMediumFontSize ? '43px' : '33px',
- verticalAlign: 'middle'
+ verticalAlign: 'middle',
+ minWidth: cellWidth,
+ maxWidth: cellWidth
};
return (
| {
return (
{
const transformedMeasurement = {
@@ -253,7 +244,8 @@ function initializeTransformed ({ $element, component, dataCube, designList, lay
general: {
allowExcelExport: layout.allowexportxls,
allowFilteringByClick: layout.filteroncellclick,
- cellSuffix: getCellSuffix(layout.columnwidthslider), // TOOD: move to matrix cells or is it headers.measurements?
+ // If using the previous solution just set 60px
+ cellWidth: `${layout.columnwidthslider > 10 ? layout.columnwidthslider : 60}px`,
errorMessage: layout.errormessage,
footnote: layout.footnote,
maxLoops,
diff --git a/src/main.less b/src/main.less
index c146f2f..569c3ff 100644
--- a/src/main.less
+++ b/src/main.less
@@ -12,9 +12,7 @@
pointer-events: none;
}
- ._cell(@Width: 50px) {
- min-width: @Width !important;
- max-width: @Width !important;
+ .grid-cells {
cursor: pointer;
line-height: 1em !important;
}
@@ -74,67 +72,6 @@
text-align: right;
}
- // *****************
- // Medium column size
- // *****************
-
- .grid-cells {
- position: relative;
- ._cell(70px);
- }
-
- .grid-cells2 {
- ._cell(70px);
- }
-
- .grid-cells-small {
- ._cell(52px);
- }
-
- .grid-cells2-small {
- ._cell(52px);
- }
-
- // *****************
- // Small column size
- // *****************
- .grid-cells-s {
- ._cell(67px);
- }
-
- .grid-cells2-s {
- ._cell(67px);
- }
-
- .grid-cells-small-s {
- ._cell(52px);
- }
-
- .grid-cells2-small-s {
- ._cell(52px);
- }
-
- // *****************
- // Large column size
- // *****************
- .grid-cells-l {
- ._cell(82px);
- }
-
- .grid-cells2-l {
- ._cell(82px);
- }
-
- .grid-cells-small-l {
- ._cell(66px);
- }
-
- .grid-cells2-small-l {
- ._cell(66px);
- }
-
- // END OF GRID CELLS
-
// First Column
.fdim-cells {
min-width: 230px !Important;
@@ -149,14 +86,6 @@
color: #fff;
}
- .grid-cells-header {
- padding: 0;
- }
-
- .grid-cells-title {
- min-width: 522px;
- }
-
.grid {
height: 50px;
width: 350px;
|