#754 add demo for AG Grid with conditional cell formatting

website/more_documentation/aggrid_documentation.py

@@ -89,3 +89,42 @@ def more() -> None:
                 {'name': 'Carol', 'age': 42},
             ],
         }).classes('max-h-40')
+
+    @text_demo('AG Grid with Conditional Cell Formatting', '''
+        This demo shows how to use [cellClassRules](https://www.ag-grid.com/javascript-grid-cell-styles/#cell-class-rules)
+        to conditionally format cells based on their values.
+        Since it is currently not possible to use the `cellClassRules` option in the `columnDefs` option,
+        we use the `run_javascript` method to set the `cellClassRules` option after the grid has been created.
+        The timer is used to delay the execution of the javascript code until the grid has been created.
+        You can also use `app.on_connect` instead.
+    ''')
+    def aggrid_with_conditional_cell_formatting():
+        ui.html('''
+            <style>
+            .cell-fail { background-color: #f6695e; }
+            .cell-pass { background-color: #70bf73; }
+           </style>
+        ''')
+
+        grid = ui.aggrid({
+            'columnDefs': [
+                {'headerName': 'Name', 'field': 'name'},
+                {'headerName': 'Age', 'field': 'age'},
+            ],
+            'rowData': [
+                {'name': 'Alice', 'age': 18},
+                {'name': 'Bob', 'age': 21},
+                {'name': 'Carol', 'age': 42},
+            ],
+        })
+
+        async def format() -> None:
+            await ui.run_javascript(f'''
+                getElement({grid.id}).gridOptions.columnApi.getColumn("age").getColDef().cellClassRules = {{
+                    "cell-fail": x => x.value < 21,
+                    "cell-pass": x => x.value >= 21,
+                }};
+                getElement({grid.id}).gridOptions.api.refreshCells();
+            ''', respond=False)
+
+        ui.timer(0, format, once=True)