dataFetcher

Sets the function that is called when a new page of table data is to be displayed.

Description

The dataFetcher property is typically used when you are populating your table with data from an external (non-Wix) data source. You set it to a function that fetches the data to display.

The function that runs to fetch a new page of data must conform to the following structure:

function rowRetrievalFunction(startRow, endRow) {
  return new Promise( (resolve, reject) => {
    // Data retrieval code here
    if( retrievalSuccess ) {
      resolve( {
        pageRows: fetchedRows,
        totalRowsCount: numRows
      } );
    }
    else {
      reject();
    }
  } );
}

javascript | Copy Code

Meaning, your function must:

Take in two parameters:
- startRow the index of the first row to get
- endRow the index after the last row to get
Return a Promise which:
- Either resolves to an object with the following properties:
  - pageRows is an array of column:value row data
  - totalRowsCount is the number of total rows in all pages
- Or rejects

Another way of populating your table with data programmatically is to use the rows property.

Type:

FunctionRead & Write

Related Content:

rows

Was this helpful?

Set the function that fetches more data

Copy Code

1$w("#myTable").dataFetcher = getRows;
2
3// ...
4
5function getRows(startRow, endRow) {
6  return new Promise( (resolve, reject) => {
7    // data retrieval code here
8    if( retrievalSuccess ) {
9      // resolve to DataRequested object
10      resolve( {
11        pageRows: fetchedRows,
12        totalRowsCount: numRows
13      } );
14    }
15    else {
16      reject();
17    }
18  } );
19}

Fetch data from a static array

This example stores row data in a static array and uses dataFetcher to set the getRows function as the function to run when the table needs new data. The example assumes you have a table with ID myTable that contains two fields, name (type Text) and num (type Number).

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$w.onReady(function () {
11	$w("#myTable").dataFetcher = getRows;
12});
13
14function getRows(startRow, endRow) {
15  return new Promise( (resolve, reject) => {
16    // Fetch the objects from startRow to endRow from `myTableData`:
17    const fetchedDataRows = myTableData.slice(startRow, endRow);
18    // resolve to DataRequested object
19    resolve( {
20      pageRows: fetchedDataRows,
21      totalRowsCount: myTableData.length
22    } );
23  } );
24}
25