search

plotly / dash-pivottable

react-pivottable in Dash
MIT License
192 stars 52 forks source link

PivotTable will not accept style arg #7

Open snowfalldata opened 5 years ago

snowfalldata commented 5 years ago
Screen Shot 2019-07-13 at 10 34 49 PM

Adding a style command to set the width has no effect on graph or iframe.

Example:

Pivot table test

html.Div(dash_pivottable.PivotTable( id='table', data=data, cols=['Day of Week'], colOrder="key_a_to_z", rows=['Party Size'], rowOrder="key_a_to_z", rendererName="Table", aggregatorName="Average", vals=["Total Bill"], valueFilter={'Day of Week': {'Thursday': False}}, ), style= {'width': 300}; ),

Row 4

awshum commented 5 years ago

@snowfalldata, your style keyword argument is on the html.Div html component. Your code successfully shrinks the Div down to 300 pixels but your table is overflowing.

image

If you just want to contain the table in the div and add scrolling or hide anything that is larger than the Div then consider using the CSS style overflow (you can set it to scroll or hidden.

Otherwise, if you want to add style directly to the pivot table, you will need to create apply CSS after the table has been rendered. You can do this by adding a stylesheet in the assets folder by editing the Dash app's index_string and move the {%css%} template after the {%renderer%}. For more information about index_string and adding CSS to Dash apps, see https://dash.plot.ly/external-resources.

rmaranhao commented 4 years ago

Did you solve this? I have the same problem but I could not find the correct CSS tags.

Is it possible to use the autosize, height and width parameters available in the original components?

Thanks in advance, Roberto