I've attempted to fill out the sizing target app with the new API, but with little success. None of the table examples are responding to the style parameters. See here: https://dash-table-review-pr-160.herokuapp.com/sizing

@Marc-Andre-Rivet Can you correct these examples so that each table has similar sizing behaviour as the HTML above it? The only exception is the "Default Styles" example.

Having a look.

@chriddyp A lot of the first issues have to do with style_table={width: 100%} missing and content_style='grow' -- starting with ellipsis / vertical scrolldown we have some issues that are a bit more involved.

1. The easy ones are fixed by adding to the list of supported props (the list was far from comprehensive) -- similar to the issue in QA style API with styling examples #162 (comment)
2. The hard ones require deeper styling (e.g. ellipsis does not work because we are styling the td, not the nested div; furthermore the div styling is problematic as it uses display: flex; which causes problems with ellipsis in general)

Will commit a first batch of fixes, create a PR for the issues at 1 and continue on until all the problems left are the hard ones and we can then prioritize those.

Great, thanks!

Is it currently possible to be full width but break into multiple lines?

@chriddyp Should be possible to do the word-wrap. Did it before the style refactoring. Will give it a go and post back here.

@chriddyp This is currently the best way to get ellipsis and word wrap:

Override the styling of the div element so it inherits the important props from the td parent:

css: [{
    selector: '.dash-cell div.dash-cell-value',
    rule: 'display: inline; white-space: inherit; overflow: inherit; text-overflow: inherit;'
}],

Ellipsis:

style_data_conditional: [{
    if: { column_id: 'foo_bar' },
    max_width: 100,
    min_width: 100,
    width: 100,
    white_space: 'no-wrap',
    overflow: 'hidden',
    text_overflow: 'ellipsis'
}],

Word wrap:

style_data_conditional: [{
    if: { column_id: 'foo_bar' },
    max_width: 100,
    min_width: 100,
    width: 100,
    white_space: 'normal',
    overflow: 'hidden',
    text_overflow: 'ellipsis'
}],