Using icons in a table

Note

This feature was introduced in C24.10 - beginning of November, 2024.

An icon element can be dropped into a table element column.

To dynamically control the icon column, a callback must be created which requests the callback handler to respond with an object which defines icon element properties.

These object properties are mapped to the icon column properties.

The object should have the following properties:

{
  "name": "string",
  "size": "string",
  "color": "string",
  "text": "string"
}

where:

• name corresponds to the Icon name property.

• size corresponds to the Icon size property.

• color corresponds to the Icon color property.

• text corresponds to the Icon label property.

Note

name, size, and color must have values which appear in the corresponding icon element property dropdowns.

text can be any string.

Example

The Customer mode callback has this response schema:

{
  "type": "object",
  "$schema": "http://json-schema.org/draft-07/schema",
  "required": [
    "items"
  ],
  "properties": {
    "items": {
      "type": "array",
      "required": [
        "id",
        "customer_name",
        "customer_mode"
      ],
      "properties": {
        "id": {
          "type": "string"
        },
        "icon": {
          "type": "string"
        },
        "customer_mode": {
          "type": "string"
        },
        "customer_name": {
          "type": "string"
        }
      }
    }
  }
}

The items array is then mapped to the customer table array, which includes an icon element.

So, if the callback handler returns the following Customer mode callback response payload:

"payload": {
        "items": [
            {
                "id": "000001",
                "customer_name": "Demo Customer A",
                "customer_mode": "free",
                "icon": {
                    "name": "i-office-ab--24",
                    "size": "24",
                    "color": "fixed-critical-dark",
                    "text": "Free"
                }
            },
            {
                "id": "000002",
                "customer_name": "Demo Customer B",
                "customer_mode": "advanced",
                "icon": {
                    "name": "i-adv--16",
                    "size": "24",
                    "color": "fixed-success-dark",
                    "text": "Advanced"
                }
            },
            {
                "id": "000003",
                "customer_name": "Demo Customer C",
                "customer_mode": "advanced",
                "icon": {
                    "name": "i-adv--16",
                    "size": "24",
                    "color": "fixed-success-dark",
                    "text": "Advanced"
                }
            }
        ]
    }

This is what is displayed in the table: