Filling one table from two sources

Ask the community
,
1

Hi,

I created a table which is populated by an external API.

One of the columns is empty because there is no value in the external API associated with it.

How can I set the value of this whole column to one word - “edit”?

Thanks!

2

When you have the data from your API you can set that to the table and then you can modify that data using the columns and rows property of the table.

3

Thanks Andreas.

I was unable to figure out how to set the data of one column using the documentation available. Do you know how I would do this?

4

@naomie Hey
Here is some sample from the docs. At the end you see that they add to a column. They set the column id as download and then loop through and set the value of that column.

import wixData from 'wix-data';

$w.onReady( function () {

  // set the table columns
  $w("#myTable").columns = [
    // the column that shows the document name
    {
      "id": "col1",
      "dataPath": "docName", // matches field key from collection
      "label": "Name",
      "width": 100,
      "visible": true,
      "type": "string",
    },
    // the column that shows the document description
    {
      "id": "col2",
      "dataPath": "docDescription", // matches field key from collection
      "label": "Description",
      "width": 100,
      "visible": true,
      "type": "string",
    },
    // the column for downloading the document
    {
      "id": "col3",
      "dataPath": "download", // does not match field key from collection
      "label": "Download",
      "width": 100,
      "visible": true,
      "type": "richText",
      "linkPath": "doc" // matches field key from collection
    }
  ];

  // execute query
  wixData.query("myCollection")
    .find()
    .then((results) => {
      // get the query result items
      let tableRows = results.items;

      // add a property and value to serve as link text
      // property key matches third column dataPath above
      tableRows.forEach( (row) => {
        row.download = '<span style="color:blue">Download the doc</span>';
      } );

      // set the table row data
      $w("#myTable").rows = tableRows;
    } );

} );