columns

Sets or gets the defining properties of the columns in a table.

Description

Table columns do not store any data. They contain the properties, such as the label and type, that define a table column.

Setting the columns property sets the columns in the table.

Getting the columns property returns the current list of columns in the table.

You cannot modify the data array in-place. To add, change, or remove individual columns:

Store the value of the columns property in a variable.
Make changes to the columns array.
Reset the columns property with the modified array.

Type:

Array<Column>Read & Write

NAME

TYPE

DESCRIPTION

string

The column ID.

dataPath

string

The location of the data displayed in the column.

When the table is populated by a connection to a dataset, the dataPath value is a field ID from the collection that the dataset is connected to. The dataPath can contain a reference field by prefixing the field with the referenced collection name and a period. For example, "dataPath": "writer.name".

When the table is populated by using the rows or dataFetcher properties, the dataPath value is one of the property keys from the table's row objects.

label

string

The column header label.

type

string

The type of data in this column: "number", "string", "date", "image", "bool", or "richText".

width

number

The pixel width of the column.

visible

boolean

Whether the column is visible.

linkPath

string

The location of the links used when the items in the column are clicked.

When the table is populated by a connection to a dataset, the linkPath value is a field ID from the collection that the dataset is connected to. The collection field can be a regular field that contains URLs, a calculated field, or a reference field that contains relative links to dynamic pages.

When the table is populated by using the rows or dataFetcher properties, the linkPath value is one of the property keys from the table's rows objects. The property values associated with that key contain URLs or relative links.

Was this helpful?

Get the list of columns and the first column's information

Copy Code

1let cols = $w("#myTable").columns;
2
3let firstColID = cols[0].id;              // "col0"
4let firstColDataPath = cols[0].dataPath;  // "first_col"
5let firstColLabel = cols[0].label;        // "First Column"
6let firstColWidth = cols[0].width;        // 100
7let firstColVisible = cols[0].visible;      // true
8let firstColType = cols[0].type;          // "string"
9let firstColPath = cols[0].linkPath;     // "link-field-or-property"

Set the list of columns for a table

Copy Code

1$w("#myTable").columns = [
2  {
3    "id": "col1",
4    "dataPath": "field1",
5    "label": "Field 1",
6    "width": 100,
7    "visible": true,
8    "type": "string",
9    "linkPath": "link-field-or-property"
10  },
11  {
12    "id": "col2",
13    "dataPath": "field2",
14    "label": "Field 2",
15    "width": 100,
16    "visible": true,
17    "type": "image",
18    "linkPath": "link-field-or-property"
19  },
20  {
21    "id": "col3",
22    "dataPath": "field3",
23    "label": "Field 3",
24    "width": 100,
25    "visible": true,
26    "type": "number",
27    "linkPath": "link-field-or-property"
28  }
29];

Add a column to a table

This example retrieves the columns of a table, adds a new column, and then overwrites the old options.

Copy Code

1let cols = $w("#myTable").columns;
2cols.push( {
3  "id": "newCol",
4  "dataPath": "new_col",
5  "label": "New Column",
6  "width": 100,
7  "visible": true,
8  "type": "string"
9} );
10$w("#myTable").columns = cols;
11