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:
NAME
TYPE
DESCRIPTION
The column ID.
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.
The column header label.
The type of data in this column: "number"
, "string"
, "date"
, "image"
, "bool"
, or "richText"
.
The pixel width of the column.
Whether the column is visible.
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?
1let cols = $w("#myTable").columns;23let firstColID = cols[0].id; // "col0"4let firstColDataPath = cols[0].dataPath; // "first_col"5let firstColLabel = cols[0].label; // "First Column"6let firstColWidth = cols[0].width; // 1007let firstColVisible = cols[0].visible; // true8let firstColType = cols[0].type; // "string"9let firstColPath = cols[0].linkPath; // "link-field-or-property"
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];
This example retrieves the columns of a table, adds a new column, and then overwrites the old options.
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