'AG Grid, Capture the event on click of chevron

screenshot of ag-grid nested with chevron

Ag-grid provides onCellClicked event for when a cell is clicked. But I noticed that it doesn't trigger when we click the chevron. I need to capture this event for analytics as a user might click the chevron directly rather than the cell itself. Any idea how to achieve this or what event to use here? I am using detailRenderer to render child rows, if that helps. Here is one of the columnDefs item:

{
      headerName: "Line Item",
      field: "displayLineNumber",
      width: "100px",
      sortable: false,
      expandable: true,
      onCellClicked: (event) => {
        event.node.setExpanded(!event.node.expanded);
        if (event.node.expanded === true) {
          DataLayerUtils.pushEvent(
            "click",
            {
              name: "Open Line Item",
              type: "button",
            },
            {
              click: {
                category: "Quote Detail Table Interactions",
              },
            }
          );
        } else {
          DataLayerUtils.pushEvent(
            "click",
            {
              name: "Collapse Line Item",
              type: "button",
            },
            {
              click: {
                category: "Quote Detail Table Interactions",
              },
            }
          );
        }
      },
      rowClass: ({ node, data }) => {
        return `cmp-product-lines-grid__row ${
          !data?.children || data.children.length === 0
            ? "cmp-product-lines-grid__row--notExpandable"
            : ""
        }`;
      },
      detailRenderer: ({ data }) => (
        <section className="cmp-product-lines-grid__row cmp-product-lines-grid__row--expanded">
          <ProductLinesChildGrid
            gridProps={gridProps}
            license={gridProps.agGridLicenseKey}
            columnDefiniton={
              whiteLabelMode ? whiteLabelCols() : quoteDetailsCols()
            }
            data={data.children}
            onModelUpdateFinished={() => {
              markupChanged(mutableGridData);
            }}
          />
        </section>
      ),
    },


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source