Merge pull request #1359 from bmsuisse/aggrid-column-api

Add AG Grid column api

nicegui/elements/aggrid.js

@@ -47,6 +47,9 @@ export default {
     call_api_method(name, ...args) {
       this.gridOptions.api[name](...args);
     },
+    call_column_api_method(name, ...args) {
+      this.gridOptions.columnApi[name](...args);
+    },
     handle_event(type, args) {
       this.$emit(type, {
         value: args.value,

nicegui/elements/aggrid.py

@@ -55,6 +55,16 @@ class AgGrid(Element, component='aggrid.js', libraries=['lib/aggrid/ag-grid-comm
         """
         self.run_method('call_api_method', name, *args)
 
+    def call_column_api_method(self, name: str, *args) -> None:
+        """Call an AG Grid Column API method.
+
+        See `AG Grid Column API <https://www.ag-grid.com/javascript-data-grid/column-api/>`_ for a list of methods.
+
+        :param name: name of the method
+        :param args: arguments to pass to the method
+        """
+        self.run_method('call_column_api_method', name, *args)
+
     async def get_selected_rows(self) -> List[Dict]:
         """Get the currently selected rows.
 

tests/test_aggrid.py

@@ -90,6 +90,23 @@ def test_call_api_method_with_argument(screen: Screen):
     screen.should_not_contain('Carol')
 
 
+def test_call_column_api_method_with_argument(screen: Screen):
+    grid = ui.aggrid({
+        'columnDefs': [{'field': 'name'}, {'field': 'parent_name', 'hide': True}],
+        'rowData': [{'name': 'Alice', 'parent_name': 'Frederic'}, {'name': 'Bob', 'parent_name': 'Joseph'}, {'name': 'Carol', 'parent_name': 'John-Peter'}],
+    })
+    ui.button('Show Age', on_click=lambda: grid.call_column_api_method('setColumnVisible', 'parent_name', True))
+
+    screen.open('/')
+    screen.should_contain('Alice')
+    screen.should_not_contain('Frederic')
+    screen.should_not_contain('Joseph')
+    screen.click('Show Age')
+    screen.should_contain('Alice')
+    screen.should_contain('Frederic')
+    screen.should_contain('Joseph')
+
+
 def test_get_selected_rows(screen: Screen):
     grid = ui.aggrid({
         'columnDefs': [{'field': 'name'}],

website/more_documentation/aggrid_documentation.py

@@ -8,11 +8,12 @@ def main_demo() -> None:
         'columnDefs': [
             {'headerName': 'Name', 'field': 'name'},
             {'headerName': 'Age', 'field': 'age'},
+            {'headerName': 'Parent', 'field': 'parent_name', 'hide': True},
         ],
         'rowData': [
-            {'name': 'Alice', 'age': 18},
-            {'name': 'Bob', 'age': 21},
-            {'name': 'Carol', 'age': 42},
+            {'name': 'Alice', 'age': 18, 'parent_name': 'Frederic'},
+            {'name': 'Bob', 'age': 21, 'parent_name': 'Joseph'},
+            {'name': 'Carol', 'age': 42, 'parent_name': 'John-Peter'},
         ],
         'rowSelection': 'multiple',
     }).classes('max-h-40')
@@ -23,6 +24,7 @@ def main_demo() -> None:
 
     ui.button('Update', on_click=update)
     ui.button('Select all', on_click=lambda: grid.call_api_method('selectAll'))
+    ui.button('Show parent', on_click=lambda: grid.call_column_api_method('setColumnVisible', 'parent_name', True))
 
 
 def more() -> None: