Customizing Table Columns

Data flexibility allows you to customize the table view of schema fields you create or extend. In the Data Model JSON, you can define the fields to be displayed in the table using the format property to customize their appearance.

With format configuration, you can define the types of fields, format text, display as a tag, add icons, and define icon and color options based on conditions.

Structure

The customized display options have 3 independent moving parts.

Is it a link? It could be a URL (http…) or an email (mailto:…).
Value to be displayed. It could be a number, a string, or a date.
How should it be displayed? It could be a tag or an icon.

Sample

[
  {
    "hidden": false,
    "columnName": "Slack Link",
    "name": "slackLink",
    "calc": "details.slackAccount",
    "format": {
      "link": "https://{self}.slack.com",
      "displayValue": {
        "type": "string",
        "value": "{self}"
      },
      "label": {
        "type": "icon",
        "options": [
          { "icon": "slack" }
        ]
      }
    }
  }
]

Examples

Below, you will find numerous examples of how to configure the format property for different customized display options of schema fields.

URL with display string and icon

  {
    "hidden": false,
    "columnName": "Slack Link",
    "name": "slackLink",
    "calc": "details.slackAccount",
    "format": {
      "link": "https://{ self }.slack.com/",
      "displayValue": {
        "type": "string",
        "value": "{details.slackName}"
      },
      "label": {
        "type": "icon",
        "options": [
          {
            "icon": "slack"
          }
        ]
      }
    }
  }

{
  "type": "object",
  "required": [
    "slackName",
    "slackAccount"
  ],
  "properties": {
    "slackName": {
      "type": "string",
      "title": "Slack Name"
    },
    "slackAccount": {
      "type": "string",
      "title": "Slack Account"
    }
  }
}

URL with icon and no display string

  {
    "hidden": false,
    "columnName": "Slack Link",
    "name": "slackLink",
    "calc": "details.slackAccount",
    "format": {
      "link": "https://{ self }.slack.com/",
      "displayValue": {
        "type": "string",
        "value": " "
      },
      "label": {
        "type": "icon",
        "options": [
          {
            "icon": "slack"
          }
        ]
      }
    }
  }

{
  "type": "object",
  "required": [
    "slackAccount"
  ],
  "properties": {
    "slackAccount": {
      "type": "string",
      "title": "Slack Account"
    }
  }
}

URL with display string

  {
    "hidden": false,
    "columnName": "Slack Link",
    "name": "slackLink",
    "calc": "details.slackAccount",
    "format": {
      "link": "https://{ self }.slack.com/",
      "displayValue": {
        "type": "string",
        "value": "{details.slackName}"
      }
    }
  }

{
  "type": "object",
  "required": [
    "slackName",
    "slackAccount"
  ],
  "properties": {
    "slackName": {
      "type": "string",
      "title": "Slack Name"
    },
    "slackAccount": {
      "type": "string",
      "title": "Slack Account"
    }
  }
}

URL without customization

  {
    "hidden": false,
    "columnName": "Slack Link",
    "name": "slackLink",
    "calc": "details.slackLink",
    "format": {
      "link": "{self}",
      "displayValue": {
        "type": "string",
        "value": "{self}"
      }
    }
  }

{
  "type": "object",
  "required": [
    "slackLink"
  ],
  "properties": {
    "slackLink": {
      "type": "string",
      "title": "Slack Link"
    }
  }
}

Tag with string value

{
    "hidden": false,
    "columnName": "Language",
    "name": "language",
    "calc": "details.language",
    "format": {
      "displayValue": {
        "type": "string",
        "value": "{self}"
      },
      "label": {
        "type": "tag",
        "options": [
          {
            "value": "Node",
            "color": "rgb(152,251,152)"
          },
          {
            "value": "Go",
            "color": "grey"
          },
          {
            "value": "Ruby",
            "color": "#D67176"
          },
          {
            "value": "PHP",
            "color": "purple"
          }
        ]
      }
    }
  }

{
  "type": "object",
  "required": [
    "language"
  ],
  "properties": {
    "language": {
      "type": "string",
      "title": "Language",
      "enum": [
        "Node",
        "Go",
        "Ruby",
        "PHP"
      ]
    }
  }
}

Tag with array value

{
    "hidden": false,
    "columnName": "Languages",
    "name": "languages",
    "calc": "details.languages",
    "format": {
      "displayValue": {
        "type": "string",
        "value": "{self}"
      },
      "label": {
        "type": "tag",
        "options": [
          {
            "value": "Node",
            "color": "blue"
          },
          {
            "value": "Go",
            "color": "grey"
          },
          {
            "value": "Ruby",
            "color": "green"
          },
          {
            "value": "PHP",
            "color": "purple"
          }
        ]
      }
    }
  }

{
  "type": "object",
  "required": [
    "languages"
  ],
  "properties": { 
    "languages": {
      "type": "array",
      "title": "Languages",
      "items": {
        "type": "string",
        "enum": [
          "Node",
          "Go",
          "Ruby",
          "PHP"
        ]
      },
      "uniqueItems": true
    }
  }
}

Tag with number value

