Hi,
it seems like every column in a datatable automatically has the same width.
Is there a way to change this behaviour?
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
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…
Fantastic package, by the way!
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.
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?
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.
Hi!
Any plan to release the complete datatable component as the adazzle table?
I am quite interested in this component!
Thank you!
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/
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
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:
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.
The columns of my table should have very different width values, is there a way to assign a different width to each column ?
I was thinking of doing the same thing as well.
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”
Thanks for the heads up! I can’t believe I missed that on the Data Tables sizing page.
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