Issue 118 width behavior (#129)

Marc-Andre-Rivet · Marc-Andre-Rivet · commit fc73b3cd5270 · 2018-10-05T11:11:33.000-04:00
* add width percentage support + content_style

* fix visual regression with empty df

* only apply row style when necessary
diff --git a/packages/dash-table/CHANGELOG.md b/packages/dash-table/CHANGELOG.md
@@ -188,3 +188,15 @@
     Issue: https://github.com/plotly/dash-table/issues/91
 
     Sorting arrow will no longer highlight.
+
+## RC23 - Width percentage
+
+    Columns can now accept '%' width, minWidth, maxWidth.
+
+    For the percentages to have meaning, the dash-table must be forced to have a width and the content of the dash-table must be forced to grow to fill the available space made available by the container (by default the table is only as big as it needs to be).
+
+    Added prop content_style that takes values 'fit' or 'grow' (Default='fit')
+
+    1. Add the prop content_style='grow' to make the table fill its space, this will make sure the % are applied to all the space available.
+    2. Add the following selector (with the proper values) to the table_style prop
+        { selector: '.dash-spreadsheet', rule: 'width: 100%; max-width: 100%' }
diff --git a/packages/dash-table/dash_table/bundle.js b/packages/dash-table/dash_table/bundle.js
diff --git a/packages/dash-table/dash_table/demo.js b/packages/dash-table/dash_table/demo.js
diff --git a/packages/dash-table/dash_table/metadata.json b/packages/dash-table/dash_table/metadata.json
@@ -29,6 +29,27 @@
           "computed": false
         }
       },
