Skip to main content

Cell Click Grouping

A widget that demonstrates how to use cell clicks to trigger parameter updates across multiple widgets. This feature allows users to click on cells in a table to automatically update related widgets with the selected data.

Cell Click Grouping Example

The implementation consists of three main components:

  1. An endpoint that provides a list of available stock symbols that can be selected in the widgets.
@app.get("/get_tickers_list")
def get_tickers_list():
    """Returns a list of available stock symbols"""
    return [
        {"label": "Apple Inc.", "value": "AAPL"},
        {"label": "Microsoft Corporation", "value": "MSFT"},
        {"label": "Google", "value": "GOOGL"},
        {"label": "Amazon", "value": "AMZN"},
        {"label": "Tesla", "value": "TSLA"}
    ]
  1. A table widget that displays stock data and allows users to click on symbol cells to update related widgets. The key feature is the cellOnClick renderFn in the symbol column, which triggers the groupBy action when a cell is clicked.
@register_widget({
    "name": "Table widget with grouping by cell click",
    "description": "A table widget that groups data when clicking on symbols. Click on a symbol to update all related widgets.",
    "type": "table",
    "endpoint": "table_widget_with_grouping_by_cell_click",
    "params": [
        {
            "paramName": "symbol",  # This parameter name is crucial - it's used for grouping
            "description": "Select stocks to display",
            "value": "AAPL",
            "label": "Symbol",
            "type": "endpoint",
            "optionsEndpoint": "/get_tickers_list",
            "multiSelect": False,
            "show": True
        }
    ],
    "data": {
        "table": {
            "showAll": True,
            "columnsDefs": [
                {
                    "field": "symbol",
                    "headerName": "Symbol",
                    "cellDataType": "text",
                    "width": 120,
                    "pinned": "left",
                    "renderFn": "cellOnClick",
                    "renderFnParams": {
                        "actionType": "groupBy",
                        "groupBy": {
                            "paramName": "symbol"
                        }
                    }
                },
                {
                    "field": "price",
                    "headerName": "Price",
                    "cellDataType": "number",
                    "formatterFn": "none",
                    "width": 120
                },
                {
                    "field": "change",
                    "headerName": "Change",
                    "cellDataType": "number",
                    "formatterFn": "percent",
                    "renderFn": "greenRed",
                    "width": 120
                },
                {
                    "field": "volume",
                    "headerName": "Volume",
                    "cellDataType": "number",
                    "formatterFn": "int",
                    "width": 150
                }
            ]
        }
    },
    "gridData": {
        "w": 20,
        "h": 9
    }
})
  1. A markdown widget that displays detailed information about the selected stock. This widget uses the same symbol parameter as the table widget, so it automatically updates when a symbol is clicked in the table.
@register_widget({
    "name": "Widget managed by parameter from cell click on table widget",
    "description": "This widget demonstrates how to use the grouped symbol parameter from a table widget. When a symbol is clicked in the table, this widget will automatically update to show details for the selected symbol.",
    "type": "markdown",
    "endpoint": "widget_managed_by_parameter_from_cell_click_on_table_widget",
    "params": [
        {
            "paramName": "symbol",  # Must match the groupBy.paramName in the table widget
            "description": "The symbol to get details for",
            "value": "AAPL",
            "label": "Symbol",
            "type": "endpoint",
            "optionsEndpoint": "/get_tickers_list",
            "show": True
        }
    ],
    "gridData": {
        "w": 20,
        "h": 6
    }
})

This functionality is achieved through three key components:

  1. Both widgets must share the same paramName (in this case "symbol") to enable parameter synchronization
  2. The table widget's cellOnClick renderFn must be configured with actionType: "groupBy" and specify the groupBy.paramName as "symbol"
  3. Both widgets must reference the same endpoint (/get_tickers_list) for their options data

The interaction flow works as follows:

  1. When a user clicks a symbol cell in the table, the cellOnClick renderFn activates the groupBy action
  2. The groupBy action then updates the shared symbol parameter value
  3. Any widget that uses the symbol parameter will automatically refresh to display data for the newly selected symbol

This implementation creates an intuitive user experience where selecting a symbol in the table instantly updates all connected widgets with the corresponding stock information.

Using valueField for Custom Value Mapping​

The valueField option allows you to pass a different value than what's displayed in the cell. This is useful when your table shows human-readable values (like company names) but your API expects different values (like IDs or codes).

Example: Display company names but pass company IDs when clicked:

@register_widget({
    "name": "Company List with ID Mapping",
    "description": "Table showing company names but passing IDs on click",
    "type": "table",
    "endpoint": "company_list",
    "params": [
        {
            "paramName": "companyId",  # Parameter expects ID, not name
            "description": "Company identifier",
            "value": "AAPL",
            "label": "Company ID",
            "type": "endpoint",
            "optionsEndpoint": "/company_options",
            "show": True
        }
    ],
    "data": {
        "table": {
            "showAll": True,
            "columnsDefs": [
                {
                    "field": "companyName",  # Display name in cell
                    "headerName": "Company",
                    "cellDataType": "text",
                    "width": 200,
                    "renderFn": "cellOnClick",
                    "renderFnParams": {
                        "actionType": "groupBy",
                        "groupBy": {
                            "paramName": "companyId",
                            "valueField": "companyId"  # Use ID field instead of companyName
                        }
                    }
                },
                {
                    "field": "price",
                    "headerName": "Price",
                    "cellDataType": "number",
                    "formatterFn": "none",
                    "width": 120
                }
            ]
        }
    }
})

Data structure:

@app.get("/company_list")
def get_company_list():
    return [
        {
            "companyName": "Apple Inc.",      # Displayed in cell
            "companyId": "AAPL",              # Passed to parameter
            "price": 150.25
        },
        {
            "companyName": "Microsoft Corporation",
            "companyId": "MSFT",
            "price": 350.50
        }
    ]

In this example:

  • The table cell displays "Apple Inc." (from companyName field)
  • When clicked, it passes "AAPL" (from companyId field) to the companyId parameter
  • This allows you to show user-friendly names while using IDs for API calls

When to use valueField:

  • When displaying human-readable text but needing to pass IDs or codes
  • When the displayed value differs from the parameter value format
  • When you want to decouple the display value from the API parameter value

On this page