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;