5-5. Format values in the cells

If you converted your raw data into a new format by adding a "data convert" configuration, or using the raw data, you can format the values in cells in the data table by configuring the "column formatting" property.

Format

You can apply multiple formats to a cell. For example, number values can be formatted in "scientific notation" and "render background percent" can be applied to the formatted values.
"column formatting": {"Field name": { "type": ["type value 1", "type value 2"]}}

Options

Link is added to values in the "Region" field, with the "new tab" option activated:
"Region": { "type": ["link"], "link to": "/research.html?pageid=region_page&phenotype=HEIGHT&region=","new tab":"true"}

Also the link can be rendered as buttons instead of values:
"Locus link":{"type":["link"],"link to":"/test.html?variant=", "link type":"button","link label":"Open Region"}

Values in the "Score" field are formatted in scientific notation:
"Score": { "type":["scientific notation"] }

Add a bar graph in the cells under the "obs_cppa" column. BYOR gets the highest and lowest values under the column, calculates the percent value of the value in the cells, and renders bar graphs with the percent value. "percent if empty" property sets the percent value of a cell if no value is in the cell.
"obs_cppa": { "type":["render background percent"],"percent if empty":0}

The values under "p" column are formatted in "scientific notation," and bar graphs added to cells:
"p": { "type":["scientific notation","render background percent"],"percent if empty":1}

Example

{"top rows":["phenotype","cluster","annotation","obs_cppa","p","fdr"],
    "column formatting": { "p": { "type":["scientific notation","render background percent"],"percent if empty":1},
        "obs_cppa": { "type":["render background percent"],"percent if empty":0},
        "fdr": { "type":["render background percent"],"percent if empty":0},
        "phenotype":{"type":["link"],"link to":"https://hugeamp.org/phenotype.html?phenotype="}
    }
}