Skip to main content

JSON Columns

A guide to all supported options for columns in Table, Powersearch, and Details widgets.

When to Use​

Use this page when configuring columns in widgets to control display, interactivity, and formatting.

How It Works​

Columns are defined as objects in the columns array of your widget configuration. Each column can have various options to control how it appears and behaves.

Supported Options​

  • keyName (string, required): The field or custom field to display in this column.
  • width (integer, optional): Value from 1-100, representing the percentage of table width this column should try to take up.
  • editable (boolean, optional): If true, allows inline editing of this column.
  • clickable (boolean, optional): If true, makes the cell clickable (e.g., to open details or trigger an action).
  • sort (object, optional): Sorting options for the column. Example: { "order": "DESC", "priority": 1 }.
    • order (string): ASC or DESC.
    • priority (integer): Sort priority if multiple columns are sorted.
  • backgroundColor (string, optional): Background color for the column (hex code or color name).
  • textColor (string, optional): Text color for the column (hex code or color name).

Usage Example​

{
  "columns": [
    {
      "keyName": "saleslinesfield_order",
      "width": 30,
      "editable": true,
      "clickable": true,
      "sort": { "order": "ASC", "priority": 1 },
      "backgroundColor": "#f0f0f0",
      "textColor": "#000000"
    }
  ]
}

This example shows a column with custom width, editing, clickable, sorting, and custom background/text colors.

Tips​

  • Use width to control layout and space for each column.
  • Use backgroundColor and textColor for visual emphasis or to highlight important columns.
  • Combine editable and clickable for interactive tables.