Add AG Grid theme customization guide to documentation

[masenf]

Type of change

• This change requires a documentation update

Description

This PR adds comprehensive documentation for customizing AG Grid themes in reflex-enterprise. The new section covers:

1. CSS Variables Overview – Lists commonly customized AG Grid CSS variables for typography, density, borders, backgrounds, headers, and accents
2. Scoping Overrides – Shows how to wrap grids in a parent class to prevent style leakage when multiple grids exist on a page
3. Stylesheet Integration – Explains how to load custom CSS files via the stylesheets parameter on rxe.App
4. Inline Style Overrides – Documents how to set CSS variables directly via the style dict, with a warning about specificity and !important
5. Per-Cell Custom Classes – Demonstrates using cellClass and cellClassRules to apply conditional styling to individual cells based on their values

The documentation includes practical code examples for each approach, making it easy for users to customize AG Grid appearance to match their design requirements.

Changes

• Extended docs/enterprise/ag_grid/theme.md with 176 lines of new documentation and examples covering theme customization techniques

https://claude.ai/code/session_01AZ83QRYVb3yyCYPqGdphYz

[codspeed-hq]

Merging this PR will not alter performance

✅ 9 untouched benchmarks

---

_{Comparing claude/ag-grid-theming-docs-sgU2A (0867c3a) with main (0f46c0e)}

[greptile-apps]

Greptile Summary

This PR extends docs/enterprise/ag_grid/theme.md with a comprehensive guide for customizing AG Grid themes via CSS variables, scoped wrapper classes, stylesheet loading, inline style overrides, and per-cell conditional classes.

• P1 – broken cellClassRules examples: The string expressions use params.value, but AG Grid's expression evaluator only exposes value (and x) in that context — params is not a top-level variable. Every expression will silently evaluate to undefined (falsy), so none of the status classes will ever be applied. Both the example code and the preceding prose need to be corrected to use value instead of params.value.

Confidence Score: 3/5

The PR should not merge as-is; the cellClassRules string expression examples are factually incorrect and will not work for users who copy them.

A P1 documentation bug — params.value in AG Grid string expressions silently produces no output and is directly contradicted by official AG Grid docs — warrants a below-ceiling score. The rest of the content is well-structured but the incorrect example needs to be fixed before merging.

docs/enterprise/ag_grid/theme.md — the cellClassRules section (lines 208–221)

Important Files Changed

Filename	Overview
docs/enterprise/ag_grid/theme.md	Adds 176-line AG Grid theme customization guide; contains a P1 bug where params.value is used in cellClassRules string expressions where params is not in scope (should be value), plus a minor inaccuracy in the !important specificity explanation.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[User selects theme prop] --> B{Built-in theme class applied to grid root element}
    B --> C[.ag-theme-quartz / balham / alpine / material]
    C --> D{How to customize?}
    D --> E[External stylesheet assets/ag_grid_theme.css]
    D --> F[Inline style dict --ag-* variables]
    D --> G[cellClass / cellClassRules per-cell conditional classes]
    E --> H[Load via rxe.App stylesheets param]
    F --> I[Set on grid element]
    G --> J[JS string expression: value or x available NOT params.value]
    H --> K[Scoped to .custom-ag-grid wrapper to avoid leakage]

Loading

_{Reviews (1): Last reviewed commit: "docs(ag-grid): document custom theming v..." | Re-trigger Greptile}

[greptile-apps]

params is not in scope for cellClassRules string expressions

AG Grid string expressions for cellClassRules are evaluated in a context where the cell value is exposed as value (and aliased as x), but params is not a top-level variable (AG Grid expressions docs). Using params.value will silently evaluate to undefined, making every expression falsy — no status classes will ever be applied.

The text above the example also says "The cell's value is available as params.value", which reinforces this mistake. Use value instead.

Suggested change

	- `cellClassRules` is a mapping of `class name -> JS expression`; the class is applied when the expression evaluates truthy. The cell's value is available as `params.value`.
	```python
	column_defs = [
	{"field": "project"},
	{
	"field": "status",
	"cellClass": "status-pill",
	"cellClassRules": {
	"status-active": "params.value === 'Active'",
	"status-blocked": "params.value === 'Blocked'",
	"status-complete": "params.value === 'Complete'",
	"status-planning": "params.value === 'Planning'",
	},
	- `cellClassRules` is a mapping of `class name -> JS expression`; the class is applied when the expression evaluates truthy. The cell's value is available as `value` (or the shorthand `x`).
	```python
	column_defs = [
	{"field": "project"},
	{
	"field": "status",
	"cellClass": "status-pill",
	"cellClassRules": {
	"status-active": "value === 'Active'",
	"status-blocked": "value === 'Blocked'",
	"status-complete": "value === 'Complete'",
	"status-planning": "value === 'Planning'",
	},
	},
	]

[greptile-apps]

Specificity explanation is inaccurate

The warning attributes the need for !important to CSS specificity, but CSS custom property declarations follow the cascade, not traditional specificity rules. Inline styles already win over class-selector declarations for custom properties without !important. The actual reason an inline override may fail is that some AG Grid builds declare their theme variables with !important themselves, or that Reflex's style serialization strips unknown CSS properties. The current explanation may confuse users who test their own overrides and find they work fine without !important.