Repository navigation
"View as Table" option for Mixed Charts causes first result set to overlap second result set #42000
Description
Activity
This bug was addressed in PR #37777, which was merged on June 29, 2026. The fix adds logic to properly unmount inactive result table tabs so they don't remain visible and overlap when switching between "Results", "Results 2", etc. in the DataTablesPane for mixed charts.
If you're on
master / latest-dev, this fix should already be included. Could you confirm whether you're seeing this on a build that includes that PR? If you pulledmasterbefore June 29, 2026, you'd still see the overlap.To reply, just mention @dosu.
Docs are dead. Just use Dosu.
@dosu Thanks for the suggestion. I verified the fix from #37777, but the issue is still reproducible on the latest
master/latest-dev.The changes in #37777 do not fully resolve the problem. When opening View as Table for a Mixed Chart and switching to the second result set, the first result set still overlaps the second one.
I've reproduced this on the latest development branch, so it appears the issue is not completely addressed and may require additional investigation.
Thanks for confirming and testing this. You're right — looking at the current code, the fix from #37777 doesn't fully resolve the issue because the tab children are still rendered unconditionally [1]:
.map((pane, idx) => ({ key: idx === 0 ? ResultTypes.Results : `${ResultTypes.Results} ${idx + 1}`, label: idx === 0 ? t('Results') : t('Results %s', idx + 1), children: pane, // always rendered regardless of active tab }));
Since the
Tabscomponent doesn't usedestroyInactiveTabPane, Ant Design keeps all inactive tab panes in the DOM. Combined with the CSS positioning (nestedposition: relativeandheight: 100%on.ant-tabs-tabpane), the inactive result tables remain visible and overlap the active one [2].A fix would be to conditionally render tab children based on the active tab key:
.map((pane, idx) => { const tabKey = idx === 0 ? ResultTypes.Results : `${ResultTypes.Results} ${idx + 1}`; return { key: tabKey, label: idx === 0 ? t('Results') : t('Results %s', idx + 1), children: activeTabKey === tabKey ? pane : null, }; });
Alternatively, adding
destroyInactiveTabPaneto theTabscomponent [3] would also solve this by unmounting inactive tab content from the DOM:<Tabs destroyInactiveTabPane tabBarExtraContent={CollapseButton} activeKey={panelOpen ? activeTabKey : ''} onTabClick={handleTabClick} items={tabItems} />
Either approach should prevent the overlap. The conditional rendering option is more explicit and avoids potential re-mount costs when switching back and forth between tabs.
To reply, just mention @dosu.
Docs are dead. Just use Dosu.
@MallikarjunaReddyN would you be willing/interested in opening a PR taking Dosu's suggestion? If not, I can.
@rusackas I’d be interested in taking this on.
Reacted by Evan Rusackas@dosu This issue appears to be resolved by the recently merged PR #41636.
The PR updates the flex layout styling from:
.ant-tabs-tabpane {
display: flex;
flex-direction: column;
}to:
.ant-tabs-content {
display: flex;
flex-direction: column;
}I verified the latest changes and can confirm that switching between result sets in View as Table no longer causes the first result set to overlap subsequent result sets.
Glad to hear it's fixed! Thanks for the deep dive!
@rusackas the issue is appearing again in latest-dev
Bug description
When viewing a Mixed Chart and selecting "View as Table", the table output is rendered incorrectly when multiple query result sets are returned.
The first result set overlaps the second result set, making the table difficult to read and causing data from different queries to appear on top of each other.
Steps to Reproduce
Current Behavior
Expected Behavior
Screenshots/recordings
Superset version
master / latest-dev
Python version
3.11
Node version
18 or greater
Browser
Chrome
Additional context
No response
Checklist