A simpler interface for multi-line cells and ellipses?

[chriddyp]

Currently, multi-line cells requires some pretty complex selectors and rules:

        dash_table.DataTable(
            style_table={'width': '100%'},
            style_data={'whiteSpace': 'normal'},
            content_style='grow',
            css=[{
                'selector': '.dash-cell div.dash-cell-value',
                'rule': 'display: inline; white-space: inherit; overflow: inherit; text-overflow: inherit;'
            }],
            data=df_election.to_dict('rows'),
            columns=[{'id': c, 'name': c} for c in df_election.columns]
        ),

How can we make this simpler?

[chriddyp]

From #178 by @Marc-Andre-Rivet

The dash-table exposes style_cell to style cells but trying to setup text ellipses on a cell by using

style_cell={
    "whiteSpace": "nowrap",
    "overflow": "hidden",
    "textOverflow": "ellipsis",
},

yields incorrect results. This is because the style_cell applies to the td element and the text is nested in a div element (class dash-cell-value) + the div element itself has display: flex to correctly align itself, but prevents ellipses.

One approach for the div to show ellipses when necessary, is to make it display inline | inline-block | block and adjust positioning accordingly. Furthermore, the div element should inherit white-space | overflow | text-overflow | word-wrap from its parent.

While this works, it's very specific to this div and this cell and may break easily.

We should explore if we can do away with the div entirely and put the text directly in the td element and if other approaches can work and apply to the dropdowns and inputs too.

This may also cause problems with the way the fixed headers & rows width gets coerced / calculated from the content.

[WinnieFan-Xinxin]

For the current version of data_table, could the value in a certain cell be dragged to overwrite the values in other cells horizontally or vertically?
(I only know that for the version of 'dash_table_experiments', the value in some cell can be dragged vertically to overwrite the values of cells in the same column)
Could anyone help me with this question? Thank you in advance!

[wbrgss]

With this extra CSS, alignment appears broken in the docs:

I'm happy to make an issue in dash-docs about this. However, by default, multi-line cells work fairly well for me, at least with the defaults:

Can you explain what this extra CSS is intended to accomplish @Marc-Andre-Rivet? Is it useful for fixed columns?