LearnNewsExamplesServices
Frontmatter
id9511
title[Epic] Grid Value Banding
stateClosed
labels
enhancementepicaigrid
assigneestobiu
createdAtMar 18, 2026, 3:15 PM
updatedAtMar 18, 2026, 3:18 PM
githubUrlhttps://github.com/neomjs/neo/issues/9511
authortobiu
commentsCount2
parentIssuenull
subIssues
9512 Dynamic Value Banding Updates
9513 Optimize Grid Value Banding (startIndex Support)
9514 [Epic Sub] TreeStore Value Banding Support
9515 [Epic Sub] Value Banding styling conflicts with row selection
subIssuesCompleted4
subIssuesTotal4
blockedBy[]
blocking[]
closedAtMar 18, 2026, 3:18 PM

[Epic] Grid Value Banding

Closed v12.1.0 enhancementepicaigrid
tobiu
tobiu commented on Mar 18, 2026, 3:15 PM

Implement a "value banding" effect for grid columns. This gives cells in a specific column with the same contiguous value the same background color. It requires updating the collection, store, grid container, and grid columns to propagate and compute this state.

Key architecture:

  • collection.Base maintains a valueBandsMap Map instance (keyed by recordId) to prevent V8 hidden class de-optimizations on the Record instances or raw data objects.
  • grid.Row queries store.valueBandsMap during applyRendererOutput to inject neo-value-band-1 or neo-value-band-2 CSS classes.
  • grid.Container supports body: { stripedRows: false } to disable alternating row colors which clash with value banding.
  • An example app is added to examples/grid/valueBanding.
  • Proper test suites are implemented in test/playwright/unit/collection/ValueBanding.spec.mjs and test/playwright/unit/data/StoreValueBandingCount.spec.mjs to ensure the recalculation algorithm only evaluates linearly on fields and efficiently updates state.

Sub-tasks:

  • Add valueBandingFields and calcValueBands to collection.Base
  • Update grid/Container and grid/Row to render the correct CSS classes (neo-value-band-1, neo-value-band-2)
  • Create SCSS variables for themes
  • Add stripedRows config to grid.Body
  • Add unit test for collection and store value banding
  • Create an example app examples/grid/valueBanding
tobiu added the enhancement label on Mar 18, 2026, 3:15 PM
tobiu added the epic label on Mar 18, 2026, 3:15 PM
tobiu added the ai label on Mar 18, 2026, 3:15 PM
tobiu added the grid label on Mar 18, 2026, 3:15 PM
tobiu referenced in commit f038194 - "feat(grid): Implement value banding for grid columns (#9511)" on Mar 18, 2026, 3:17 PM
tobiu assigned to @tobiu on Mar 18, 2026, 3:17 PM
tobiu
tobiu Mar 18, 2026, 3:18 PM

Implemented via f0381948e

tobiu closed this issue on Mar 18, 2026, 3:18 PM
tobiu
tobiu Mar 18, 2026, 3:18 PM
Image
tobiu cross-referenced by #9512 on Mar 18, 2026, 3:43 PM
tobiu added sub-issue #9512 on Mar 18, 2026, 3:45 PM
tobiu cross-referenced by #9513 on Mar 18, 2026, 4:03 PM
tobiu added sub-issue #9513 on Mar 18, 2026, 4:04 PM
tobiu cross-referenced by #9514 on Mar 18, 2026, 4:07 PM
tobiu added sub-issue #9514 on Mar 18, 2026, 4:08 PM
tobiu cross-referenced by #9515 on Mar 18, 2026, 7:21 PM
tobiu added sub-issue #9515 on Mar 18, 2026, 7:21 PM