Column and Cell Rendering

When creating a table widget, you can customize the columns and cells to create many different data visualization options. Below are the key components and settings you can use to define column and cell rendering:

Column Definitions

Each widgets.json entry for your table widget can have a columnsDefs property that defines the columns for the table. Note that setting columnsDefs is entirely optional - tables will work with default settings, and columnsDefs should only be used when you need to fine-tune the visualization.

When defined, columnsDefs is an array of column definitions, each with the following properties:

Column and Cell Properties

field
Type: string
The name of the field from the JSON data. Must match a key in the data source.
Example: "strike_price"

headerName
Type: string
The display name of the column header shown in the widget. Example: "Strike Price"

cellDataType
Type: string
Defines the data type of the cell.
Possible values: "text", "number", "boolean", "date", "dateString", "object"
Default: "text"

formatterFn
Type: string
Specifies a function to format the data.
Possible values: "int", "none", "percent", "normalized", "normalizedPercent", "dateToYear"
Default: "none"

renderFn
Type: string Specifies a rendering function for cell data.
Possible values: "greenRed", "titleCase", "cellOnClick"

renderFnParams
Type: object
Parameters for the render function.
Example: {"actionType": "groupBy"}

width
Type: number
The width of the column in pixels.

maxWidth
Type: number
The maximum width of the column in pixels.

minWidth
Type: number
The minimum width of the column in pixels.

hide
Type: boolean
Whether to hide the column from the table.
Default: false

pinned
Type: string
Pins the column to the left or right of the table.
Possible values: "left", "right"

Example Configuration

Below is an example of how you might configure your columns in the widgets.json file:

"columnsDefs": [
    {
        "field": "column1",
        "headerName": "Column 1",
        "cellDataType": "text",
        "formatterFn": "none",
        "renderFn": "titleCase",
        "width": 100,
        "maxWidth": 200,
        "minWidth": 50,
        "hide": false,
        "pinned": "left"
    },
    {
        "field": "column2",
        "headerName": "Column 2",
        "cellDataType": "number",
        "formatterFn": "int",
        "renderFn": "greenRed",
        "width": 150
    }
]

Customizing Cell Rendering

Cell rendering can be customized using the renderFn property, which allows you to apply specific styles or transformations to the data. For example, using "greenRed" can visually indicate positive or negative values, while "titleCase" can format text data to title case. You can also use the cellOnClick render function to group data by the cell value - see the Grouping and Parameters section for more details on this.

Cell Data Type

The cellDataType property defines the data type of the cell, which affects how the data is displayed and interacted with in the widget. Here are the options available:

Property	Type	Description
text	string	Displays the data as plain text. Suitable for string data that does not require special formatting
number	string	Displays the data as a number. Can be formatted further using the formatter function property
boolean	string	Displays the data as a boolean value
date	string	Displays the data as a date object. Can be formatted to show different date representations
dateString	string	Displays the data as a string representation of a date
object	string	Displays the data as an object. Useful for complex data structures requiring custom rendering logic

Formatter Function

The formatterFn property specifies a function used to format the data in the table. This allows for customization of how numerical and date data is presented. Here are the allowed values:

Value	Type	Description
int	string	Formats the number as an integer, removing any decimal places
none	string	Does not apply any formatting to the number, displaying it as is
percent	string	Adds a percentage sign to the number, which is useful for data that represents percentages
normalized	string	Multiplies the number by 100, which can be useful for normalizing data to a percentage scale
normalizedPercent	string	Multiplies the number by 100 and adds a percentage sign, converting a decimal to a percentage (e.g., 0.5 becomes 50%)
dateToYear	string	Converts a date to just the year, which is useful for summarizing date data to a yearly level