Upgrade ag-Grid to v36 - #4470
Open
lbwexler wants to merge 14 commits into
Open
Conversation
- Bump ag-grid-community / ag-grid-react devDeps to 36.x - Update installAgGrid version gate to require a v36 runtime - Migrate grid SCSS to v36's restructured DOM (single scrollable container): the removed ag-floating-top/bottom, ag-center-cols-viewport/container, and ag-body-viewport selectors now target their v36 equivalents (ag-grid-pinned-*-rows-container, ag-body-horizontal/vertical-scroll-viewport, ag-grid-scrolling-container) - Add CHANGELOG entries v36 removes no deprecated APIs and tsc passes clean against the new types. Verified against Toolbox: standard/tree/dataview grids render correctly and summary/total rows are styled properly.
ag-Grid 36 applies the theme (and thus balham's default --ag-font-* values) on its own inner .ag-styled-root element, and cells inherit their font from it - so Hoist's font set on the outer .xh-ag-grid wrapper no longer reached cells, leaving them in balham's -apple-system system font at balham's size instead of Hoist's IBM Plex Sans / sizing-mode size. Reset font-family/font-size to inherit on .ag-styled-root (in both AgGrid.scss and DataView.scss) so cells again inherit Hoist's grid font from the wrapper, matching pre-36 behavior across all sizing modes. Verified against toolbox-dev (v35) - cell font now matches.
ag-Grid 36 moved row borders and row hover onto new inner elements/vars: - Row borders are no longer given a width by the balham theme on .ag-row, so the rowBorders option (which previously set only the border color and inherited the width) rendered nothing. It now sets the full 1px border itself. - Row hover is now drawn as an overlay tinted by --ag-row-hover-color (on the inner cell containers) rather than on .ag-row::before, so Hoist's old suppression no longer applied and hover appeared always-on in balham's grey. Now driven via --ag-row-hover-color (transparent by default, --xh-grid-bg-hover under showHover). Verified against toolbox-dev (v35): both options now match - borders render only when enabled, hover only under showHover. Cell borders/focus, striping, hide-headers and DataView hover were checked and already match v35.
…der ag-Grid 36 Follow-up to the earlier font fix - same root cause. AG Grid 36 applies the balham theme's var defaults (font, --ag-background-color, --ag-row-border-color, --ag-row-hover-color) on its own inner .ag-styled-root, shadowing the bindings Hoist set on the grid wrapper. Most visible in dark mode: - rowBorders: v36 draws row borders on the inner cell containers via --ag-row-border-*; Hoist's .ag-row rules didn't reach them, so borders showed regardless of the option (always-on, esp. balham-dark #5c5c5c). Now driven via --ag-row-border-color / --ag-row-border-width on .ag-styled-root. - background: --ag-background-color re-bound on .ag-styled-root so the balham(-dark) default no longer bleeds through (e.g. the row's trailing spacer past the last column, which broke the striped look). - Consolidated the font and hover overrides onto .ag-styled-root alongside these. My earlier row-border fix targeted .ag-row (correct for v35, wrong element for v36) and only showed in light mode where the balham border is near-invisible; reverted in favor of the var-based approach. Verified against toolbox-dev (v35) in both light and dark: borders render only when enabled, striping is clean, hover only under showHover.
# Conflicts: # CHANGELOG.md
lbwexler
marked this pull request as ready for review
July 16, 2026 03:07
This was referenced Jul 24, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Upgrades ag-Grid from v35.3 to v36.0.
Dependencies
ag-grid-community/ag-grid-reactdevDeps to36.x(apps supply the runtime as peers).installAgGridversion gate to require a v36 runtime.Style changes
v36 renamed the grid's structural DOM and moved theme defaults onto an inner
.ag-styled-root; Hoist SCSS was migrated accordingly.Renamed DOM classes (
AgGrid.scss,Grid.scss,DataView.scss,ValuesTab.scss,kit/onsen/styles.scss):.ag-floating-top/.ag-floating-bottom.ag-grid-pinned-top-rows-container/.ag-grid-pinned-bottom-rows-container.ag-center-cols-viewport.ag-body-horizontal-scroll-viewport.ag-center-cols-container.ag-grid-scrolling-container.ag-body-viewport.ag-grid-viewport(main scroller) /.ag-body-vertical-scroll-viewport(scrollbar).ag-cell-no-focus.ag-cell:not(.ag-cell-focus).ag-pinned-left-header.ag-header-cell.ag-header-cell-last-left-pinnedTheming re-bind onto
.ag-styled-root(AgGrid.scss,DataView.scss) — balham redeclares its var defaults on the inner styled root, shadowing the outer wrapper, so font / background / row-hover / row-border / selected-row values are now driven through--ag-*CSS vars on that element (hover defaulted off and re-enabled under--show-hover; full-width group rows keep an explicit.ag-rowborder). v36 paints row backgrounds on the inner cell containers plus a trailing spacer past the last column, so abackground-coloron.ag-rowno longer covers the full row — selection highlight is now driven through--ag-selected-row-background-colorso it spans the whole row (was visibly truncated in narrow grids, e.g. the column-filter values list).Header / border alignment (
AgGrid.scss) — header cells given a 1px transparent l/r border so labels align with cell content; workaround suppressing a doubled column separator on each section's last header cell.Cleanup — removed dead
.ag-bl-overlayrules (class absent from v36).Functional fixes (v36 DOM)
GridModel.bodyViewportnow resolves the unified viewport).GridModel.enableFullWidthScroll(now a no-op that logs viaapiDeprecated) and removed Hoist's custom full-width scrollbar (GridHScrollbar) - v36 renders a single full-width horizontal scrollbar (spanning pinned columns) natively.Grid.ts)..ag-row.ag-full-width-row > *rule overrides on specificity (AgGrid.scss).Other
Notes
tsc --noEmitpasses clean against the new types.Follow-up (release prep)
docs/upgrade-notes/v87-upgrade-notes.md+ Breaking-Changes difficulty rating still need to be written (via thexh-upgrade-notesskill).