Dash DataTable - Column width

Dash Python
1

Hi,
it seems like every column in a datatable automatically has the same width.
Is there a way to change this behaviour?

1 Like
2

This isn’t possible right now but it looks like it would be an easy addition. We would just need to add a width property here: https://github.com/plotly/dash-table-experiments/blob/56a4ecdaf331252817692070de5910af47e8e332/src/components/DataTable.react.js#L90

2 Likes
3

I am definitely interested in this option as well. I tried doing what you said and made this alteration:

newState.columns = columnNames.map(c => ({
        key: c,
        name: c,
        editable: Boolean(props.editable),
        sortable: Boolean(props.sortable),
        filterable: Boolean(props.filterable),
		width: Boolean(props.width)
    }));

But when I reinstall the package just using python setup.py install, it complains and gives me:

Exception: Unexpected keyword argument width

Is there some step where I need to rebuild/reinstall the JS portions of the package? I am a total JS noob…

4

Fantastic package, by the way!

1 Like
5

Yeah, you need to rebuild with $ npm run prepublish. You’ll also need to add this prop to the propTypes at the bottom: dash-table-experiments/src/components/DataTable.react.js at 56a4ecdaf331252817692070de5910af47e8e332 · plotly/dash-table-experiments · GitHub
Also, we don’t need Boolean around Boolean(props.width) since it isn’t true or false, it’s just a number.

6

Okay, thanks so much. Trying these additional steps now. I was thinking Boolean for width because I was thinking of having it be width-adjustable rather than setting a width.

Can you think of a simple way to do this? JQuery UI has a simple resizable function. Is there something like this in React?

1 Like
7

This functionality is built-in to the undelrying datatable that dash is using, see http://adazzle.github.io/react-data-grid/examples.html#/resizable-cols for an example. We just need to expose this property in the Dash code.

1 Like
8

Hi!

Any plan to release the complete datatable component as the adazzle table?

I am quite interested in this component! :grinning:

Thank you!

9

Column widths has been released as part of 0.5.2, upgrade with

pip install dash-table-experiments==0.5.2

Here is the PR: https://github.com/plotly/dash-table-experiments/pull/32

Special thanks to a plotly customer who sponsored this work. If your company or organization would like to sponsor any Dash features, please reach out: https://plot.ly/products/consulting-and-oem/

2 Likes
10

This has been added in Resizable columns by chriddyp · Pull Request #33 · plotly/dash-table-experiments · GitHub, v0.5.3, upgrade with

pip install dash-table-experiments==0.5.3
1 Like
11

resizable-columns
resizable-columns.gif1263×649 67.8 KB

1 Like
12

Chris,

Thanks to you and the customer for the adjustable column width!

Now testing out the table, I am having another height setting problem :/. The min-width seems to be respected and passed along but the min height is not. Do you have an example of how to control the min-height (really just want to set the number of rows the table is displaying).

For example in your tableUsage.py example i just set the min_width and min_height to 777, and 555. I include that code fragment and how it ends up being rendered, with min-width making it into the style for the parent component as width but min-height seems to be ignored and react-grid-Grid min-height is still stuck at default 350px.

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 = 555,
        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")

and the result is this:

image
image.png1021×570 54 KB

13

By the way i tried some permutations of setting the parent style to have the height as a percentage of viewport height, similar to what worked with your help for dcc.Graph component before, but what I tried didn’t seem to work for the DataTable.

14

The columns of my table should have very different width values, is there a way to assign a different width to each column ?

15

I was thinking of doing the same thing as well.

16

The dash-table-experiment is deprecated but it is possible to set the width of individual columns in the new data-table.

https://dash.plot.ly/datatable/sizing “Individual Column Widths”

1 Like
17

Thanks for the heads up! I can’t believe I missed that on the Data Tables sizing page.

18

FYI there are many new examples in the new width chapter: https://dash.plotly.com/datatable/width. We recently updated this chapter 📣 New Documention on Setting DataTable & Column Widths & Heights

1 Like