wip - attempt at % width (#115)

Author: Marc-Andre-Rivet

packages/dash-table/dash_table/bundle.js

@@ -55,7 +55,7 @@ class StylesheetFacade {
 export default class Stylesheet {
     private stylesheet: StylesheetFacade;
 
-    static unit(dimension: any, defaultUnit: 'em' | 'rem' | 'px' = 'px') {
+    static unit(dimension: any, defaultUnit: 'em' | 'rem' | 'px' | '%' = 'px') {
         if (Stylesheet.hasUnit(dimension)) {
             return dimension;
         } else {
@@ -65,7 +65,7 @@ export default class Stylesheet {
 
     static hasUnit(dimension: any) {
         return typeof dimension === 'string' &&
-            /^\d+(\.\d+)?(px|em|rem)$/.test(dimension);
+            /^\d+(\.\d+)?(px|em|rem|%)$/.test(dimension);
     }
 
     constructor(private readonly prefix: string) {

packages/dash-table/dash_table/demo.js

@@ -617,14 +617,16 @@ export default class ControlledTable extends Component<ControlledTableProps> {
 
         R.forEach(column => {
             const width = Stylesheet.unit(column.width || DEFAULT_CELL_WIDTH, 'px');
+            const maxWidth = Stylesheet.unit(column.maxWidth || column.width || DEFAULT_CELL_WIDTH, 'px');
+            const minWidth = Stylesheet.unit(column.minWidth || column.width || DEFAULT_CELL_WIDTH, 'px');
 
             this.stylesheet.setRule(
                 `.dash-spreadsheet-inner td.column-${typeIndex}`,
-                `width: ${width}; max-width: ${width}; min-width: ${width};`
+                `width: ${width}; max-width: ${maxWidth}; min-width: ${minWidth};`
             );
             this.stylesheet.setRule(
                 `.dash-spreadsheet-inner th.column-${typeIndex}`,
-                `width: ${width}; max-width: ${width}; min-width: ${width};`
+                `width: ${width}; max-width: ${maxWidth}; min-width: ${minWidth};`
             );
 
             ++typeIndex;
@@ -725,7 +727,7 @@ export default class ControlledTable extends Component<ControlledTableProps> {
             'dash-spreadsheet-container',
             ...(n_fixed_rows ? ['freeze-top'] : []),
             ...(n_fixed_columns ? ['freeze-left'] : [])
-        ]
+        ];
 
         const cells = this.getCells();
         const grid = this.getFragments(cells, n_fixed_columns, n_fixed_rows);

packages/dash-table/src/core/Stylesheet.ts

@@ -180,21 +180,17 @@ export default class HeaderFactory {
 
             // 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 ' : '')
-                    // (visibleIndex < n_fixed_columns ? `frozen-left frozen-left-${visibleIndex}` : '')
-
                 }
-                style={visibleIndex < n_fixed_columns ? {
-                    maxWidth: width,
-                    minWidth: width,
-                    width: width
-                } : undefined}
+                style={visibleIndex < n_fixed_columns ? { maxWidth, minWidth, width } : undefined}
             >
                 {rowSorting ? (
                     <span

packages/dash-table/src/dash-table/components/ControlledTable/index.tsx

@@ -81,11 +81,6 @@
     display: flex;
     flex-direction: column;
 
-    &.freeze-left,
-    &.freeze-top {
-        overflow: hidden !important;
-    }
-
     *,
     *:after,
     *:before {
@@ -121,24 +116,38 @@
         }
     }
 
-    .row-0 {
-        display: flex;
-        flex: 0 0 auto;
-        flex-direction: row;
-    }
+    &.freeze-left,
+    &.freeze-top {
+        overflow: hidden !important;
 
-    .row-1 {
-        display: flex;
-        flex-direction: row;
-        overflow: scroll;
-    }
+        .row-0 {
+            display: flex;
+            flex: 0 0 auto;
+            flex-direction: row;
+        }
+
+        .row-1 {
+            display: flex;
+            flex-direction: row;
+            overflow: scroll;
+        }
+
+        .cell-0-0,
+        .cell-1-0 {
+            flex: 0 0 auto;
+            left: 0;
+            position: sticky;
+            z-index: 400;
+        }
+
+        .cell-0-1 {
+            z-index: 300;
+            flex: 0 0 auto;
+        }
 
-    .cell-0-0,
-    .cell-1-0 {
-        flex: 0 0 auto;
-        left: 0;
-        position: sticky;
-        z-index: 400;
+        .cell-1-1 {
+            flex: 0 0 auto;
+        }
     }
 
     &:not(.freeze-top):not(.freeze-left) {
@@ -181,15 +190,6 @@
         }
     }
 
-    .cell-0-1 {
-        z-index: 300;
-        flex: 0 0 auto;
-    }
-
-    .cell-1-1 {
-        flex: 0 0 auto;
-    }
-
     .cell {
         td, th {
             .inset-shadow(var(--border), 0px, 0px, -1px, -1px);
@@ -453,4 +453,4 @@ th:hover .sort {
 .dash-spreadsheet-inner th:hover .column-header--delete {
     color: var(--accent);
     opacity: 1;
-}
+}

packages/dash-table/src/dash-table/components/HeaderFactory.tsx

@@ -27,6 +27,9 @@ export interface IColumn {
     editable?: boolean;
     name: string;
     options?: { label: string | number, value: any }[]; // legacy
+    width?: string | number;
+    maxWidth?: string | number;
+    minWidth?: string | number;
     [key: string]: any;
 }