📣 Dash Pivottable Released

hey @xhlu this is a great product, thank you for the effort, i have two minor questions

  1. Is there a way to set the precision of the computed field (in my case Sum) for some reason it only goes 2 decimal places out, even if the column being summed has a longer float32 object

  2. In an ideal world, I would like the option to hide the the selection windows, and only display the resulting pivotTable, I wasn’t exactly sure if this is possible, what would be the best approach, also to hide it in the CSS ?

Thanks

Anyone know if there’s a way to hide the UI so it only renders the Pivot table part?

Edit: Never mind I figured it out. For anyone trying to figure this out in the future add the following to your CSS:

.pvtAxisContainer {
	display: none;
}

.pvtVals{
	display: none;
}

.pvtRenderers{
	display: none;
}

This keeps Output UI with what ever you’ve defined as the input in your code to generate the table.

My use case is I need to display data in a pivot form with multi column and multi index. Spent most of the day trying different table render solutions for pivot data but none seemed to work how I was hoping with a multi index and column pivot. This seemed to be the best result but I was stuck with the outer UI. I don’t need the Drag and Drop function for this table and I didn’t want to waste screen real-estate on the drag and drop UI.

.pvtAxisContainer does the left UI

.pvtVals does the top UI

.pvtRenderers does the dropdown UI

You can pick which to hide, for example if you want to lock the data but still give the user the dropdown to change between table/graphs only include these two:

.pvtAxisContainer {
	display: none;
}

.pvtVals{
	display: none;
}

Edit following up: Oddly enough the pvt.Dropdown did remove the dropdown… until I deployed the app with the changes lol. Actually thinking back it might disable until page refresh which re-renders the dropdown as the pvtRenderers was still on. The actual way to disable it is with pvtRenderers I’ve updated the code bocks above to the correct values

1 Like

@useradam_123 I just read your post after making my post above with the follow up ends.

I have your answer for question 2 I had the same question today and figured out the solution. You can pick and choose which UI inputs to render see my post above this reply.

Thanks
Payton

1 Like

Hey Adam I finally was requested by a user to have some changes to a pivot table with the decimals. I found the way to adjust the decimal rendering by editing the JS file.

Go to your folder where your python environment is located and path to:

YOUR-VENV-LOCATION\Lib\site-packages\dash_pivottable\

Open the file “dash_pivottable.dev.js”

Do a crtl-f search and look for:

digitsAfterDecimal: 2,\n

replace the 2 with what ever you want then save the file.

In my case I didn’t want to display any decimals so rounded and converted to int and still would display at 100.00

I set mine to be:

digitsAfterDecimal: 0,\n

If your app is in production you will need to re-load it for the change to apply.

In theory you can adjust other things in this same area if you want to tweak how the numbers are displayed, like change the thousand and decimal separators.

Example $1,234.56 can be changed to display as €1.234,56

Thanks
Payton

1 Like

is there a way to do it via overwrites without having to edit the underlying package via a patch. this wont work in production the way our deployments are configured.

yes, you must transform to dictionary

example:
df = df.to_dict(‘records’)

What is performance like with this?

I have a view of data circa 20K rows, which I put into Dash_AG_Grid.

Is this package performant pivoting on those volumes?

Is there a chance to choose the color for every part of the stacked column chart ?

hi Lu, does this component support size changing, ie: how do i change the size of the pivot table? thank you

wrap your PivotTable() with html.Div(key=unique_id ,…), unique_id = f"pivot-{n_clicks}", everything will ok, interactive with other filtering components.
I had tested through!