From 83e4b329953d775fa4082fae527c3d17a74bd9ff Mon Sep 17 00:00:00 2001
From: erwanMarmelab <erwan@marmelab.com>
Date: Tue, 6 May 2025 10:01:54 +0200
Subject: [PATCH 1/3] backport new aggrid tips

---
 docs/assets/tips.md | 109 +++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 108 insertions(+), 1 deletion(-)

diff --git a/docs/assets/tips.md b/docs/assets/tips.md
index b0b6d5a004e..c2ef3def66a 100644
--- a/docs/assets/tips.md
+++ b/docs/assets/tips.md
@@ -1940,4 +1940,111 @@ const App = () => (
 );
 
 export default App;
-```
\ No newline at end of file
+```
+
+---
+
+By using `<DatagridAG>` or `<DatagridAGClient>`, you can easily customize the cell style in the `columnDefs` definition using `cellStyle`:
+
+{% raw %}
+```jsx
+const columnDefs = [
+  // same style for each row
+  {
+    field: 'static',
+    cellStyle: {color: 'red', 'background-color': 'green'}
+  },
+  // different styles for each row
+  {
+    field: 'dynamic',
+    cellStyle: params => {
+      if (params.value === 'Police') {
+        //mark police cells as red
+        return {color: 'red', backgroundColor: 'green'};
+      }
+      return null;
+    }
+  },
+];
+```
+{% endraw %}
+
+https://www.ag-grid.com/react-data-grid/cell-styles/#cell-style
+
+---
+
+Similar to what you can do with `<Datagrid>`, you can also use [the CSS API](https://marmelab.com/react-admin/Datagrid.html#sx-css-api) to style your `<DatagridAG>` or your `<DatagridAGClient>`.
+
+{% raw %}
+```tsx
+<DatagridAG
+  columnDefs={columnDefs}
+  sx={{
+    ".ag-cell.ag-column-first" {
+      backgroundColor: "#2244CC44",
+    }
+    ".ag-cell.ag-column-last" {
+      backgroundColor: "#CC333344",
+    }
+  }}
+/>
+```
+{% endraw %}
+
+https://www.ag-grid.com/react-data-grid/cell-styles/#first--last-columns
+
+---
+
+You can add custom CSS classes to any column or cell in `DatagridAG` or `DatagridAGClient`, using the  `cellClass` or `cellClassRules` keys of `columnDefs`:  
+
+{% raw %}
+```tsx
+const columnDefs = [
+  // return same class for each row
+  {
+    field: 'static',
+    cellClass: 'my-class'
+  },
+  // return same array of classes for each row
+  {
+    field: 'staticArray',
+    cellClass: ['my-class1','my-class2'],
+  },
+  // return class based on function
+  {
+    field: 'function',
+    cellClass: params => {
+      return params.value === 'something' ? 'my-class-1' : 'my-class-2';
+    },
+  },
+  // return array of classes based on function
+  {
+    field: 'functionArray',
+    cellClass: params => ['my-class-1','my-class-2'],
+  },
+  // return array of classes based on many functions with `cellClassRules`
+  {
+    field: 'functionRules',
+    cellClassRules: {
+      // apply green to 2008
+      'rag-green-outer': params => params.value === 2008,
+      // apply blue to 2004
+      'rag-blue-outer': params => params.value === 2004,
+      // apply red to 2000
+      'rag-red-outer': params => params.value === 2000,
+    }
+  }
+  // return array of classes based on many functions with `cellClassRules`
+  {
+    field: 'simplifiedFunctionRules',
+    cellClassRules: {
+      'rag-green': 'x < 20',
+      'rag-blue': 'x >= 20 && x < 25',
+      'rag-red': 'x >= 25',
+    }
+  }
+];
+```
+{% endraw %}
+
+https://www.ag-grid.com/react-data-grid/cell-styles
\ No newline at end of file

From a470ad308d9e1231d2633baef0d374a14e78f0d1 Mon Sep 17 00:00:00 2001
From: erwanMarmelab <erwan@marmelab.com>
Date: Fri, 16 May 2025 10:33:16 +0200
Subject: [PATCH 2/3] [skip ci] divide by two the example size

---
 docs/assets/tips.md_ignore | 31 ++++---------------------------
 1 file changed, 4 insertions(+), 27 deletions(-)

diff --git a/docs/assets/tips.md_ignore b/docs/assets/tips.md_ignore
index c2ef3def66a..cc1e8cc038b 100644
--- a/docs/assets/tips.md_ignore
+++ b/docs/assets/tips.md_ignore
@@ -2000,41 +2000,18 @@ You can add custom CSS classes to any column or cell in `DatagridAG` or `Datagri
 {% raw %}
 ```tsx
 const columnDefs = [
-  // return same class for each row
-  {
-    field: 'static',
-    cellClass: 'my-class'
-  },
-  // return same array of classes for each row
-  {
-    field: 'staticArray',
-    cellClass: ['my-class1','my-class2'],
-  },
-  // return class based on function
-  {
-    field: 'function',
-    cellClass: params => {
-      return params.value === 'something' ? 'my-class-1' : 'my-class-2';
-    },
-  },
-  // return array of classes based on function
-  {
-    field: 'functionArray',
-    cellClass: params => ['my-class-1','my-class-2'],
-  },
-  // return array of classes based on many functions with `cellClassRules`
+  { field: 'static', cellClass: 'my-class' },
+  { field: 'staticArray', cellClass: ['my-class1','my-class2'] },
+  { field: 'function', cellClass: params => params.value === 'something' ? 'my-class-1' : 'my-class-2' },
+  { field: 'functionArray', cellClass: params => ['my-class-1','my-class-2'] },
   {
     field: 'functionRules',
     cellClassRules: {
-      // apply green to 2008
       'rag-green-outer': params => params.value === 2008,
-      // apply blue to 2004
       'rag-blue-outer': params => params.value === 2004,
-      // apply red to 2000
       'rag-red-outer': params => params.value === 2000,
     }
   }
-  // return array of classes based on many functions with `cellClassRules`
   {
     field: 'simplifiedFunctionRules',
     cellClassRules: {

From e59da990242a3ca97a590a8d6dc9b19e3e930a45 Mon Sep 17 00:00:00 2001
From: erwanMarmelab <erwan@marmelab.com>
Date: Fri, 16 May 2025 10:33:47 +0200
Subject: [PATCH 3/3] [skip ci] fix typo

---
 docs/assets/tips.md_ignore | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/assets/tips.md_ignore b/docs/assets/tips.md_ignore
index cc1e8cc038b..cd5180afec5 100644
--- a/docs/assets/tips.md_ignore
+++ b/docs/assets/tips.md_ignore
@@ -2011,7 +2011,7 @@ const columnDefs = [
       'rag-blue-outer': params => params.value === 2004,
       'rag-red-outer': params => params.value === 2000,
     }
-  }
+  },
   {
     field: 'simplifiedFunctionRules',
     cellClassRules: {