Column JSON Setup

Example:

[
    {
        "id": "make",
        "header": "Make",
        "order": 1,
        "type": "text",
        "columnWidth": 200
    },
    {
        "id": "color",
        "header": "Color",
        "order": 4,
        "type": "text",
        "columnWidth": 150
    },
    {
        "id": "model",
        "header": "Model",
        "order": 2,
        "type": "text",
        "columnWidth": 250
    },
    {
        "id": "sub-model",
        "header": "Sub-Model",
        "order": 3,
        "type": "text"
    },
    {
        "id": "hp",
        "header": "HP",
        "order": 5,
        "type": "text",
        "mask": "0"
    },
    {
        "id": "drivetrain",
        "header": "Drivetrain",
        "order": 6,
        "type": "dropdown",
        "source": ["RWD","FWD","AWD","4WD"],
        "default": "FWD"
    },
    {
        "id": "",
        "type": "text",
        "columnWidth": 100
    }
]

Fields

Fields	Description	Example
id	This is the ID for the column. This is used to link the column to the data.	"id": "model"
header	This is what shows up as the title of the column.	"header": "Model"
order	This is the order in which the column shows up in the table.	"order": 2
type	The type of field for the column's cells. Can be defined as text, hidden, dropdown, autocomplete, checkbox, radio, calendar, image, or color. See more details below	"type": "text"
columnWidth	The width of the column in px. Should be a number	"columnWidth": 200
readOnly	Set if the column is editable. true of false	"readOnly": false
source	Source is only used for dropdown and autocomplete columns. This allows you to define the options that will show up in the dropdown. Should be an array	"source":["Morning","Afternoon","Evening"]
align	Align the text for the column. Options: left, right, center	"align": "left"
multiple	Only used if the type is "dropdown" or "autocomplete". Determines whether or not multiple options can be selected.	"multiple": true
mask	Used if you want to format your text OR if you want to only allow numbers to be entered (the easiest way is to just set "mask": "0" ). See more on masks here.	"mask": "$ 0.00"
decimal	Select the type of decimal used with numbers / masks. (For example, choose "," and your format will be $2.500,00). Default is "."	"decimal": ","
options	This it to apply advanced options, and is currently only used for calendars. See more about option types here.	"options": {"time": true}
default	Set a default value for blank cells. Can also be used to set static data to your JSON if you set the field as "hidden" (for example, if you want to add the bubble ID of a thing to all values)	"default": "My Example"
forceString	Forces the value of the cell to always output a string, instead of a numeric or boolean value. (useful if you use this in scripts or regex later)	"forceString": true

Column types

Type	Description
text	Default option, providing a normal text input. (If you want to allow only numbers to be inputted, add a "mask" field)
numeric	Allow only numbers to be inputted. To do this, follow the instructions here.
hidden	Hide the column. Useful if you have a lot of data, but only want to show certain columns. See more on this here
dropdown	Choose from a set list of values. Define this list by adding a "source" field
autocomplete	Similar to dropdown, but allows you to type and filter results. Useful if you have a lot of data
checkbox	True or false field
radio	Similar to checkbox, but only able to select one field per column
calendar	Select a date from a calendar popup. See advanced options here
image	Displays an image. Define what the image is by adding a "data" field
color	Allows you to pick a color using a color picker popup

Default settings

To define the default settings for your columns, you can add an extra row to the JSON columns with a blank ID.

{
    "id": "",
    "type": "text",
    "columnWidth": 100
}

You can set a few or as many settings as you want. For example, if you want all of your columns to be readOnly, you can add "readOnly": true .

Auto-binding

You are able to auto-bind the JSON Data field to the parent's text field. Your JSON will be saved to the DB automatically once changed are made. When loading up the page, this will set the table based on what's saved in the DB, and will override the normal JSON data field in the plugin panel.

If data changes in the DB, you'll need to call the "refresh table" action in order for the changes to show up.