rows


rowsArray<object>

Sets or gets the table's row data.

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

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:

  1. Store the value of the rows property in a variable.
  2. Apply standard JavaScript array operators to the rows array.
  3. 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:

  1. 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.
  2. Execute a query() using the find() function.
  3. 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.

Was this helpful?
Yes
No