+      "content_style": {
+        "type": {
+          "name": "enum",
+          "value": [
+            {
+              "value": "'fit'",
+              "computed": false
+            },
+            {
+              "value": "'grow'",
+              "computed": false
+            }
+          ]
+        },
+        "required": false,
+        "description": "",
+        "defaultValue": {
+          "value": "'fit'",
+          "computed": false
+        }
+      },
       "dataframe": {
         "type": {
           "name": "arrayOf",
diff --git a/packages/dash-table/dash_table/package.json b/packages/dash-table/dash_table/package.json
@@ -1,6 +1,6 @@
 {
   "name": "dash-table",
-  "version": "3.0.0rc22",
+  "version": "3.0.0rc23",
   "description": "Dash table",
   "main": "build/index.js",
   "scripts": {
diff --git a/packages/dash-table/demo/App.js b/packages/dash-table/demo/App.js
@@ -25,6 +25,7 @@ class App extends Component {
                     deletable: true,
                 //     type: 'dropdown'
                 })),
+                content_style: 'grow',
                 editable: true,
                 sorting: true,
                 n_fixed_rows: 4,
diff --git a/packages/dash-table/package.json b/packages/dash-table/package.json
@@ -1,6 +1,6 @@
 {
   "name": "dash-table",
-  "version": "3.0.0rc22",
+  "version": "3.0.0rc23",
   "description": "Dash table",
   "main": "build/index.js",
   "scripts": {
diff --git a/packages/dash-table/src/dash-table/Table.js b/packages/dash-table/src/dash-table/Table.js
@@ -20,6 +20,7 @@ export const defaultProps = {
     },
     navigation: 'page',
 
+    content_style: 'fit',
     filtering: false,
     filtering_settings: '',
     filtering_type: 'basic',
@@ -87,6 +88,7 @@ export const defaultProps = {
 export const propTypes = {
     active_cell: PropTypes.array,
     columns: PropTypes.arrayOf(PropTypes.object),
+    content_style: PropTypes.oneOf(['fit', 'grow']),
 
     dataframe: PropTypes.arrayOf(PropTypes.object),
     dataframe_previous: PropTypes.arrayOf(PropTypes.object),
diff --git a/packages/dash-table/src/dash-table/components/ControlledTable/index.tsx b/packages/dash-table/src/dash-table/components/ControlledTable/index.tsx
@@ -74,6 +74,10 @@ export default class ControlledTable extends Component<ControlledTableProps> {
             this.props.setProps({ active_cell: this.props.selected_cell[0] });
         }
 
+        this.handleResize();
+    }
+
+    componentWillMount() {
         // Fallback method for paste handling in Chrome
         // when no input element has focused inside the table
         window.addEventListener('resize', this.handleResize);
@@ -87,14 +91,6 @@ export default class ControlledTable extends Component<ControlledTableProps> {
         document.removeEventListener('paste', this.handlePaste);
     }
 
-    componentWillUpdate() {
-        const { table_style } = this.props;
-
-        R.forEach(({ selector, rule }) => {
-            this.stylesheet.setRule(selector, rule);
-        }, table_style);
-    }
-
     componentDidUpdate() {
         this.handleResize();
         this.handleDropdown();
@@ -128,6 +124,12 @@ export default class ControlledTable extends Component<ControlledTableProps> {
     handleResize = () => {
         const { r0c0, r0c1, r1c0, r1c1 } = this.refs as { [key: string]: HTMLElement };
 
+        const { n_fixed_columns, n_fixed_rows, table_style } = this.props;
+
+        R.forEach(({ selector, rule }) => {
+            this.stylesheet.setRule(selector, rule);
+        }, table_style);
+
         // Adjust [fixed columns/fixed rows combo] to fixed rows height
         let trs = r0c1.querySelectorAll('tr');
         r0c0.querySelectorAll('tr').forEach((tr, index) => {
@@ -152,6 +154,28 @@ export default class ControlledTable extends Component<ControlledTableProps> {
 
             this.stylesheet.setRule('.cell-1-0 tr', `height: ${getComputedStyle(contentTr).height}`);
         }
+
+        // Adjust the width of the fixed row header
+        if (n_fixed_rows) {
+            r1c1.querySelectorAll('tr:first-of-type td').forEach((td, index) => {
+                const width: any = getComputedStyle(td).width;
+                this.stylesheet.setRule(
+                    `.dash-fixed-row:not(.dash-fixed-column) th:nth-of-type(${index + 1})`,
+                    `width: ${width}; min-width: ${width}; max-width: ${width};`
+                );
+            });
+        }
+
+        // Adjust the width of the fixed row / fixed columns header
+        if (n_fixed_columns && n_fixed_rows) {
+            r1c0.querySelectorAll('tr:first-of-type td').forEach((td, index) => {
+                const width: any = getComputedStyle(td).width;
+                this.stylesheet.setRule(
+                    `.dash-fixed-column.dash-fixed-row th:nth-of-type(${index + 1})`,
+                    `width: ${width}; min-width: ${width}; max-width: ${width};`
+                );
+            });
+        }
     }
 
     get $el() {
@@ -594,10 +618,6 @@ export default class ControlledTable extends Component<ControlledTableProps> {
                 `.dash-spreadsheet-inner td.column-${typeIndex}`,
                 `width: 30px; max-width: 30px; min-width: 30px;`
             );
-            this.stylesheet.setRule(
-                `.dash-spreadsheet-inner th.column-${typeIndex}`,
-                `width: 30px; max-width: 30px; min-width: 30px;`
-            );
 
             ++typeIndex;
         }
@@ -607,10 +627,6 @@ export default class ControlledTable extends Component<ControlledTableProps> {
                 `.dash-spreadsheet-inner td.column-${typeIndex}`,
                 `width: 30px; max-width: 30px; min-width: 30px;`
             );
-            this.stylesheet.setRule(
-                `.dash-spreadsheet-inner th.column-${typeIndex}`,
-                `width: 30px; max-width: 30px; min-width: 30px;`
-            );
 
             ++typeIndex;
         }
@@ -624,6 +640,7 @@ export default class ControlledTable extends Component<ControlledTableProps> {
                 `.dash-spreadsheet-inner td.column-${typeIndex}`,
                 `width: ${width}; max-width: ${maxWidth}; min-width: ${minWidth};`
             );
+
             this.stylesheet.setRule(
                 `.dash-spreadsheet-inner th.column-${typeIndex}`,
                 `width: ${width}; max-width: ${maxWidth}; min-width: ${minWidth};`
@@ -707,6 +724,7 @@ export default class ControlledTable extends Component<ControlledTableProps> {
         const {
             id,
             columns,
+            content_style,
             n_fixed_columns,
             n_fixed_rows,
             row_deletable,
@@ -719,14 +737,27 @@ export default class ControlledTable extends Component<ControlledTableProps> {
             'dash-spreadsheet-inner',
             'dash-spreadsheet',
             ...(n_fixed_rows ? ['freeze-top'] : []),
-            ...(n_fixed_columns ? ['freeze-left'] : [])
+            ...(n_fixed_columns ? ['freeze-left'] : []),
+            [`dash-${content_style}`]
         ];
 
         const containerClasses = [
             'dash-spreadsheet',
             'dash-spreadsheet-container',
             ...(n_fixed_rows ? ['freeze-top'] : []),
-            ...(n_fixed_columns ? ['freeze-left'] : [])
+            ...(n_fixed_columns ? ['freeze-left'] : []),
+            [`dash-${content_style}`]
+        ];
+
+        const fragmentClasses = [
+            [
+                n_fixed_rows && n_fixed_columns ? 'dash-fixed-row dash-fixed-column' : '',
+                n_fixed_rows ? 'dash-fixed-row' : ''
+            ],
+            [
+                n_fixed_columns ? 'dash-fixed-column' : '',
+                'dash-fixed-content'
+            ]
         ];
 
         const cells = this.getCells();
@@ -748,7 +779,7 @@ export default class ControlledTable extends Component<ControlledTableProps> {
                     >{row.map((cell, columnIndex) => (<div
                         key={columnIndex}
                         ref={`r${rowIndex}c${columnIndex}`}
-                        className={`cell cell-${rowIndex}-${columnIndex}`}
+                        className={`cell cell-${rowIndex}-${columnIndex} ${fragmentClasses[rowIndex][columnIndex]}`}
                     >{cell}</div>))
                         }</div>))}
                 </div>
diff --git a/packages/dash-table/src/dash-table/components/HeaderFactory.tsx b/packages/dash-table/src/dash-table/components/HeaderFactory.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import * as R from 'ramda';
 
-import Stylesheet from 'core/Stylesheet';
 import { SortDirection, SortSettings } from 'core/sorting';
 import multiUpdateSettings from 'core/sorting/multi';
 import singleUpdateSettings from 'core/sorting/single';
@@ -117,7 +116,6 @@ export default class HeaderFactory {
             columnRowIndex,
             labels,
             mergeCells,
-            n_fixed_columns,
             offset,
             rowSorting,
             virtualization
@@ -141,16 +139,12 @@ export default class HeaderFactory {
             });
         }
 
-        const visibleColumns = columns.filter(column => !column.hidden);
-
         return R.filter(column => !!column, columnIndices.map((columnId, spanId) => {
             const c = columns[columnId];
             if (c.hidden) {
                 return null;
             }
 
-            const visibleIndex = visibleColumns.indexOf(c) + offset;
-
             let colSpan: number;
             if (!mergeCells) {
                 colSpan = 1;
@@ -166,39 +160,21 @@ export default class HeaderFactory {
                 }
             }
 
-            // This is not efficient and can be improved upon...
-            // Fixed columns need to override the default cell behavior when they span multiple columns
-            // Find all columns that fit the header's range [index, index+colspan[ and keep the fixed/visible ones
-            const visibleColumnId = visibleColumns.indexOf(c);
-
-            const spannedColumns = visibleColumns.filter((column, index) =>
-                !column.hidden &&
-                index >= visibleColumnId &&
-                index < visibleColumnId + colSpan &&
-                index + offset < n_fixed_columns
-            );
-
-            // Calculate the width of all those columns combined
-            const width = `calc(${spannedColumns.map(column => Stylesheet.unit(column.width || DEFAULT_CELL_WIDTH, 'px')).join(' + ')})`;
-            const maxWidth = `calc(${spannedColumns.map(column => Stylesheet.unit(column.maxWidth || column.width || DEFAULT_CELL_WIDTH, 'px')).join(' + ')})`;
-            const minWidth = `calc(${spannedColumns.map(column => Stylesheet.unit(column.minWidth || column.width || DEFAULT_CELL_WIDTH, 'px')).join(' + ')})`;
-
             return (<th
                 key={`header-cell-${columnId}`}
                 colSpan={colSpan}
                 className={
                     `column-${columnId + offset} ` +
                     (columnId === columns.length - 1 || columnId === R.last(columnIndices) ? 'cell--right-last ' : '')
                 }
-                style={visibleIndex < n_fixed_columns ? { maxWidth, minWidth, width } : undefined}
             >
                 {rowSorting ? (
                     <span
                         className='sort'
                         onClick={HeaderFactory.doSort(c.id, options)}
                     >
                         {HeaderFactory.getSortingIcon(c.id, options)}
-                    </span>) : ('')
+                    </span>) : ''
                 }
 
                 {((c.editable_name && R.type(c.editable_name) === 'Boolean') ||
diff --git a/packages/dash-table/src/dash-table/components/Table/Table.less b/packages/dash-table/src/dash-table/components/Table/Table.less
@@ -150,6 +150,17 @@
         }
     }
 
+    &.dash-grow {
+        .cell-0-1,
+        .cell-1-1 {
+            flex: 1 0 auto;
+        }
+
+        table {
+            width: 100%;
+        }
+    }
+
     &:not(.freeze-top):not(.freeze-left) {
         .cell-1-1 {
             .top-left-cells();
diff --git a/packages/dash-table/src/dash-table/components/Table/props.ts b/packages/dash-table/src/dash-table/components/Table/props.ts
@@ -6,6 +6,11 @@ export enum FilteringType {
     Basic = 'basic'
 }
 
+export enum ContentStyle {
+    Fit = 'fit',
+    Grow = 'grow'
+}
+
 export type ActiveCell = CellCoordinates | [];
 export type CellCoordinates = [number, number];
 export type ColumnId = string | number;
@@ -63,6 +68,7 @@ interface IProps {
     column_conditional_styles?: any[];
     column_static_dropdown?: any;
     column_static_style?: any;
+    content_style: ContentStyle;
     dataframe?: Dataframe;
     dropdown_properties: any; // legacy
     editable?: boolean;
diff --git a/packages/dash-table/tests/visual/percy-storybook/DashTable.percy.tsx b/packages/dash-table/tests/visual/percy-storybook/DashTable.percy.tsx
@@ -8,7 +8,7 @@ import fixtures from './fixtures';
 const setProps = () => { };
 
 // Legacy: Tests previously run in Python
-const fixtureStories = storiesOf('DashTable/Fixtures');
+const fixtureStories = storiesOf('DashTable/Fixtures', module);
 fixtures.forEach(fixture => fixtureStories.add(fixture.name, () => (<DashTable {...Object.assign(fixture.props)} />)));
 
 storiesOf('DashTable/Without Data', module)
diff --git a/packages/dash-table/tests/visual/percy-storybook/Width.percy.tsx b/packages/dash-table/tests/visual/percy-storybook/Width.percy.tsx

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "dash-table",`
`3`		`- "version": "3.0.0rc22",`
	`3`	`+ "version": "3.0.0rc23",`
`4`	`4`	`"description": "Dash table",`
`5`	`5`	`"main": "build/index.js",`
`6`	`6`	`"scripts": {`