Black Lives Matter. Please consider donating to Black Girls Code today.

Dash table experiments height and columns orders

Dash
#1

Hi,

Two questions.

  1. Is there a way to change the default height of the dash-table-experiments? Currently I think it is 10 no matter how many rows you have. I would like to change it to something smaller or to the number of rows I have.

I create the table something like this:

    table = dt.DataTable(
        rows=get_df(columns).to_dict("records"),
        row_selectable=True,
        filterable=True,
        sortable=True,
        selected_row_indices=[],
        id='some_id'
    )

where in get_df(columns) I do

df = df[columns_chosen]

To reorder the columns of the dataframe before sending it to the table.

Locally this works as expected but when deployed to flask on AWS the ordering gets randomized again. Why’s this the case?

Columns order in mutable Datatable?
#2

Call help(dash_table_experiments.DataTable) to see all of the arguments.

>>> help(dash_table_experiments.DataTable)

class DataTable(dash.development.base_component.Component)
 |  A DataTable component.
 |
 |
 |  Keyword arguments:
 |  - id (string; optional)
 |  - editable (boolean; optional): Are the cells in the table editable?
 |  If `True`, you can listen to `rows` or `row_update` to
 |  get the updated data.
 |  - filterable (boolean; optional): Should the filtering UI in the Table appear?
 |  If `True`, you can listen to `rows` or `row_update` to
 |  get the updated data.
 |  - sortable (boolean; optional): Is the table sortable? If `True`, click on the column headers
 |  to sort by that column.
 |  If `True`, you can listen to `rows` or `row_update` to
 |  get the updated data.
 |  - resizable (boolean; optional): Are the columns resizble?
 |  If `True`, then the columns can be resized by clicking and
 |  dragging on the border on the edge of the column
 |  header. If `False`, they cannot be resized.
 |  - column_widths (list; optional): Column widths (in pixels) of each column
 |  - columns (list; optional): Order of columns. Note that the column names are specified in
 |  `rows` but without order. This attribute allows you to specify
 |  a custom order for your columns.
 |  - row_selectable (boolean; optional)
 |  - selected_row_indices (list; optional)
 |  - enable_drag_and_drop (boolean; optional)
 |  - header_row_height (number; optional)
 |  - min_height (number; optional)
 |  - min_width (number; optional)
 |  - row_height (number; optional)

min_height can be used to set the height of the table.

#3

To reorder the columns of the dataframe before sending it to the table.
Locally this works as expected but when deployed to flask on AWS the ordering gets randomized again. Why’s this the case?

df.to_dict('records') is returning something that is unordered. To control the order of the columns, I recommend setting the columns property as a set of names. From help:

 |  - columns (list; optional): Order of columns. Note that the column names are specified in
 |  `rows` but without order. This attribute allows you to specify
 |  a custom order for your columns.
1 Like
#4

also see https://github.com/plotly/dash-table-experiments/issues/34

#5

min_height seems to have stopped working for me after the resizable column width update. i think it worked before, but now doesnt work. table stuck at 10 rows (9 + header) and ignores min-height. @dynamite does it work for you now?

#6

I haven’t learned how to work custom react components yet… but looking at source for DataTable.react.js I see that I am getting the 350 default value if defaultProps.min_height is undefined. Where is this supposed be get defined?

getMinHeight() {
    if (this.getSize() < 10) {
        return (this.getSize() * 35) + 35 + 15; // 35px extra edded for the filter box and 15px added for padding
    }
    return (typeof DataTable.defaultProps.min_height !== 'undefined') ? DataTable.defaultProps.min_height : 350;
}

here my change to the gapminder DataTable example:

app.layout = html.Div([
html.H4(‘Gapminder DataTable’),
dt.DataTable(
rows=DF_GAPMINDER.to_dict(‘records’),

    # optional - sets the order of columns
    columns=sorted(DF_GAPMINDER.columns),
    min_width = 777,
    min_height = 1555,
    row_selectable=True,
    filterable=True,
    sortable=True,
    selected_row_indices=[],
    id='datatable-gapminder'
),
html.Div(id='selected-indexes'),
dcc.Graph(
    id='graph-gapminder'
),

], className=“container”)

#7

Hm, not sure. @lukesingham added this one. @lukesingham can you confirm this behaviour?

#8

Another update on this. Did more testing and the change that breaks this behavior comes in :
0.5.1 (DataTable now automatically resizes to fit data that has less than 10 rows.)

0.5.0 was respecting min_height.

Guessing the issue might be that table starts with {} empty data so the new code kicks in and sets 350 for height.
The table is dynamically populated with rows={… new data} and that min_height code is never ran again to set the updated height.

#9

Working on it! Though I am vacation at the moment. A colleague of mine is looking into it and is close to a fix. Also, related is, if you have 1 row of data and the user clicks ‘Filter’ the filter bar makes the data disappear.

2 Likes
#10

A post was merged into an existing topic: Dash DataTable - Conditional Formatting

#11

A post was split to a new topic: Dash DataTable - Cells with multiple lines

#12

Hi - did the min_height issue (i.e. it stopped working with a build) ever get resolved? I’m experiencing the same problem whilst trying to increase the height of a DataTable (to show more rows), but this property is doing nothing for me.

Thanks,
Julian

#13

Yes - have a read through this PR https://github.com/plotly/dash-table-experiments/pull/41
Instructions to test the fix out are there.

1 Like
#14

Another fix to the height issues in https://github.com/plotly/dash-table-experiments/pull/50. Should be published in 0.6.0 today