Table style (#193)

Author: Marc-Andre-Rivet

packages/dash-table/CHANGELOG.md

@@ -2,6 +2,13 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## [3.1.0-rc19] - 2018-11-01
+### Changed
+- Change default styles [#193](https://github.com/plotly/dash-table/pull/193) [#150](https://github.com/plotly/dash-table/issues/150)
+    - prop `content_style` defaults to 'grow' instead of 'fit'
+    - prop `style_table` width nested property defaults to '100%' if not provided
+    - update default font-family from 'monospace' to `'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace`
+
 ## [3.1.0-rc18] - 2018-10-31
 ### Changed
 - Rename table component to DataTable [#187](https://github.com/plotly/dash-table/pull/187) [#154](https://github.com/plotly/dash-table/issues/154)
@@ -130,7 +137,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
     dataframe_previous -> data_previous
     dataframe_timestamp -> data_timestamp
     derived_virtual_dataframe -> derived_virtual_data
-    derived_viewport_datafram -> derived_viewport_data
+    derived_viewport_dataframe -> derived_viewport_data
 
 ## [3.1.0-rc5]
 ### Fixed

packages/dash-table/dash_table/bundle.js

@@ -163,7 +163,7 @@
         "required": false,
         "description": "`content_style` toggles between a set of CSS styles for\ntwo common behaviors:\n- `fit`: The table container's width be equal to the width of its content.\n- `grow`: The table container's width will grow to be the size of the container.\n\nNOTE - This property will likely change in the future,\nsubscribe to [https://github.com/plotly/dash-table/issues/176](https://github.com/plotly/dash-table/issues/176)\nfor more details.",
         "defaultValue": {
-          "value": "'fit'",
+          "value": "'grow'",
           "computed": false
         }
       },

packages/dash-table/dash_table/demo.js

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

packages/dash-table/dash_table/metadata.json

@@ -33,6 +33,7 @@ class App extends Component {
                 merge_duplicate_headers: false,
                 row_deletable: true,
                 row_selectable: 'single',
+                content_style: 'fit',
                 column_static_dropdown: [
                     {
                         id: 'bbb',

packages/dash-table/dash_table/package.json

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

packages/dash-table/demo/App.js

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 
 import RealTable from 'dash-table/components/Table';
 
-import 'dash-table/style/component.less';
 import Logger from 'core/Logger';
 
 import genRandomId from './utils/generate';
@@ -52,7 +51,7 @@ export const defaultProps = {
     },
     navigation: 'page',
 
-    content_style: 'fit',
+    content_style: 'grow',
     css: [],
     filtering: false,
     filtering_settings: '',

packages/dash-table/package.json

@@ -28,6 +28,10 @@ interface IState {
     forcedResizeOnly: boolean;
 }
 
+const DEFAULT_STYLE = {
+    width: '100%'
+};
+
 export default class ControlledTable extends PureComponent<ControlledTableProps, IState> {
     private readonly stylesheet: Stylesheet;
     private readonly tableFn: () => JSX.Element[][];
@@ -620,7 +624,9 @@ export default class ControlledTable extends PureComponent<ControlledTableProps,
         const rawTable = this.tableFn();
         const grid = derivedTableFragments(n_fixed_columns, n_fixed_rows, rawTable);
 
-        const tableStyle = this.tableStyle(style_table);
+        const tableStyle = R.mergeAll(
+            this.tableStyle(DEFAULT_STYLE, style_table)
+        );
 
         return (<div
             id={id}

packages/dash-table/src/dash-table/DataTable.js

@@ -1,3 +1,5 @@
+@import (reference) '~dash-table/style/reset.less';
+
 .inset-shadow(@color, @left, @top, @right, @bottom) {
     box-shadow: inset @left 0px 0px 0px @color,
         inset 0px @top 0px 0px @color,
@@ -167,12 +169,11 @@
 }
 
 .dash-spreadsheet-container {
+    .reset-css();
     display: flex;
     flex-direction: row;
     position: relative;
-}
 
-.dash-spreadsheet-container {
     .dash-spreadsheet-inner {
         box-sizing: border-box;
         display: flex;
@@ -383,7 +384,7 @@
     .dash-spreadsheet-inner table {
         border-collapse: collapse;
 
-        font-family: monospace;
+        font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
         --accent: hotpink;
         --border: lightgrey;
         --text-color: rgb(60, 60, 60);
@@ -493,10 +494,6 @@
         outline: none;
     }
 
-    .numeric {
-        font-family: monospace;
-    }
-
     .toggle-row {
         border: none;
         box-shadow: none;

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

@@ -111,5 +111,8 @@ export const derivedRelevantHeaderStyles = memoizeOneFactory((
 ));
 
 export const derivedTableStyle = memoizeOneFactory(
-    (table: Table) => convertStyle(table || {})
+    (defaultTable: Table, table: Table) => [
+        convertStyle(defaultTable),
+        convertStyle(table)
+    ]
 );

packages/dash-table/src/dash-table/components/Table/Table.less

@@ -406,6 +406,7 @@ def layout():
                             "rule": "white-space: normal",
                         }
                     ],
+                    content_style="fit",
                     style_data_conditional=[
                         { "width": "100px", "min_width": "100px", "max_width": "100px" }
                     ]

packages/dash-table/src/dash-table/derived/style/index.ts

@@ -23,6 +23,7 @@ const baseProps = {
     setProps,
     id: 'table',
     data,
+    content_style: 'fit',
     style_data_conditional: [
         { width: '20px', min_width: '20px', max_width: '20px' }
     ]

packages/dash-table/src/dash-table/style/component.less

@@ -22,6 +22,7 @@ const data = (() => {
 const baseProps = {
     setProps,
     id: 'table',
+    content_style: 'fit',
     data
 };
 

packages/dash-table/tests/dash/app_sizing.py

@@ -22,6 +22,7 @@ const data = (() => {
 const baseProps = {
     setProps,
     id: 'table',
+    content_style: 'fit',
     data,
     style_data_conditional: [{ max_width: 10 }]
 };

packages/dash-table/tests/visual/percy-storybook/Width.all.percy.tsx

@@ -22,6 +22,7 @@ const data = (() => {
 const baseProps = {
     setProps,
     id: 'table',
+    content_style: 'fit',
     data
 };
 

packages/dash-table/tests/visual/percy-storybook/Width.defaults.percy.tsx

@@ -21,16 +21,22 @@ const data = (() => {
 const baseProps = {
     setProps,
     id: 'table',
+    content_style: 'grow',
     data
 };
 
 const props = Object.assign({}, baseProps, {
     content_style: 'grow',
-    columns: columns.map((id => ({ id: id, name: id.toUpperCase(), width: '33%' }))),
+    columns: columns.map((id => ({ id: id, name: id.toUpperCase() }))),
+    style_cell: {
+        width: '33%'
+    },
+    style_table: {
+        width: '100%',
+        min_width: '100%',
+        max_width: '100%'
+    },
     css: [{
-        selector: '.dash-spreadsheet',
-        rule: 'width: 1000px; max-width: 1000px; height: 1000px;'
-    }, {
         selector: '.dash-fixed-column',
         rule: 'width: 33%;'
     }]

packages/dash-table/tests/visual/percy-storybook/Width.max.percy.tsx

@@ -22,6 +22,7 @@ const data = (() => {
 const baseProps = {
     setProps,
     id: 'table',
+    content_style: 'fit',
     data
 };
 

packages/dash-table/tests/visual/percy-storybook/Width.min.percy.tsx

@@ -159,6 +159,7 @@ export default [
     {
         name: 'dropdown with column widths',
         props: {
+            content_style: 'fit',
             style_data_conditional: [
                 { if: { column_id: 'column-2' }, width: 400 },
                 { if: { column_id: 'column-3' }, width: 80 }
@@ -288,6 +289,7 @@ export default [
         name: 'mixed percentage and pixel column widths',
         props: {
             id: 'table',
+            content_style: 'fit',
             style_data_conditional: [
                 { if: { column_id: 'column-2' }, width: 400 },
                 { if: { column_id: 'column-3' }, width: '30%' }