adding oncellclicked event using ipyaggrid

[taoranfeng]

Hi,

I'm trying to add an oncellclicked event to my table where the cell value is returned when user click the cell, I know this is possible using AG grid, just wondering is there a way to add this event using Python. Thanks!

[maartenbreddels]

I don't know the answer to this specific question, did you check out the https://github.com/widgetti/ipyaggrid/tree/master/docs/notebooks directory. Maybe that helps you in the right direction

[vthemelis]

You can add an even by adding a callback for onCellClicked in your grid options:

import ipyaggrid as ipg
import pandas as pd

# Create a sample dataframe
df = pd.DataFrame({
    'name': ['Alice', 'Bob', 'Charlie'],
    'age': [25, 30, 35],
    'salary': [50000, 60000, 70000]
})

# Define the Ag-Grid column definitions
column_defs = [
    {'headerName': 'Name', 'field': 'name'},
    {'headerName': 'Age', 'field': 'age'},
    {'headerName': 'Salary', 'field': 'salary'},
]

# Define the Ag-Grid options
options = {
    'column_defs': column_defs,
    'enableSorting': True,
    'enableFilter': True,
    'enableColResize': True,
    'onCellClicked': 'function(params) {alert(params.value)}'
}

# Create the Ag-Grid widget
grid_widget = ipg.Grid(
    grid_data=df,
    grid_options=options
)

# Display the widget
grid_widget

[maartenbreddels]

Thanks @vthemelis do you know how to trigger a python callback using this? that would be a really nice example I think.

[vthemelis]

do you know how to trigger a python callback using this? that would be a really nice example I think.

I don't think that this is something that is possible to do right-off-the-box in ipyaggrid. You would probably need some sort of IPC framework for this. Maybe this: https://ipywidgets.readthedocs.io/en/latest/examples/Widget%20Low%20Level.html#comms ?

[mariobuikhuizen]

Here's a workaround using ipyvue:

import ipyaggrid as ipg
import pandas as pd
import ipyvue
import traitlets

class MyEvents(ipyvue.VueTemplate):

    @traitlets.default("template")
    def _template(self):
        return """
        <script>
        module.exports = {
          created() {
            window.myNamespace = {
              passEvent: (params) => {
                   this.my_message(params) 
              },
            }
          }
        }
        </script>
        """
    
    def vue_my_message(self, data):
        print("data: ", data)
        
display(MyEvents())


# Create a sample dataframe
df = pd.DataFrame({
    'name': ['Alice', 'Bob', 'Charlie'],
    'age': [25, 30, 35],
    'salary': [50000, 60000, 70000]
})

# Define the Ag-Grid column definitions
column_defs = [
    {'headerName': 'Name', 'field': 'name'},
    {'headerName': 'Age', 'field': 'age'},
    {'headerName': 'Salary', 'field': 'salary'},
]

# Define the Ag-Grid options
options = {
    'column_defs': column_defs,
    'enableSorting': True,
    'enableFilter': True,
    'enableColResize': True,
    'onCellClicked': '''function(params) {
        console.log("params: ", params);
        const { rowIndex, type, data } = params;
        myNamespace.passEvent({ rowIndex, type, data });
    }'''
}

# Create the Ag-Grid widget
grid_widget = ipg.Grid(
    grid_data=df,
    grid_options=options
)

# grid_widget.on_msg(lambda *args: print("onmsg", args))

# Display the widget
grid_widget