Summary
When using st_pivot_table with execution_mode="threshold_hybrid", the layout grid alignment completely breaks if the total cell count exceeds the default DOM budget threshold of 5,000 cells. The table headers, data cells, and Grand Total rows become severely misaligned visually.
The layout only renders properly (perfectly aligned) if I artificially limit the dataset using .head() so that the total cell count stays below 5,000.
Steps to reproduce
I am rendering a pivot table using a dataset within an @st.fragment. Here is the configuration I am using:
st_pivot_table(
data=filtered_data,
key="sales_pivot",
rows=['Merchant_State', 'Merchant_City'],
columns=['dt'],
values=['Amount'],
aggregation="sum",
row_layout="hierarchy",
execution_mode="threshold_hybrid",
max_height=500,
sticky_headers=True
)
Actual behavior
When the data exceeds 5,000 cells, the browser console/Streamlit logs output warnings regarding the DOM budget and virtualization. Concurrently, the table UI breaks: column widths for headers, body cells, and the Grand Total row fail to sync, making the component look completely broken and distorted.
Logs output:
Total cells (6 204) exceeds DOM budget (5 000). Virtualization enabled.
6 204 cells exceed DOM budget (5 000). Virtualization recommended.
forced:threshold_hybrid — execution_mode explicitly set to threshold_hybrid (automatic row-count and payload thresholds are not applied) Drill-down uses a server round-trip to fetch matching rows from the original dataset.
Expected behavior
Even when virtualization is enabled and threshold_hybrid is active, the grid/flexbox layout should strictly preserve column alignment across headers, data rows, and totals, regardless of the cell count.
Questions / Request
- Is there an undocumented parameter to increase the
DOM budget directly from the Python side?
- How should we handle the layout misalignment triggered by the virtualization engine when handling >5k cells?
Environment
- Streamlit version: 1.57.0
- streamlit-pivot-table version: 0.5.0
- Browser: Chrome
Summary
When using
st_pivot_tablewithexecution_mode="threshold_hybrid", the layout grid alignment completely breaks if the total cell count exceeds the default DOM budget threshold of 5,000 cells. The table headers, data cells, and Grand Total rows become severely misaligned visually.The layout only renders properly (perfectly aligned) if I artificially limit the dataset using
.head()so that the total cell count stays below 5,000.Steps to reproduce
I am rendering a pivot table using a dataset within an
@st.fragment. Here is the configuration I am using:Actual behavior
When the data exceeds 5,000 cells, the browser console/Streamlit logs output warnings regarding the DOM budget and virtualization. Concurrently, the table UI breaks: column widths for headers, body cells, and the Grand Total row fail to sync, making the component look completely broken and distorted.
Logs output:
Expected behavior
Even when virtualization is enabled and
threshold_hybridis active, the grid/flexbox layout should strictly preserve column alignment across headers, data rows, and totals, regardless of the cell count.Questions / Request
DOM budgetdirectly from the Python side?Environment