rows
Sets or gets the table's row data.
Description
Setting the rows
property sets the data of the table's rows. A table's
data is stored as an array of objects where each object represents a row
in the table.
The objects are composed of "key":"value"
pairs where:
key
is:- A table column Field Name if the columns were set in the Editor using the Manage Table panel.
- A table column
dataPath
if the columns were set in code using thecolumns
property.
value
is the value to be placed in that table column for the current row.
For example, a simple array of table data may look like this:
javascript | Copy Code[{"firstName": "John","lastName": "Doe","email": "john.doe@somedomain.com","image": "http://someImageUrl/john.jpg"},{"firstName": "Jane","lastName": "Doe","email": "jane.doe@somedomain.com","image": "http://someImageUrl/jane.jpg"}]
If the rows
array contains objects with values whose keys are not
table columns, those values do not appear in the table. For example,
assuming the rows
array shown above, if the table does not have an
email column, the email values do not appear in the table.
Set rows
to an empty array ([]
) to remove the current rows.
Getting the rows
property returns the current list of
the table's row data. If the table is connected to a dataset, rows
does not include the fields from the dataset items that are not
connected to table columns.
To update an individual table row, use the updateRow()
function.
To add or remove individual table rows:
- Store the value of the
rows
property in a variable. - Apply standard JavaScript array operators to the rows array.
- Reset the
rows
property with the new array.
To set a table's row data based on a query
you perform using the wix-data
API:
- Set the columns of the table in the Editor using the Manage Table
panel or in code using the
columns
property to include the collection fields you want to display. - Execute a
query()
using thefind()
function. - Set the tables
rows
to theitems
of the query's results.
Note that you can optionally add to, remove from, or modify the data returned from the query before using it to set the table's row data.
Type:
Was this helpful?
1let tableRows = $w("#myTable").rows;23let value = tableRows[0]["field_name"]; // "field value"
1$w("#myTable").rows = tableRows;
This example retrieves the rows of a table, adds a new row, and then overwrites the old rows.
1let rows = $w("#myTable").rows;2rows.push({field_1: "Value1", field_2: "Value2"});3$w("#myTable").rows = rows;4
1const myTableData = [2 {"name": "A", "num": 45},3 {"name": "B", "num": 34},4 {"name": "C", "num": 19},5 {"name": "D", "num": 59},6 {"name": "E", "num": 24},7 {"name": "F", "num": 96}8];910// ...1112$w("#myTable").rows = myTableData;
1import wixData from 'wix-data';23// ...45wixData.query("myCollection")6 .find()7 .then( (results) => {8 $w("#myTable").rows = results.items;9 } );
This example populates a table that displays information about documents that are stored in a collection and allows users to download each document by clicking a link in the table.
When the page is loaded, we first set the columns of the table to match the fields of the collection that contains the documents, excluding the field that contains the actual document. We also create one additional column whose value is not taken from the collection. The values users see in that column are set later, but the links are set to take their URLs from a collection field.
Then a query is executed to retrieve information from the collection. Before setting the query results to be the table's row data, we add a property and value to each retrieved item. These are the values that are populated in the additional column that was created earlier.
1/*2 The collection "myCollection" has the following field IDs:3 - docName: name of the document4 - docDescription: description of the document5 - doc: the document file6 */78import wixData from 'wix-data';910$w.onReady( function () {1112 // set the table columns13 $w("#myTable").columns = [14 // the column that shows the document name15 {16 "id": "col1",17 "dataPath": "docName", // matches field ID from collection18 "label": "Name",19 "width": 100,20 "visible": true,21 "type": "string",22 },23 // the column that shows the document description24 {25 "id": "col2",26 "dataPath": "docDescription", // matches field ID from collection27 "label": "Description",28 "width": 100,29 "visible": true,30 "type": "string",31 },32 // the column for downloading the document33 {34 "id": "col3",35 "dataPath": "download", // does not match field ID from collection36 "label": "Download",37 "width": 100,38 "visible": true,39 "type": "richText",40 "linkPath": "doc" // matches field ID from collection41 }42 ];4344 // execute query45 wixData.query("myCollection")46 .find()47 .then((results) => {48 // get the query result items49 let tableRows = results.items;5051 // add a property and value to serve as link text52 // property key matches third column dataPath above53 tableRows.forEach( (row) => {54 row.download = '<span style="color:blue">Download the doc</span>';55 } );5657 // set the table row data58 $w("#myTable").rows = tableRows;59 } );6061} );62