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 the columns 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:

[
  {
    "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"
  }
]

javascript | Copy Code

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 the find() function.
Set the tables rows to the items 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:

Array<Object>Read & Write

Was this helpful?

Get a table's row data

Copy Code

1let tableRows = $w("#myTable").rows;
2
3let value = tableRows[0]["field_name"]; // "field value"

Set a table's row data

Copy Code

1$w("#myTable").rows = tableRows;

Add a row to a table

This example retrieves the rows of a table, adds a new row, and then overwrites the old rows.

Copy Code

1let rows = $w("#myTable").rows;
2rows.push({field_1: "Value1", field_2: "Value2"});
3$w("#myTable").rows = rows;
4

Set a table's row data from an array

Copy Code

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];
9
10// ...
11
12$w("#myTable").rows = myTableData;

Set a table's row data from a query

Copy Code

1import wixData from 'wix-data';
2
3// ...
4
5wixData.query("myCollection")
6  .find()
7  .then( (results) => {
8    $w("#myTable").rows = results.items;
9  } );

Set a table's row data from a query

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.

Copy Code

1/*
2  The collection "myCollection" has the following field IDs:
3  - docName: name of the document
4  - docDescription: description of the document
5  - doc: the document file
6 */
7
8import wixData from 'wix-data';
9
10$w.onReady( function () {
11
12  // set the table columns
13  $w("#myTable").columns = [
14    // the column that shows the document name
15    {
16      "id": "col1",
17      "dataPath": "docName", // matches field ID from collection
18      "label": "Name",
19      "width": 100,
20      "visible": true,
21      "type": "string",
22    },
23    // the column that shows the document description
24    {
25      "id": "col2",
26      "dataPath": "docDescription", // matches field ID from collection
27      "label": "Description",
28      "width": 100,
29      "visible": true,
30      "type": "string",
31    },
32    // the column for downloading the document
33    {
34      "id": "col3",
35      "dataPath": "download", // does not match field ID from collection
36      "label": "Download",
37      "width": 100,
38      "visible": true,
39      "type": "richText",
40      "linkPath": "doc" // matches field ID from collection
41    }
42  ];
43
44  // execute query
45  wixData.query("myCollection")
46    .find()
47    .then((results) => {
48      // get the query result items
49      let tableRows = results.items;
50
51      // add a property and value to serve as link text
52      // property key matches third column dataPath above
53      tableRows.forEach( (row) => {
54        row.download = '<span style="color:blue">Download the doc</span>';
55      } );
56
57      // set the table row data
58      $w("#myTable").rows = tableRows;
59    } );
60
61} );
62