3.1 issue118 width behavior

CHANGELOG.md

@@ -270,4 +270,41 @@ Derived properties allow the component to expose complex state that can be usefu
 
 ## RC3 - Miscellaneous fixes for pagination, virtual df and viewport df
 
-    Issue: https://github.com/plotly/dash-table/pull/112
+    Issue: https://github.com/plotly/dash-table/pull/112
+
+## RC4 - Columns width percentage and default (fit to content) support
+
+    * Added prop content_style that takes values 'fit' or 'grow' (Default='fit')
+    * Added width percentage support
+    * Modified default column behavior from fixed width to 'fit content'
+    * Modified width, min-width, max-width interaction on columns
+
+### 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).
+
+    To use percentage-based column widths, add:
+
+    * content style
+        content_style='grow'
+
+    * table style (example)
+        table_style=[{ selector: '.dash-spreadsheet', rule: 'width: 100%; max-width: 100%' }]
+
+    * column with %-based width
+        columns=[{
+            id: 'column',
+            width: '40%'
+        }]
+
+### Default column width
+
+    Columns now default to 'fit to content' when no width is defined
+
+    Note: If pagination is used or the dataframe modified, the column width will be re-evaluated on each modification.
+
+### Interaction between width, min-width and max-width
+
+    Column min-width and max-width do not default to width value is not defined.

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",

dash_table/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dash-table",
-  "version": "3.1.0rc3",
+  "version": "3.1.0rc4",
   "description": "Dash table",
   "main": "build/index.js",
   "scripts": {

demo/App.js

@@ -24,6 +24,8 @@ class App extends Component {
                 columns: clone(mockData.columns).map(col => R.merge(col, {
                     editable_name: true,
                     deletable: true,
+                    minWidth: col.width,
+                    maxWidth: col.width
                 //     type: 'dropdown'
                 })),
                 editable: true,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dash-table",
-  "version": "3.1.0rc3",
+  "version": "3.1.0rc4",
   "description": "Dash table",
   "main": "build/index.js",
   "scripts": {

src/core/Stylesheet.ts

@@ -86,7 +86,6 @@ export default class Stylesheet {
 
         const result = this.stylesheet.findRule(selector);
         if (result) {
-
             if (result.rule.cssText === css || result.rule.cssText === `${selector} { ${css} }`) {
                 return;
             } else {

src/core/browser/DOM.ts

@@ -0,0 +1,18 @@
+export default class DOM {
+    public static getFirstParentOfType(element: HTMLElement, type: string): HTMLElement | undefined {
+        type = type.toUpperCase();
+
+        let current: HTMLElement = element;
+        while (current) {
+            if (current.tagName.toUpperCase() === type) {
+                return current;
+            }
+
+            if (current.parentElement !== null) {
+                current = current.parentElement;
+            } else {
+                return;
+            }
+        }
+    }
+}

src/dash-table/Table.js

@@ -43,6 +43,7 @@ export const defaultProps = {
     },
     navigation: 'page',
 
+    content_style: 'fit',
     filtering: false,
     filtering_settings: '',
     filtering_type: 'basic',
@@ -78,6 +79,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),

src/dash-table/components/CellInput/index.tsx

@@ -4,6 +4,8 @@ import React, {
 } from 'react';
 import Dropdown from 'react-select';
 
+import DOM from 'core/browser/DOM';
+
 import {
     ICellDefaultProps,
     ICellProps,
@@ -46,17 +48,23 @@ export default class CellInput extends PureComponent<ICellProps, ICellState> {
 
         return !dropdown ?
             this.renderValue() :
-            (<Dropdown
-                ref='dropdown'
-                clearable={clearable}
-                onChange={(newValue: any) => {
-                    onChange(newValue ? newValue.value : newValue);
-                }}
-                onOpen={this.handleOpenDropdown}
-                options={dropdown}
-                placeholder={''}
-                value={value}
-            />);
+            (<div className='dash-dropdown-cell-value-container dash-cell-value-container'>
+                {this.renderValue(
+                    { className: 'dropdown-cell-value-shadow cell-value-shadow' },
+                    (dropdown.find(entry => entry.value === value) || { label: undefined }).label
+                )}
+                <Dropdown
+                    ref='dropdown'
+                    clearable={clearable}
+                    onChange={(newValue: any) => {
+                        onChange(newValue ? newValue.value : newValue);
+                    }}
+                    onOpen={this.handleOpenDropdown}
+                    options={dropdown}
+                    placeholder={''}
+                    value={value}
+                />
+            </div>);
     }
 
     private renderInput() {
@@ -80,22 +88,27 @@ export default class CellInput extends PureComponent<ICellProps, ICellState> {
             onDoubleClick: onDoubleClick
         };
 
-        return (!active && this.state.value === this.props.value) ?
+        const readonly = !active && this.state.value === this.props.value;
+
+        return readonly ?
             this.renderValue(attributes) :
-            (<input
-                ref='textInput'
-                type='text'
-                value={this.state.value}
-                onBlur={this.propagateChange}
-                onChange={this.handleChange}
-                onKeyDown={this.handleKeyDown}
-                onPaste={onPaste}
-                {...attributes}
-            />);
+            (<div className='dash-input-cell-value-container dash-cell-value-container'>
+                {this.renderValue({ className: 'input-cell-value-shadow cell-value-shadow' })}
+                <input
+                    ref='textInput'
+                    type='text'
+                    value={this.state.value}
+                    onBlur={this.propagateChange}
+                    onChange={this.handleChange}
+                    onKeyDown={this.handleKeyDown}
+                    onPaste={onPaste}
+                    {...attributes}
+                />
+            </div>);
     }
 
-    private renderValue(attributes = {}) {
-        const { value } = this.propsWithDefaults;
+    private renderValue(attributes = {}, value?: string) {
+        value = value || this.propsWithDefaults.value;
 
         return (<div
             {...attributes}
@@ -175,7 +188,10 @@ export default class CellInput extends PureComponent<ICellProps, ICellState> {
 
         if (dropdown && document.activeElement !== dropdown) {
             // Limitation. If React >= 16 --> Use React.createRef instead to pass parent ref to child
-            (dropdown.wrapper.parentElement as HTMLElement).focus();
+            const tdParent = DOM.getFirstParentOfType(dropdown.wrapper, 'td');
+            if (tdParent) {
+                tdParent.focus();
+            }
         }
     }
 }