Add support for new Selection API while maintaining backward compatibility with deprecated API, update tests and propCategories.js

Author: sdidier-dev

src/lib/fragments/AgGrid.react.js

@@ -465,6 +465,10 @@ export default class DashAgGrid extends Component {
             }
             if (GRID_NESTED_FUNCTIONS[target]) {
                 let adjustedVal = value;
+                if (target === 'rowSelection' && typeof value === 'string') {
+                // to still support rowSelection='single' | 'multiple' deprecated in v32.3.4
+                    return value
+                }
                 if ('suppressCallback' in value) {
                     adjustedVal = {
                         ...adjustedVal,
@@ -1001,13 +1005,13 @@ export default class DashAgGrid extends Component {
     }
 
     onCellValueChanged({
-        oldValue,
-        value,
-        column: {colId},
-        rowIndex,
-        data,
-        node,
-    }) {
+                           oldValue,
+                           value,
+                           column: {colId},
+                           rowIndex,
+                           data,
+                           node,
+                       }) {
         const timestamp = Date.now();
         // Collect new change.
         const newChange = {

src/lib/utils/propCategories.js

@@ -202,6 +202,7 @@ export const COLUMN_MAYBE_FUNCTIONS = {
     // Columns
     keyCreator: 1,
     equals: 1,
+    checkboxSelection: 1,
     icons: 1,
     suppressNavigable: 1,
     suppressKeyboardEvent: 1,
@@ -223,6 +224,7 @@ export const COLUMN_MAYBE_FUNCTIONS = {
 
     // Columns: Headers
     suppressHeaderKeyboardEvent: 1,
+    headerCheckboxSelection: 1,
 
     // Columns: Rendering and Styling
     cellStyle: 1,

tests/examples/single_row_selection_remove_checkboxes.py

@@ -1,5 +1,6 @@
+# Test for dag v32.3.4, supporting the new Selection API and still supporting the deprecated Selection API
 import dash_ag_grid as dag
-from dash import Dash
+from dash import Dash, html
 import pandas as pd
 
 app = Dash()
@@ -10,18 +11,41 @@
 
 columnDefs = [{"field": i} for i in ["country", "year", "athlete", "age", "sport", "total"]]
 
-app.layout = dag.AgGrid(
-    id="grid-row-selection-remove-checkboxes",
-    columnDefs=columnDefs,
-    rowData=df.to_dict("records"),
-    columnSize="sizeToFit",
-    dashGridOptions={
-        "rowSelection": {
-            'mode': 'singleRow',
-            # test selection checkboxes as function
-            'checkboxes': {"function": "params.data.year > 2007"}
-        },
-    }
+app.layout = html.Div(
+    [
+        'New Selection API',
+        dag.AgGrid(
+            id="grid-row-selection-remove-checkboxes",
+            columnDefs=columnDefs,
+            rowData=df.to_dict("records"),
+            columnSize="sizeToFit",
+            dashGridOptions={
+                "rowSelection": {
+                    'mode': 'singleRow',
+                    # test selection checkboxes as function
+                    'checkboxes': {"function": "params.data.year > 2007"}
+                },
+            },
+            style={'margin-bottom': '10px'},
+        ),
+        'Deprecated Selection API',
+        dag.AgGrid(
+            id="grid-row-selection-remove-checkboxes-deprecated",
+            columnDefs=columnDefs,
+            rowData=df.to_dict("records"),
+            columnSize="sizeToFit",
+            defaultColDef={
+                "filter": True,
+                "checkboxSelection": {
+                    "function": 'params.column == params.api.getAllDisplayedColumns()[0]'
+                },
+                "headerCheckboxSelection": {
+                    "function": 'params.column == params.api.getAllDisplayedColumns()[0]'
+                }
+            },
+            dashGridOptions={"rowSelection": "multiple"},
+        )
+    ]
 )
 
 if __name__ == "__main__":