1. Canvas Components
  2. AG Grid Component

Canvas Components

AG Grid Component

Explains the AG Grid canvas component for hosted Webchat. Useful for interactive tables, structured data review, and grid-based user interfaces.

The AG Grid component displays interactive data tables with sorting, filtering, and pagination in the webchat interface.

Example Usage

        {
  "webchat_server_control_event": {
    "platforms": {
      "webchat": {
        "sessionuuid": "~~stub.data._incoming_webchat_data.sessionuuid",
        "webchat_control_event": {
          "action": "render_component",
          "params": {
            "component_type": "ag_grid",
            "component_params": {
              "gridOptions": {
                "columnDefs": [
                  {
                    "headerName": "ID",
                    "field": "id"
                  },
                  {
                    "headerName": "Product",
                    "field": "product"
                  },
                  {
                    "headerName": "Price",
                    "field": "price"
                  },
                  {
                    "headerName": "Stock",
                    "field": "stock"
                  },
                  {
                    "headerName": "Category",
                    "field": "category"
                  }
                ],
                "rowData": [
                  {
                    "id": 1,
                    "product": "Product A",
                    "price": 99.99,
                    "stock": 150,
                    "category": "Electronics"
                  },
                  {
                    "id": 2,
                    "product": "Product B",
                    "price": 19.99,
                    "stock": 300,
                    "category": "Books"
                  },
                  {
                    "id": 3,
                    "product": "Product C",
                    "price": 5.49,
                    "stock": 500,
                    "category": "Groceries"
                  },
                  {
                    "id": 4,
                    "product": "Product D",
                    "price": 45,
                    "stock": 100,
                    "category": "Clothing"
                  },
                  {
                    "id": 5,
                    "product": "Product E",
                    "price": 250,
                    "stock": 50,
                    "category": "Furniture"
                  }
                ]
              }
            }
          }
        },
        "stubsession": {
          "set_new_with_timeout_hours": 24
        }
      }
    },
    "name": "webchat_server_control_event",
    "__key": "webchat_server_control_event",
    "help": "",
    "conditions": [],
    "send_to": {},
    "__order": 0
  }
}

      

Features

  • Sorting - Click column headers to sort data
  • Filtering - Built-in filtering capabilities
  • Pagination - Handle large datasets efficiently
  • Customizable Columns - Define column headers and field mappings
  • Responsive Design - Adapts to different screen sizes

Configuration

  • columnDefs - Array of column definitions with headerName and field properties
  • rowData - Array of data objects to display in the table

Each column definition maps to a field in your data objects.

For more configuration options, see the AG Grid documentation.