Issue 489 - content_style regression (#501)

Author: Marc-Andre-Rivet

CHANGELOG.md

@@ -2,6 +2,11 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## [Unreleased]
+### Fixed
+[#489](https://github.com/plotly/dash-table/issues/489)
+- Add `fill_width` prop to replace `content_style` prop removed in the [4.0 API rework](https://github.com/plotly/dash-table/pull/446)
+
 ## [4.0.1] - 2019-07-09
 ### Changed
 [#488](https://github.com/plotly/dash-table/pull/488)

demo/AppMode.ts

@@ -89,6 +89,7 @@ function getDefaultState(
             data: mock.data,
             editable: true,
             sort_action: TableAction.Native,
+            fill_width: false,
             fixed_rows: { headers: true },
             fixed_columns: { headers: true },
             merge_duplicate_headers: false,
@@ -229,6 +230,7 @@ function getVirtualizedState() {
         tableProps: R.merge(getBaseTableProps(mock), {
             data: mock.data,
             editable: true,
+            fill_width: false,
             sort_action: TableAction.Native,
             merge_duplicate_headers: false,
             row_deletable: true,

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

@@ -684,6 +684,7 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
             tooltip_conditional,
             tooltip,
             currentTooltip,
+            fill_width,
             filter_action,
             fixed_columns,
             fixed_rows,
@@ -730,7 +731,8 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
             ...(empty[1][1] ? ['dash-empty-11'] : []),
             ...(columns.length ? [] : ['dash-no-columns']),
             ...(virtualized.data.length ? [] : ['dash-no-data']),
-            ...(filter_action !== TableAction.None ? [] : ['dash-no-filter'])
+            ...(filter_action !== TableAction.None ? [] : ['dash-no-filter']),
+            ...(fill_width ? ['dash-fill-width'] : [])
         ];
 
         const containerClasses = ['dash-spreadsheet-container', ...classes];

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

@@ -233,6 +233,17 @@
             }
         }
 
+        &.dash-fill-width {
+            .cell-0-1,
+            .cell-1-1 {
+                flex: 1 0 auto;
+            }
+
+             table {
+                width: 100%;
+            }
+        }
+
         tr {
             background-color: white;
         }

src/dash-table/components/Table/props.ts

@@ -271,6 +271,7 @@ export interface IProps {
     css?: IStylesheetRule[];
     data?: Data;
     editable?: boolean;
+    fill_width?: boolean;
     filter_query?: string;
     filter_action?: TableAction;
     locale_format: INumberLocale;
@@ -314,6 +315,7 @@ interface IDefaultProps {
     css: IStylesheetRule[];
     data: Data;
     editable: boolean;
+    fill_width: boolean;
     filter_query: string;
     filter_action: TableAction;
     merge_duplicate_headers: boolean;

src/dash-table/dash/DataTable.js

@@ -68,6 +68,7 @@ export const defaultProps = {
     dropdown_conditional: [],
     dropdown_data: [],
 
+    fill_width: true,
     fixed_columns: {
         headers: false,
         data: 0
@@ -415,6 +416,13 @@ export const propTypes = {
         column_id: PropTypes.string
     }),
 
+    /**
+     * `fill_width` toggles between a set of CSS for two common behaviors:
+     * - True: The table container's width will grow to fill the available space
+     * - False: The table container's width will equal the width of its content
+     */
+    fill_width: PropTypes.bool,
+
     /**
      * The ID of the table.
      */

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

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

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

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

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

@@ -23,6 +23,7 @@ const data = (() => {
 
 const baseProps = {
     setProps,
+    fill_width: false,
     id: 'table',
     data,
     filter_action: TableAction.Native,

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

@@ -21,6 +21,7 @@ const data = (() => {
 
 const baseProps = {
     setProps,
+    fill_width: false,
     id: 'table',
     data,
     style_data_conditional: [{ max_width: 10 }]

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

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

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

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

tests/visual/percy-storybook/fixtures.ts

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