{
  "hidden": false,
  "columnName": "Changes",
  "name": "changes",
  "calc": "details.changes",
  "format": {
    "displayValue": {
      "type": "number",
      "value": "{self}%",
      "decimal": 0
    },
    "label": {
      "type": "tag",
      "options": [
        {
          "value": "0",
          "compare": "less",
          "color": "#8CC572"
        },
        {
          "value": "0",
          "compare": "equal",
          "color": "#CCCCCC"
        },
        {
          "value": "0",
          "compare": "greater",
          "color": "#D67176"
        }
      ]
    }
  }
}

{
  "type": "object",
  "required": [
    "changes"
  ],
  "properties": {   
    "changes": {
      "type": "number",
      "title": "Changes"
    }
  }
}

Icon with string value

{
  "hidden": false,
  "columnName": "Status",
  "name": "status",
  "calc": "details.status",
  "format": {
    "displayValue": {
      "type": "string",
      "value": "{self}"
    },
    "label": {
      "type": "icon",
      "options": [
        {
          "value": "Passed",
          "color": "green",
          "icon": "circle-check"
        },
        {
          "value": "In Progress",
          "color": "orange",
          "icon": "circle-progress"
        },
        {
          "value": "Failed",
          "color": "red",
          "icon": "circle-times"
        }
      ]
    }
  }
}

{
  "properties": {
    "status": {
      "title": "Status",
      "type": "string",
      "enum": [
        "Passed",
        "In Progress",
        "Failed"
      ]
    }
  }
}

Dynamic icons with string value

{
  "hidden": false,
  "columnName": "Cloud",
  "name": "cloud",
  "calc": "details.cloud",
  "format": {
    "displayValue": {
      "type": "string",
      "value": "{self}"
    },
    "label": {
      "type": "icon",
      "options": [
        {
          "icon": "{self}"
        }
      ]
    }
  }
}

{
  "properties": {
    "cloud": {
      "title": "Cloud",
      "type": "string",
      "enum": [
        "AWS",
        "GCP",
        "Azure"
      ]
    }
  }
}

Number value with prefix and 2 decimal

{
  "hidden": false,
  "columnName": "Cost",
  "name": "cost",
  "calc": "details.cost",
  "format": {
    "displayValue": {
      "type": "number",
      "value": "${self}",
      "decimal": 2
    }
  }
}

Number value with progress bar

[
  {
    "hidden": false,
    "columnName": "Progress",
    "name": "progress",
    "calc": "details.progress",
    "format": {
      "displayValue": {
        "type": "number",
        "value": "{self}"
      },
      "label": {
        "type": "progress"
      }
    }
  }
]

{
  "properties": {
    "progress": {
      "type": "number",
      "title": "Progress"
    }
  }
}

Timestamp value with number input and date-time format

[
  {
    "hidden": false,
    "name": "timestring",
    "columnName": "Timestring",
    "calc": "details.timestring",
    "format": {
      "displayValue": {
        "type": "date",
        "format": "DD MMM YYYY - hh:mm:ss A"
      }
    }
  }
]

{
  "properties": {
    "timestring": {
      "title": "Timestring",
      "type": "number"
    }
  }
}

Timestamp value with calendar input and date-time format

[
  {
    "hidden": false,
    "name": "timestamp",
    "columnName": "Timestamp",
    "calc": "details.timestamp",
    "format": {
      "inputType": "timestamp",
      "displayValue": {
        "type": "date",
        "format": "DD MMM YYYY - hh:mm:ss A"
      }
    }
  }
]

{
  "properties": {
    "timestamp": {
      "title": "Timestamp",
      "type": "number"
    }
  }
}

Date value with calendar input and date format

[
  {
    "hidden": false,
    "name": "date",
    "columnName": "Date",
    "calc": "details.date",
    "format": {
      "inputType": "date",
      "displayValue": {
        "type": "date",
        "format": "DD MMM YYYY"
      }
    }
  }
]

{
  "properties": {
    "date": {
      "title": "Date",
      "type": "string"
    }
  }
}

Date-time value with calendar input and date-time format

[
  {
    "hidden": false,
    "name": "datetime",
    "columnName": "Date Time",
    "calc": "details.datetime",
    "format": {
      "inputType": "date-time",
      "displayValue": {
        "type": "date",
        "format": "DD MMM YYYY - hh:mm:ss A"
      }
    }
  }
]

{
  "properties": {
    "datetime": {
      "title": "Date Time",
      "type": "string"
    }
  }
}

Icon input type

[
  {
    "calc": "details.icon",
    "columnName": "Icon",
    "format": {
      "displayValue": {
        "type": "string",
        "value": "{self}"
      },
      "label": {
        "options": [
          {
            "color": "{color}",
            "icon": "{self}"
          }
        ],
        "type": "icon"
      },
      "inputType": "color"
    },
    "hidden": false,
    "name": "icon"
  }
]

{
  "properties": {
    "icon": {
      "title": "Icon",
      "type": "string"
    }
  }
}

Color input type

[
  {
    "calc": "details.color",
    "columnName": "Color",
    "format": {
      "displayValue": {
        "type": "string",
        "value": "{self}"
      },
      "label": {
        "options": [
          {
            "color": "{self}"
          }
        ],
        "type": "tag"
      },
      "inputType": "icon"
    },
    "hidden": false,
    "name": "color"
  }
]

{
  "properties": {
    "color": {
      "title": "Color",
      "type": "string"
    }
  }
}

PreviousData Flexibility calculated properties NextIcons

Last updated 5 months ago