1. Canvas Components
  2. AG Grid Component

Canvas Components

AG Grid Component

The AG Grid component allows you to display interactive data tables with powerful features like sorting, filtering, and pagination within 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

AG Grid provides powerful features for data display:

  • 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, allowing for flexible and dynamic table creation.

For more advanced features and configuration options, refer to the AG Grid documentation.