Table style

CHANGELOG.md

@@ -2,6 +2,12 @@
 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 [#]() [#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
+
 ## [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 +136,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

dash_table/metadata.json

@@ -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
         }
       },

demo/App.js

@@ -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',

src/dash-table/DataTable.js

@@ -52,7 +52,7 @@ export const defaultProps = {
     },
     navigation: 'page',
 
-    content_style: 'fit',
+    content_style: 'grow',
     css: [],
     filtering: false,
     filtering_settings: '',

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

@@ -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}

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

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

tests/dash/app_sizing.py

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

tests/visual/percy-storybook/Width.all.percy.tsx

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

tests/visual/percy-storybook/Width.defaults.percy.tsx

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

tests/visual/percy-storybook/Width.max.percy.tsx

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

tests/visual/percy-storybook/Width.min.percy.tsx

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

tests/visual/percy-storybook/Width.percentages.percy.tsx

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

tests/visual/percy-storybook/Width.width.percy.tsx

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

tests/visual/percy-storybook/fixtures.ts

@@ -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%' }