$w.Table

$w.Table

A table for displaying data.

Mixes In

$w.Element, $w.HiddenCollapsedMixin, $w.ClickableMixin

Contents

collapsed Indicates if the element is collapsed or expanded.
columns Sets or gets the defining properties of the columns in a table.
dataFetcher Sets the function that is called when a new page of table data is to be displayed.
global Indicates if an element appears on all pages or only on the current page.
hidden Indicates if the element is visible or hidden.
id Gets the elements's ID.
isVisible Indicates if the element is actually visible.
pagination Sets or gets the table's pagination options.
parent Gets the element's parent element.
rendered Indicates if an element is currently displayed.
rows Sets or gets the table's row data.
type Gets the element's type.
collapse( ) Collapses the element and sets its collapsed property to true.
expand( ) Expands the element and sets its collapsed property to false.
hide( ) Hides the element and sets its hidden property to true, using an effect if specified.
onCellSelect( ) Adds an event handler that runs when a table cell is selected.
onClick( ) Adds an event handler that runs when the element is clicked.
onDataChange( ) Adds an event handler that runs when the table's data is changed.
onDblClick( ) Adds an event handler that runs when the element is double-clicked.
onMouseIn( ) Adds an event handler that runs when the mouse pointer is moved onto the element.
onMouseOut( ) Adds an event handler that runs when the mouse pointer is moved off of the element.
onRowSelect( ) Adds an event handler that runs when a table row is selected.
onViewportEnter( ) Adds an event handler that runs when an element is displayed in the viewable part of the current window.
onViewportLeave( ) Adds an event handler that runs when an element is no longer displayed in the viewable part of the current window.
refresh( ) Fetches the most current data and updates the table.
scrollTo( ) Scrolls the page to the element using an animation.
selectRow( ) Selects a table row by index.
show( ) Shows the element and sets its hidden property to false, using an effect if specified.
updateRow( ) Updates a the row data of a single row at the specified index.
Column An object used by the columns property that contains the properties that define a table column. Table columns do not store any data.
PaginationOptions An object used by the pagination property that contains the pagination options which determine if and how the table is paginated.
collapsed

collapsed

Indicates if the element is collapsed or expanded.

Syntax

get collapsed(): boolean

Description

If collapsed is true, the element is not displayed on the page under any circumstances. A collapsed element, unlike a hidden element, does not take up any space on the page. When collapsed, elements positioned within 70 pixels below the collapsed element and each other move up to take the collapsed element's place where possible. The elements that move up maintain their positions relative to one another.

If collapsed is false, the element may be displayed on the page. Elements that moved up to take the collapsed element's place on the page are moved back down.

However, an expanded element (an element whose collapsed property is false) is still not displayed if:

Even if the element is not be displayed due to the conditions mentioned above, if its collapsed property is false, it's displayed when the conditions no longer apply.

To set the collapsed property on an element, use the element's collapse() and expand() functions.

If you select Collapsed on load in the element's Properties panel in the Editor, the collapsed property is set to true when the page loads.

Type

Boolean

Examples

Get an element's collapsed status

bGV0IGlzQ29sbGFwc2VkID0gJHcoIiNteUVsZW1lbnQiKS5jb2xsYXBzZWQ7IC8vIGZhbHNlCg==
let isCollapsed = $w("#myElement").collapsed; // false

Toggle an element's collapsed state

aWYoICR3KCIjbXlFbGVtZW50IikuY29sbGFwc2VkICkgewogICR3KCIjbXlFbGVtZW50IikuZXhwYW5kKCk7Cn0KZWxzZSB7CiAgJHcoIiNteUVsZW1lbnQiKS5jb2xsYXBzZSgpOwp9Cg==
if( $w("#myElement").collapsed ) {
  $w("#myElement").expand();
}
else {
  $w("#myElement").collapse();
}

Default Value

false

Mixed In From

$w.HiddenCollapsedMixin

See Also

collapse( ), expand( ), hide( ), show( ), hidden

columns

columns

Sets or gets the defining properties of the columns in a table.

Syntax

set columns(): Column[]
get columns(value: Column[]): void

Description

Table columns do not store any data. They contain the properties, such as the label and type, that define a table column.

Setting the columns property sets the columns in the table.

Getting the columns property returns the current list of columns in the table.

You cannot modify the data array in-place. To add, change, or remove individual columns:

  1. Store the value of the columns property in a variable.
  2. Make changes to the columns array.
  3. Reset the columns property with the modified array.

Type

Column[ ]

Examples

Get the list of columns and the first columns's information

bGV0IGNvbHMgPSAkdygiI215VGFibGUiKS5jb2x1bW5zOwoKbGV0IGZpcnN0Q29sSUQgPSBjb2xzWzBdLmlkOyAgICAgICAgICAgICAgLy8gImNvbDAiCmxldCBmaXJzdENvbERhdGFQYXRoID0gY29sc1swXS5kYXRhUGF0aDsgIC8vICJmaXJzdF9jb2wiCmxldCBmaXJzdENvbExhYmVsID0gY29sc1swXS5sYWJlbDsgICAgICAgIC8vICJGaXJzdCBDb2x1bW4iCmxldCBmaXJzdENvbFdpZHRoID0gY29sc1swXS53aWR0aDsgICAgICAgIC8vIDEwMApsZXQgZmlyc3RDb2xWaXNpYmxlID0gY29sc1swXS52aXNpYmxlOyAgICAgIC8vIHRydWUKbGV0IGZpcnN0Q29sVHlwZSA9IGNvbHNbMF0udHlwZTsgICAgICAgICAgLy8gInN0cmluZyIKbGV0IGZpcnN0Q29sUGF0aCA9IGNvbHNbMF0ubGlua1BhdGg7ICAgICAvLyAibGluay1maWVsZC1vci1wcm9wZXJ0eSIK
let cols = $w("#myTable").columns;

let firstColID = cols[0].id;              // "col0"
let firstColDataPath = cols[0].dataPath;  // "first_col"
let firstColLabel = cols[0].label;        // "First Column"
let firstColWidth = cols[0].width;        // 100
let firstColVisible = cols[0].visible;      // true
let firstColType = cols[0].type;          // "string"
let firstColPath = cols[0].linkPath;     // "link-field-or-property"

Set the list of columns for a table

JHcoIiNteVRhYmxlIikuY29sdW1ucyA9IFsKICB7CiAgICAiaWQiOiAiY29sMSIsCiAgICAiZGF0YVBhdGgiOiAiZmllbGQxIiwKICAgICJsYWJlbCI6ICJGaWVsZCAxIiwKICAgICJ3aWR0aCI6IDEwMCwKICAgICJ2aXNpYmxlIjogdHJ1ZSwKICAgICJ0eXBlIjogInN0cmluZyIsCiAgICAibGlua1BhdGgiOiAibGluay1maWVsZC1vci1wcm9wZXJ0eSIKICB9LAogIHsKICAgICJpZCI6ICJjb2wyIiwKICAgICJkYXRhUGF0aCI6ICJmaWVsZDIiLAogICAgImxhYmVsIjogIkZpZWxkIDIiLAogICAgIndpZHRoIjogMTAwLAogICAgInZpc2libGUiOiB0cnVlLAogICAgInR5cGUiOiAiaW1hZ2UiLAogICAgImxpbmtQYXRoIjogImxpbmstZmllbGQtb3ItcHJvcGVydHkiCiAgfSwKICB7CiAgICAiaWQiOiAiY29sMyIsCiAgICAiZGF0YVBhdGgiOiAiZmllbGQzIiwKICAgICJsYWJlbCI6ICJGaWVsZCAzIiwKICAgICJ3aWR0aCI6IDEwMCwKICAgICJ2aXNpYmxlIjogdHJ1ZSwKICAgICJ0eXBlIjogIm51bWJlciIsCiAgICAibGlua1BhdGgiOiAibGluay1maWVsZC1vci1wcm9wZXJ0eSIKICB9Cl07Cg==
$w("#myTable").columns = [
  {
    "id": "col1",
    "dataPath": "field1",
    "label": "Field 1",
    "width": 100,
    "visible": true,
    "type": "string",
    "linkPath": "link-field-or-property"
  },
  {
    "id": "col2",
    "dataPath": "field2",
    "label": "Field 2",
    "width": 100,
    "visible": true,
    "type": "image",
    "linkPath": "link-field-or-property"
  },
  {
    "id": "col3",
    "dataPath": "field3",
    "label": "Field 3",
    "width": 100,
    "visible": true,
    "type": "number",
    "linkPath": "link-field-or-property"
  }
];

Add a column to a table

This example retrieves the columns of a table, adds a new column, and then overwrites the old options.

bGV0IGNvbHMgPSAkdygiI215VGFibGUiKS5jb2x1bW5zOwpjb2xzLnB1c2goIHsKICAiaWQiOiAibmV3Q29sIiwKICAiZGF0YVBhdGgiOiAibmV3X2NvbCIsCiAgImxhYmVsIjogIk5ldyBDb2x1bW4iLAogICJ3aWR0aCI6IDEwMCwKICAidmlzaWJsZSI6IHRydWUsCiAgInR5cGUiOiAic3RyaW5nIgp9ICk7CiR3KCIjbXlUYWJsZSIpLmNvbHVtbnMgPSBjb2xzOwo=
let cols = $w("#myTable").columns;
cols.push( {
  "id": "newCol",
  "dataPath": "new_col",
  "label": "New Column",
  "width": 100,
  "visible": true,
  "type": "string"
} );
$w("#myTable").columns = cols;
dataFetcher

dataFetcher

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

Syntax

get dataFetcher: function
set dataFetcher(rowRetrievalFunction: function): void

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:

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

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.

Examples

Set the function that fetches more data

JHcoIiNteVRhYmxlIikuZGF0YUZldGNoZXIgPSBnZXRSb3dzOwoKLy8gLi4uCgpmdW5jdGlvbiBnZXRSb3dzKHN0YXJ0Um93LCBlbmRSb3cpIHsKICByZXR1cm4gbmV3IFByb21pc2UoIChyZXNvbHZlLCByZWplY3QpID0+IHsKICAgIC8vIGRhdGEgcmV0cmlldmFsIGNvZGUgaGVyZQogICAgaWYoIHJldHJpZXZhbFN1Y2Nlc3MgKSB7CiAgICAgIC8vIHJlc29sdmUgdG8gRGF0YVJlcXVlc3RlZCBvYmplY3QKICAgICAgcmVzb2x2ZSggewogICAgICAgIHBhZ2VSb3dzOiBmZXRjaGVkUm93cywKICAgICAgICB0b3RhbFJvd3NDb3VudDogbnVtUm93cwogICAgICB9ICk7CiAgICB9CiAgICBlbHNlIHsKICAgICAgcmVqZWN0KCk7CiAgICB9CiAgfSApOwp9Cg==
$w("#myTable").dataFetcher = getRows;

// ...

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

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).

Y29uc3QgbXlUYWJsZURhdGEgPSBbCiAgeyJuYW1lIjogIkEiLCAibnVtIjogNDV9LAogIHsibmFtZSI6ICJCIiwgIm51bSI6IDM0fSwKICB7Im5hbWUiOiAiQyIsICJudW0iOiAxOX0sCiAgeyJuYW1lIjogIkQiLCAibnVtIjogNTl9LAogIHsibmFtZSI6ICJFIiwgIm51bSI6IDI0fSwKICB7Im5hbWUiOiAiRiIsICJudW0iOiA5Nn0KXTsKCiR3Lm9uUmVhZHkoZnVuY3Rpb24gKCkgewoJJHcoIiNteVRhYmxlIikuZGF0YUZldGNoZXIgPSBnZXRSb3dzOwp9KTsKCmZ1bmN0aW9uIGdldFJvd3Moc3RhcnRSb3csIGVuZFJvdykgewogIHJldHVybiBuZXcgUHJvbWlzZSggKHJlc29sdmUsIHJlamVjdCkgPT4gewogICAgLy8gRmV0Y2ggdGhlIG9iamVjdHMgZnJvbSBzdGFydFJvdyB0byBlbmRSb3cgZnJvbSBgbXlUYWJsZURhdGFgOgogICAgY29uc3QgZmV0Y2hlZERhdGFSb3dzID0gbXlUYWJsZURhdGEuc2xpY2Uoc3RhcnRSb3csIGVuZFJvdyk7CiAgICAvLyByZXNvbHZlIHRvIERhdGFSZXF1ZXN0ZWQgb2JqZWN0CiAgICByZXNvbHZlKCB7CiAgICAgIHBhZ2VSb3dzOiBmZXRjaGVkRGF0YVJvd3MsCiAgICAgIHRvdGFsUm93c0NvdW50OiBteVRhYmxlRGF0YS5sZW5ndGgKICAgIH0gKTsKICB9ICk7Cn0K
const myTableData = [
  {"name": "A", "num": 45},
  {"name": "B", "num": 34},
  {"name": "C", "num": 19},
  {"name": "D", "num": 59},
  {"name": "E", "num": 24},
  {"name": "F", "num": 96}
];

$w.onReady(function () {
	$w("#myTable").dataFetcher = getRows;
});

function getRows(startRow, endRow) {
  return new Promise( (resolve, reject) => {
    // Fetch the objects from startRow to endRow from `myTableData`:
    const fetchedDataRows = myTableData.slice(startRow, endRow);
    // resolve to DataRequested object
    resolve( {
      pageRows: fetchedDataRows,
      totalRowsCount: myTableData.length
    } );
  } );
}

See Also

rows

global

global

Indicates if an element appears on all pages or only on the current page.

Syntax

get global(): boolean

Description

If global is true, the element appears on all pages.

If global is false, the element only appears on the current page.

Type

Boolean

Examples

Get whether an element is displayed on all pages

bGV0IGlzR2xvYmFsID0gJHcoIiNteUVsZW1lbnQiKS5nbG9iYWw7IC8vIGZhbHNlCg==
let isGlobal = $w("#myElement").global; // false

Default Value

false

Mixed In From

$w.Element

hidden

hidden

Indicates if the element is visible or hidden.

Syntax

get hidden(): boolean

Description

If hidden is true, the element is not displayed on the page under any circumstances. A hidden element, unlike a collapsed element, continues to take up the same space on the page as it did when it was visible.

If hidden is false, the element may be displayed on the page.

However, an element whose hidden property is false is still not displayed if:

Even if the element is not displayed due to the conditions mentioned above, if its hidden property is set to false, it's displayed when the conditions no longer apply.

To determine if the element is actually visible, use the isVisible property.

To set the hidden property on an element, use the element's hide() or show() functions.

If you select Hidden on load in the element's Properties panel in the Editor, the hidden property is set to true when the page loads.

Type

Boolean

Examples

Get an element's hidden status

bGV0IGlzSGlkZGVuID0gJHcoIiNteUVsZW1lbnQiKS5oaWRkZW47ICAvLyBmYWxzZQo=
let isHidden = $w("#myElement").hidden;  // false

Toggle an element's hidden state

aWYoICR3KCIjbXlFbGVtZW50IikuaGlkZGVuICkgewogICR3KCIjbXlFbGVtZW50Iikuc2hvdygpOwp9CmVsc2UgewogICR3KCIjbXlFbGVtZW50IikuaGlkZSgpOwp9Cg==
if( $w("#myElement").hidden ) {
  $w("#myElement").show();
}
else {
  $w("#myElement").hide();
}

Default Value

false

Mixed In From

$w.HiddenCollapsedMixin

See Also

hide( ), show( ), collapse( ), expand( ), collapsed, rendered

id

id

Gets the elements's ID.

Syntax

get id(): string

Description

The ID is the element's unique identifier. It is used when selecting elements using the $w() function.

An element's id is set in the Editor using the Properties panel.

Type

String

Examples

Get the ID

bGV0IG15SWQgPSAkdygiI215RWxlbWVudCIpLmlkOyAvLyAibXlFbGVtZW50Igo=
let myId = $w("#myElement").id; // "myElement"

Mixed In From

$w.Element

isVisible

isVisible

Indicates if the element is actually visible.

Syntax

get isVisible(): boolean

Description

If isVisible is true, the element is displayed on the page.

If isVisible is false, the element is not displayed on the page.

The value of the isVisible property is calculated based on the hidden, collapsed, and rendered properties of the element and all of its ancestors. It is true only if the conditions exist in the element's property values and the property values of its ancestors such that the element is actually displayed on the page.

Type

Boolean

Examples

Get whether an element is visible

bGV0IGlzVmlzaWJsZSA9ICR3KCIjbXlFbGVtZW50IikuaXNWaXNpYmxlOyAgLy8gdHJ1ZQo=
let isVisible = $w("#myElement").isVisible;  // true

Default Value

true

Mixed In From

$w.HiddenCollapsedMixin

See Also

hidden, collapsed, rendered

pagination

pagination

Sets or gets the table's pagination options.

Syntax

set pagination(): PaginationOptions
get pagination(value: PaginationOptions): void

Description

Setting the pagination property sets the table's pagination options and changes the way the table is paginated.

Getting the pagination property returns the table's current pagination options.

Type

PaginationOptions

Examples

Get the table's pagination options

bGV0IHRhYmxlUGFnaW5hdGlvbiA9ICR3KCIjbXlUYWJsZSIpLnBhZ2luYXRpb247CgpsZXQgcGFnaW5hdGlvblR5cGUgPSB0YWJsZVBhZ2luYXRpb24udHlwZTsgICAgICAgIC8vICJwYWdpbmF0aW9uIgpsZXQgcGFnaW5hdGlvblJvd3MgPSB0YWJsZVBhZ2luYXRpb24ucm93c1BlclBhZ2U7IC8vIDUK
let tablePagination = $w("#myTable").pagination;

let paginationType = tablePagination.type;        // "pagination"
let paginationRows = tablePagination.rowsPerPage; // 5

Set the table's pagination options

JHcoIiNteVRhYmxlIikucGFnaW5hdGlvbiA9IHsidHlwZSI6ICJwYWdpbmF0aW9uIiwgInJvd3NQZXJQYWdlIjogNH07Cg==
$w("#myTable").pagination = {"type": "pagination", "rowsPerPage": 4};
parent

parent

Gets the element's parent element.

Syntax

get parent(): Node

Description

Some elements can contain other elements. This occurs when you drag an element onto a container element. The container is the parent of all the elements it contains.

Page, Header, and Footer are top-level elements and have no parent.

Type

Node

Examples

Get the parent element and the parent's ID

bGV0IHBhcmVudEVsZW1lbnQgPSAkdygiI215RWxlbWVudCIpLnBhcmVudDsKCmxldCBwYXJlbnRJZCA9IHBhcmVudEVsZW1lbnQuaWQ7IC8vICJwYWdlMSIK
let parentElement = $w("#myElement").parent;

let parentId = parentElement.id; // "page1"

Default Value

null

Mixed In From

$w.Element

See Also

children

rendered

rendered

Indicates if an element is currently displayed.

Syntax

get rendered(): boolean

Description

If rendered is true, the element is in the current DOM structure and can be used.

If rendered is false the element is not in the current DOM structure.

Some reasons the element might not be in the DOM inclue:

  • It is in a slide which is not currently showing.
  • It is in a mode which is not currently active. For example, it is in the hover mode of a hover box.

Type

Boolean

Default Value

false

Mixed In From

$w.Element

See Also

collapsed, hidden, isVisible

rows

rows

Sets or gets the table's row data.

Syntax

get rows(): Object[]
set rows(value: Object[]): void

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:

IFsKICAgewogICAgICJmaXJzdE5hbWUiOiAiSm9obiIsCiAgICAgImxhc3ROYW1lIjogIkRvZSIsCiAgICAgImVtYWlsIjogImpvaG4uZG9lQHNvbWVkb21haW4uY29tIiwKICAgICAiaW1hZ2UiOiAiaHR0cDovL3NvbWVJbWFnZVVybC9qb2huLmpwZyIKICAgfSwKICAgewogICAgICJmaXJzdE5hbWUiOiAiSmFuZSIsCiAgICAgImxhc3ROYW1lIjogIkRvZSIsCiAgICAgImVtYWlsIjogImphbmUuZG9lQHNvbWVkb21haW4uY29tIiwKICAgICAiaW1hZ2UiOiAiaHR0cDovL3NvbWVJbWFnZVVybC9qYW5lLmpwZyIKICAgfQogXQ==
 [
   {
     "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.

Type

Object[ ]

Examples

Get a table's row data

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

let value = tableRows[0]["field_name"]; // "field value"

Set a table's row data

JHcoIiNteVRhYmxlIikucm93cyA9IHRhYmxlUm93czsK
$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.

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

Set a table's row data from an array

Y29uc3QgbXlUYWJsZURhdGEgPSBbCiAgeyJuYW1lIjogIkEiLCAibnVtIjogNDV9LAogIHsibmFtZSI6ICJCIiwgIm51bSI6IDM0fSwKICB7Im5hbWUiOiAiQyIsICJudW0iOiAxOX0sCiAgeyJuYW1lIjogIkQiLCAibnVtIjogNTl9LAogIHsibmFtZSI6ICJFIiwgIm51bSI6IDI0fSwKICB7Im5hbWUiOiAiRiIsICJudW0iOiA5Nn0KXTsKCi8vIC4uLgoKJHcoIiNteVRhYmxlIikucm93cyA9IG15VGFibGVEYXRhOwo=
const myTableData = [
  {"name": "A", "num": 45},
  {"name": "B", "num": 34},
  {"name": "C", "num": 19},
  {"name": "D", "num": 59},
  {"name": "E", "num": 24},
  {"name": "F", "num": 96}
];

// ...

$w("#myTable").rows = myTableData;

Set a table's row data from a query

aW1wb3J0IHdpeERhdGEgZnJvbSAnd2l4LWRhdGEnOwoKLy8gLi4uCgp3aXhEYXRhLnF1ZXJ5KCJteUNvbGxlY3Rpb24iKQogIC5maW5kKCkKICAudGhlbiggKHJlc3VsdHMpID0+IHsKICAgICR3KCIjbXlUYWJsZSIpLnJvd3MgPSByZXN1bHRzLml0ZW1zOwogIH0gKTsK
import wixData from 'wix-data';

// ...

wixData.query("myCollection")
  .find()
  .then( (results) => {
    $w("#myTable").rows = results.items;
  } );

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.

LyoKICBUaGUgY29sbGVjdGlvbiAibXlDb2xsZWN0aW9uIiBoYXMgdGhlIGZvbGxvd2luZyBmaWVsZCBrZXlzOgogIC0gZG9jTmFtZTogbmFtZSBvZiB0aGUgZG9jdW1lbnQKICAtIGRvY0Rlc2NyaXB0aW9uOiBkZXNjcmlwdGlvbiBvZiB0aGUgZG9jdW1lbnQKICAtIGRvYzogdGhlIGRvY3VtZW50IGZpbGUKICovCgppbXBvcnQgd2l4RGF0YSBmcm9tICd3aXgtZGF0YSc7Cgokdy5vblJlYWR5KCBmdW5jdGlvbiAoKSB7CgogIC8vIHNldCB0aGUgdGFibGUgY29sdW1ucwogICR3KCIjbXlUYWJsZSIpLmNvbHVtbnMgPSBbCiAgICAvLyB0aGUgY29sdW1uIHRoYXQgc2hvd3MgdGhlIGRvY3VtZW50IG5hbWUKICAgIHsKICAgICAgImlkIjogImNvbDEiLAogICAgICAiZGF0YVBhdGgiOiAiZG9jTmFtZSIsIC8vIG1hdGNoZXMgZmllbGQga2V5IGZyb20gY29sbGVjdGlvbgogICAgICAibGFiZWwiOiAiTmFtZSIsCiAgICAgICJ3aWR0aCI6IDEwMCwKICAgICAgInZpc2libGUiOiB0cnVlLAogICAgICAidHlwZSI6ICJzdHJpbmciLAogICAgfSwKICAgIC8vIHRoZSBjb2x1bW4gdGhhdCBzaG93cyB0aGUgZG9jdW1lbnQgZGVzY3JpcHRpb24KICAgIHsKICAgICAgImlkIjogImNvbDIiLAogICAgICAiZGF0YVBhdGgiOiAiZG9jRGVzY3JpcHRpb24iLCAvLyBtYXRjaGVzIGZpZWxkIGtleSBmcm9tIGNvbGxlY3Rpb24KICAgICAgImxhYmVsIjogIkRlc2NyaXB0aW9uIiwKICAgICAgIndpZHRoIjogMTAwLAogICAgICAidmlzaWJsZSI6IHRydWUsCiAgICAgICJ0eXBlIjogInN0cmluZyIsCiAgICB9LAogICAgLy8gdGhlIGNvbHVtbiBmb3IgZG93bmxvYWRpbmcgdGhlIGRvY3VtZW50CiAgICB7CiAgICAgICJpZCI6ICJjb2wzIiwKICAgICAgImRhdGFQYXRoIjogImRvd25sb2FkIiwgLy8gZG9lcyBub3QgbWF0Y2ggZmllbGQga2V5IGZyb20gY29sbGVjdGlvbgogICAgICAibGFiZWwiOiAiRG93bmxvYWQiLAogICAgICAid2lkdGgiOiAxMDAsCiAgICAgICJ2aXNpYmxlIjogdHJ1ZSwKICAgICAgInR5cGUiOiAicmljaFRleHQiLAogICAgICAibGlua1BhdGgiOiAiZG9jIiAvLyBtYXRjaGVzIGZpZWxkIGtleSBmcm9tIGNvbGxlY3Rpb24KICAgIH0KICBdOwoKICAvLyBleGVjdXRlIHF1ZXJ5CiAgd2l4RGF0YS5xdWVyeSgibXlDb2xsZWN0aW9uIikKICAgIC5maW5kKCkKICAgIC50aGVuKChyZXN1bHRzKSA9PiB7CiAgICAgIC8vIGdldCB0aGUgcXVlcnkgcmVzdWx0IGl0ZW1zCiAgICAgIGxldCB0YWJsZVJvd3MgPSByZXN1bHRzLml0ZW1zOwoKICAgICAgLy8gYWRkIGEgcHJvcGVydHkgYW5kIHZhbHVlIHRvIHNlcnZlIGFzIGxpbmsgdGV4dAogICAgICAvLyBwcm9wZXJ0eSBrZXkgbWF0Y2hlcyB0aGlyZCBjb2x1bW4gZGF0YVBhdGggYWJvdmUKICAgICAgdGFibGVSb3dzLmZvckVhY2goIChyb3cpID0+IHsKICAgICAgICByb3cuZG93bmxvYWQgPSAnPHNwYW4gc3R5bGU9ImNvbG9yOmJsdWUiPkRvd25sb2FkIHRoZSBkb2M8L3NwYW4+JzsKICAgICAgfSApOwoKICAgICAgLy8gc2V0IHRoZSB0YWJsZSByb3cgZGF0YQogICAgICAkdygiI215VGFibGUiKS5yb3dzID0gdGFibGVSb3dzOwogICAgfSApOwoKfSApOwo=
/*
  The collection "myCollection" has the following field keys:
  - docName: name of the document
  - docDescription: description of the document
  - doc: the document file
 */

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 = 'Download the doc';
      } );

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

} );
type

type

Gets the element's type.

Syntax

get type(): string

Type

String

Examples

Get the element's type

bGV0IG15VHlwZSA9ICR3KCIjbXlFbGVtZW50IikudHlwZTsgLy8gIiR3LlR5cGUiCg==
let myType = $w("#myElement").type; // "$w.Type"

Mixed In From

$w.Element

collapse( )

collapse( )

Collapses the element and sets its collapsed property to true.

function collapse(): Promise<void>

Description

The collapse() function returns a Promise that is resolved when the element's collapsed property has been set to true.

To learn about the behavior of a collapsed element, see the collapsed property.

You can also collapse an element when the page loads by using the Properties panel in the Editor.

Return Value

Returns a Promise

On fulfillment void When the element's collapsed property has been set to true.

Examples

Collapse an element

JHcoIiNteUVsZW1lbnQiKS5jb2xsYXBzZSgpOwo=
$w("#myElement").collapse();

Collapse an element and log a message when done

JHcoIiNteUVsZW1lbnQiKS5jb2xsYXBzZSgpCiAgLnRoZW4oICgpID0+IHsKICAgIGNvbnNvbGUubG9nKCJEb25lIHdpdGggY29sbGFwc2UiKTsKICB9ICk7Cg==
$w("#myElement").collapse()
  .then( () => {
    console.log("Done with collapse");
  } );

Toggle an element's collapsed state

aWYoICR3KCIjbXlFbGVtZW50IikuY29sbGFwc2VkICkgewogICR3KCIjbXlFbGVtZW50IikuZXhwYW5kKCk7Cn0KZWxzZSB7CiAgJHcoIiNteUVsZW1lbnQiKS5jb2xsYXBzZSgpOwp9Cg==
if( $w("#myElement").collapsed ) {
  $w("#myElement").expand();
}
else {
  $w("#myElement").collapse();
}

Mixed In From

$w.HiddenCollapsedMixin

See Also

expand( ), collapsed, hide( )

expand( )

expand( )

Expands the element and sets its collapsed property to false.

function expand(): Promise<void>

Description

The expand() function returns a Promise that is resolved when the element's collapsed property has been set to false.

To learn about the behavior of an expanded element, see the collapsed property.

Return Value

Returns a Promise

On fulfillment void When the element's collapsed property has been set to false.

Examples

Expand an element

JHcoIiNteUVsZW1lbnQiKS5leHBhbmQoKTsK
$w("#myElement").expand();

Expand an element and log a message when done

JHcoIiNteUVsZW1lbnQiKS5leHBhbmQoKQogIC50aGVuKCAoKSA9PiB7CiAgICBjb25zb2xlLmxvZygiRG9uZSB3aXRoIGV4cGFuZCIpOwogIH0gKTsK
$w("#myElement").expand()
  .then( () => {
    console.log("Done with expand");
  } );

Toggle an element's collapsed state

aWYoICR3KCIjbXlFbGVtZW50IikuY29sbGFwc2VkICkgewogICR3KCIjbXlFbGVtZW50IikuZXhwYW5kKCk7Cn0KZWxzZSB7CiAgJHcoIiNteUVsZW1lbnQiKS5jb2xsYXBzZSgpOwp9Cg==
if( $w("#myElement").collapsed ) {
  $w("#myElement").expand();
}
else {
  $w("#myElement").collapse();
}

Mixed In From

$w.HiddenCollapsedMixin

See Also

expand( ), collapsed, show( )

hide( )

hide( )

Hides the element and sets its hidden property to true, using an effect if specified.

function hide([effectName: Effect], [effectOptions: EffectOptions]): Promise<void>
type Effect = "arc" | "bounce" | "fade" | "flip"
| "float" | "fly" | "fold" | "glide" | "puff"
| "roll" | "slide" | "spin" | "turn" | "zoom"
type EffectOptions = ArcEffectOptions | BounceEffectOptions
| FadeEffectOptions | FlipEffectOptions | FloatEffectOptions
| FlyEffectOptions | FoldEffectOptions | GlideEffectOptions
| PuffEffectOptions | RollEffectOptions | SlideEffectOptions
| SpinEffectOptions | TurnEffectOptions | ZoomEffectOptions

Description

The hide() function hides the element and returns a Promise that is resolved when the effect is complete and the element's hidden property has been set to true.

To learn about the behavior of a hidden element, see the hidden property.

You can optionally apply an effect when hiding the element by providing an effectName value. You can also customize the effect by providing the optional effectOptions object.

Effects:

You can also hide an element when the page loads by using the Properties panel in the Editor.

Parameters

effectName (optional) String The name of the effect to play when hiding the item.
effectOptions (optional) ArcEffectOptions |
BounceEffectOptions |
FadeEffectOptions |
FlipEffectOptions |
FloatEffectOptions |
FlyEffectOptions |
FoldEffectOptions |
GlideEffectOptions |
PuffEffectOptions |
RollEffectOptions |
SlideEffectOptions |
SpinEffectOptions |
TurnEffectOptions |
ZoomEffectOptions
The effect's options.

Return Value

Returns a Promise

On fulfillment void When the effect is complete and the element's hidden property has been set to true.

Examples

Hide an element with no effect

JHcoIiNteUVsZW1lbnQiKS5oaWRlKCk7Cg==
$w("#myElement").hide();

Hide an element with the "fade" effect

JHcoIiNteUVsZW1lbnQiKS5oaWRlKCJmYWRlIik7Cg==
$w("#myElement").hide("fade");

Hide an element with an effect and log message when the effect is done

bGV0IGZhZGVPcHRpb25zID0gewogICJkdXJhdGlvbiI6ICAgMjAwMCwKICAiZGVsYXkiOiAgICAgIDEwMDAKfTsKCiR3KCIjbXlFbGVtZW50IikuaGlkZSgiZmFkZSIsIGZhZGVPcHRpb25zKTsK
let fadeOptions = {
  "duration":   2000,
  "delay":      1000
};

$w("#myElement").hide("fade", fadeOptions);

Hide an element with an effect and log message when the effect is done

JHcoIiNteUVsZW1lbnQiKS5oaWRlKCJmYWRlIikKICAudGhlbiggKCApID0+IHsKICAgIGNvbnNvbGUubG9nKCJEb25lIHdpdGggZmFkZSIpOwp9ICk7Cg==
$w("#myElement").hide("fade")
  .then( ( ) => {
    console.log("Done with fade");
} );

Toggle an element's hidden state

aWYoICR3KCIjbXlFbGVtZW50IikuaGlkZGVuICkgewogICR3KCIjbXlFbGVtZW50Iikuc2hvdygpOwp9CmVsc2UgewogICR3KCIjbXlFbGVtZW50IikuaGlkZSgpOwp9Cg==
if( $w("#myElement").hidden ) {
  $w("#myElement").show();
}
else {
  $w("#myElement").hide();
}

Mixed In From

$w.HiddenCollapsedMixin

See Also

show( ), hidden, collapse( )

onCellSelect( )

onCellSelect( )

Adds an event handler that runs when a table cell is selected.

function onCellSelect(handler: TableCellEventHandler): Table
callback TableCellEventHandler(event: TableCellEvent, $w: Function): void

Description

A table receives a TableCellEvent when the table is set set in the Editor to select cells when clicked. Clicking Selects Cells

Parameters

eventHandler function(event, $w) The name of the function or the function expression to run when the cell is selected.
event TableCellEvent The table cell event that occurred.
$w $w A selector function. The $w function enables event handlers to work with elements in repeaters and in the global scope.

Return Value

Table The table that triggered the event.

Examples

Get the selected table cell information

JHcoIiNteVRhYmxlIikub25DZWxsU2VsZWN0KCAoZXZlbnQsICR3KSA9PiB7CiAgbGV0IGNlbGxDb2xJZCA9IGV2ZW50LmNlbGxDb2x1bW5JZDsgICAgIC8vICJjb2x1bW5JZF9iMmIzLTg3ZDktNDkyNTAiCiAgbGV0IGNlbGxEYXRhID0gZXZlbnQuY2VsbERhdGE7ICAgICAgICAgIC8vICJKb2huIgogIGxldCBjZWxsUm93SW5kZXggPSBldmVudC5jZWxsUm93SW5kZXg7ICAvLyAxCn0gKTsK
$w("#myTable").onCellSelect( (event, $w) => {
  let cellColId = event.cellColumnId;     // "columnId_b2b3-87d9-49250"
  let cellData = event.cellData;          // "John"
  let cellRowIndex = event.cellRowIndex;  // 1
} );
onClick( )

onClick( )

Adds an event handler that runs when the element is clicked.

function onClick(handler: MouseEventHandler): Element
callback MouseEventHandler(event: MouseEvent, $w: Function): void

Description

An element receives a click event when a user clicks on the element and releases.

When a user double-clicks an element, two click events are fired before a doubleClick event is also fired.

Parameters

handler function(event, $w) The name of the function or the function expression to run when the element is clicked.
event MouseEvent The mouse event that occurred.
$w $w A selector function. The $w function enables event handlers to work with elements in repeaters and in the global scope.

Return Value

Element The element to which the event handler was added.

Examples

Get the ID of the element that was clicked

JHcoIiNteUVsZW1lbnQiKS5vbkNsaWNrKCAoZXZlbnQsICR3KSA9PiB7CiAgbGV0IHRhcmdldElkID0gZXZlbnQudGFyZ2V0LmlkOyAgLy8gIm15RWxlbWVudCIKfSApOwo=
$w("#myElement").onClick( (event, $w) => {
  let targetId = event.target.id;  // "myElement"
} );

Get a mouse click's coordinates

JHcoIiNteUVsZW1lbnQiKS5vbkNsaWNrKCAoZXZlbnQsICR3KSA9PiB7CiAgbGV0IGNsaWVudFggPSBldmVudC5jbGllbnRYOyAgLy8gMzYyCiAgbGV0IGNsaWVudFkgPSBldmVudC5jbGllbnRZOyAgLy8gMjQ0CiAgbGV0IG9mZnNldFggPSBldmVudC5vZmZzZXRYOyAgLy8gMTAKICBsZXQgb2Zmc2V0WSA9IGV2ZW50Lm9mZnNldFk7ICAvLyAxMgogIGxldCBwYWdlWCA9IGV2ZW50LnBhZ2VYOyAgICAgIC8vIDM2MgogIGxldCBwYWdlWSA9IGV2ZW50LnBhZ2VZOyAgICAgIC8vIDM3NgogIGxldCBzY3JlZW5YID0gZXZlbnQuc2NyZWVuWDsgIC8vIDM4OTcKICBsZXQgc2NyZWVuWSA9IGV2ZW50LnNjcmVlblk7ICAvLyAzNjIKfSApOwo=
$w("#myElement").onClick( (event, $w) => {
  let clientX = event.clientX;  // 362
  let clientY = event.clientY;  // 244
  let offsetX = event.offsetX;  // 10
  let offsetY = event.offsetY;  // 12
  let pageX = event.pageX;      // 362
  let pageY = event.pageY;      // 376
  let screenX = event.screenX;  // 3897
  let screenY = event.screenY;  // 362
} );

Mixed In From

$w.ClickableMixin

See Also

onDblClick( )

onDataChange( )

onDataChange( )

Adds an event handler that runs when the table's data is changed.

function onDataChange(handler: DataChangeEventHandler): void
callback DataChangeEventHandler(event: DataChangeEvent, $w: Function): void

Description

A table receives a dataChange event when the table's data is changed using the rows property or a data request triggers the onDataRequest handler.

Parameters

eventHandler function(event, $w) The name of the function or the function expression to run when the table's data is changed.
event Event The event that occurred.
$w $w A selector function. The $w function enables event handlers to work with elements in repeaters and in the global scope.
onDblClick( )

onDblClick( )

Adds an event handler that runs when the element is double-clicked.

function onDblClick(handler: MouseEventHandler): Element
callback MouseEventHandler(event: MouseEvent, $w: Function): void

Description

An element receives a dblClick event when a user double-clicks on the element and releases.

When a user double-clicks an element, two click events are fired before a doubleClick event is also fired.

Parameters

handler function(event, $w) The name of the function or the function expression to run when the element is clicked.
event MouseEvent The mouse event that occurred.
$w $w A selector function. The $w function enables event handlers to work with elements in repeaters and in the global scope.

Return Value

Element The element to which the event handler was added.

Examples

Get the ID of the element that was double-clicked

JHcoIiNteUVsZW1lbnQiKS5vbkNsaWNrKCAoZXZlbnQsICR3KSA9PiB7CiAgbGV0IHRhcmdldElkID0gZXZlbnQudGFyZ2V0LmlkOyAgLy8gIm15RWxlbWVudCIKfSApOwo=
$w("#myElement").onClick( (event, $w) => {
  let targetId = event.target.id;  // "myElement"
} );

Mixed In From

$w.ClickableMixin

See Also

onClick( )

onMouseIn( )

onMouseIn( )

Adds an event handler that runs when the mouse pointer is moved onto the element.

function onMouseIn(handler: MouseEventHandler): Element
callback MouseEventHandler(event: MouseEvent, $w: Function): void

Parameters

handler function(event, $w) The name of the function or the function expression to run when the mouse pointer is moved onto the element.
event MouseEvent The mouse event that occurred.
$w $w A selector function. The $w function enables event handlers to work with elements in repeaters and in the global scope.

Return Value

Element The element to which the event handler was added.

Examples

Get the mouse event info when the mouse enters an element

JHcoIiNteUVsZW1lbnQiKS5vbk1vdXNlSW4oIChldmVudCwgJHcpID0+IHsKICBsZXQgY2xpZW50WCA9IGV2ZW50LmNsaWVudFg7ICAvLyAzNjIKICBsZXQgY2xpZW50WSA9IGV2ZW50LmNsaWVudFk7ICAvLyAyNDQKICBsZXQgb2Zmc2V0WCA9IGV2ZW50Lm9mZnNldFg7ICAvLyAxMAogIGxldCBvZmZzZXRZID0gZXZlbnQub2Zmc2V0WTsgIC8vIDEyCiAgbGV0IHBhZ2VYID0gZXZlbnQucGFnZVg7ICAgICAgLy8gMzYyCiAgbGV0IHBhZ2VZID0gZXZlbnQucGFnZVk7ICAgICAgLy8gMzc2CiAgbGV0IHNjcmVlblggPSBldmVudC5zY3JlZW5YOyAgLy8gMzg5NwogIGxldCBzY3JlZW5ZID0gZXZlbnQuc2NyZWVuWTsgIC8vIDM2Mgp9ICk7Cg==
$w("#myElement").onMouseIn( (event, $w) => {
  let clientX = event.clientX;  // 362
  let clientY = event.clientY;  // 244
  let offsetX = event.offsetX;  // 10
  let offsetY = event.offsetY;  // 12
  let pageX = event.pageX;      // 362
  let pageY = event.pageY;      // 376
  let screenX = event.screenX;  // 3897
  let screenY = event.screenY;  // 362
} );

Mixed In From

$w.Element

onMouseOut( )

onMouseOut( )

Adds an event handler that runs when the mouse pointer is moved off of the element.

function onMouseOut(handler: MouseEventHandler): Element
callback MouseEventHandler(event: MouseEvent, $w: Function): void

Parameters

handler function(event, $w) The name of the function or the function expression to run when the mouse pointer is moved off of the element.
event MouseEvent The mouse event that occurred.
$w $w A selector function. The $w function enables event handlers to work with elements in repeaters and in the global scope.

Return Value

Element The element to which the event handler was added.

Examples

Get the mouse event info when the mouse exits an element

JHcoIiNteUVsZW1lbnQiKS5vbk1vdXNlT3V0KCAoZXZlbnQsICR3KSA9PiB7CiAgbGV0IGNsaWVudFggPSBldmVudC5jbGllbnRYOyAgLy8gMzYyCiAgbGV0IGNsaWVudFkgPSBldmVudC5jbGllbnRZOyAgLy8gMjQ0CiAgbGV0IG9mZnNldFggPSBldmVudC5vZmZzZXRYOyAgLy8gMTAKICBsZXQgb2Zmc2V0WSA9IGV2ZW50Lm9mZnNldFk7ICAvLyAxMgogIGxldCBwYWdlWCA9IGV2ZW50LnBhZ2VYOyAgICAgIC8vIDM2MgogIGxldCBwYWdlWSA9IGV2ZW50LnBhZ2VZOyAgICAgIC8vIDM3NgogIGxldCBzY3JlZW5YID0gZXZlbnQuc2NyZWVuWDsgIC8vIDM4OTcKICBsZXQgc2NyZWVuWSA9IGV2ZW50LnNjcmVlblk7ICAvLyAzNjIKfSApOwo=
$w("#myElement").onMouseOut( (event, $w) => {
  let clientX = event.clientX;  // 362
  let clientY = event.clientY;  // 244
  let offsetX = event.offsetX;  // 10
  let offsetY = event.offsetY;  // 12
  let pageX = event.pageX;      // 362
  let pageY = event.pageY;      // 376
  let screenX = event.screenX;  // 3897
  let screenY = event.screenY;  // 362
} );

Mixed In From

$w.Element

onRowSelect( )

onRowSelect( )

Adds an event handler that runs when a table row is selected.

function onRowSelect(handler: TableRowEventHandler): Table
callback TableRowEventHandler(event: TableRowEvent, $w: Function): void

Description

A table receives a TableRowEvent when the table is set set in the Editor to select rows when clicked. Clicking Selects Rows

Parameters

eventHandler function(event, $w) The name of the function or the function expression to run when the row is selected.
event TableRowEvent The event that has occurred.
$w $w A selector function. The $w function enables event handlers to work with elements in repeaters and in the global scope.

Return Value

Table The table that triggered the event.

Examples

Get the selected table cell information

JHcoIiNteVRhYmxlIikub25Sb3dTZWxlY3QoIChldmVudCwgJHcpID0+IHsKICBsZXQgcm93RGF0YSA9IGV2ZW50LnJvd0RhdGE7ICAgIC8vIHsiZk5hbWUiOiAiSm9obiIsICJsTmFtZSI6ICJEb2UifQogIGxldCByb3dJbmRleCA9IGV2ZW50LnJvd0luZGV4OyAgLy8gMgp9ICk7Cg==
$w("#myTable").onRowSelect( (event, $w) => {
  let rowData = event.rowData;    // {"fName": "John", "lName": "Doe"}
  let rowIndex = event.rowIndex;  // 2
} );

Get the full item information from the dataset

JHcoIiNteVRhYmxlIikub25Sb3dTZWxlY3QoIChldmVudCwgJHcpID0+IHsKICBsZXQgcm93RGF0YSA9IGV2ZW50LnJvd0RhdGE7Cn0gKTsKCi8vIC4uLgoKJHcoIiNteURhdGFzZXQiKS5vbkN1cnJlbnRJbmRleENoYW5nZWQoIChldmVudCwgJHcpID0+IHsKICBsZXQgaXRlbURhdGEgPSAkdygiI215RGF0YXNldCIpLmdldEN1cnJlbnRJdGVtKCk7Cn0gKTsKCi8qIHJvd0RhdGE6CiAqIHsKICogICJmTmFtZSI6ICAiSm9obiIsCiAqICAibE5hbWUiOiAgIkRvZSIKICogfQogKgogKiBpdGVtRGF0YToKICogewogKiAgIl9pZCI6ICAgICAgICAgICJlNjg5NWE3Ni0zYTg5LTRhYTctOGY2YS0wMjMwNjFjZDhjMjQiLAogKiAgIl9vd25lciI6ICAgICAgICJmZGtyOTloay1naDk0LWY4aTQtY2Q4ZS1zbzQzMDlkc2szZjMiLAogKiAgIl9jcmVhdGVkRGF0ZSI6ICIyMDE3LTAzLTE2VDA5OjA4OjQxLjgyNloiLAogKiAgIl91cGRhdGVkRGF0ZSI6ICIyMDE3LTAzLTE2VDA5OjA4OjU4LjQ3NloiLAogKiAgImZOYW1lIjogICAgICAgICJKb2huIiwKICogICJsTmFtZSI6ICAgICAgICAiRG9lIgogKiB9CiAqLwo=
$w("#myTable").onRowSelect( (event, $w) => {
  let rowData = event.rowData;
} );

// ...

$w("#myDataset").onCurrentIndexChanged( (event, $w) => {
  let itemData = $w("#myDataset").getCurrentItem();
} );

/* rowData:
 * {
 *  "fName":  "John",
 *  "lName":  "Doe"
 * }
 *
 * itemData:
 * {
 *  "_id":          "e6895a76-3a89-4aa7-8f6a-023061cd8c24",
 *  "_owner":       "fdkr99hk-gh94-f8i4-cd8e-so4309dsk3f3",
 *  "_createdDate": "2017-03-16T09:08:41.826Z",
 *  "_updatedDate": "2017-03-16T09:08:58.476Z",
 *  "fName":        "John",
 *  "lName":        "Doe"
 * }
 */
onViewportEnter( )

onViewportEnter( )

Adds an event handler that runs when an element is displayed in the viewable part of the current window.

function onViewportEnter(handler: EventHandler): Element
callback EventHandler(event: Event, $w: Function): void

Description

An element enters the viewport when the page is scrolled to show any part of the element. An element also enters the viewport if it was hidden or collapsed and is then shown or expanded in the viewable part of the current window.

Parameters

handler function(event, $w) The name of the function or the function expression to run when the element enters the viewport.
event Event The event that occurred.
$w $w A selector function. The $w function enables event handlers to work with elements in repeaters and in the global scope.

Return Value

Element The element on which the event is now registered.

Examples

Get the ID of the element that has entered the viewport

JHcoIiNteUVsZW1lbnQiKS5vblZpZXdwb3J0RW50ZXIoIChldmVudCwgJHcpID0+IHsKICBsZXQgdGFyZ2V0SWQgPSBldmVudC50YXJnZXQuaWQ7IC8vICJteUVsZW1lbnQiCn0pOwo=
$w("#myElement").onViewportEnter( (event, $w) => {
  let targetId = event.target.id; // "myElement"
});

Mixed In From

$w.Element

See Also

onViewportLeave( )

onViewportLeave( )

onViewportLeave( )

Adds an event handler that runs when an element is no longer displayed in the viewable part of the current window.

function onViewportLeave(handler: EventHandler): Element
callback EventHandler(event: Event, $w: Function): void

Description

An element leaves the viewport when the page is scrolled so that the elements is completely out of view. An element also leaves the viewport if it was shown or expanded and is then hidden or collapsed from the viewable part of the current window.

Parameters

handler function(event, $w) The name of the function or the function expression to run when the element leaves the viewport.
event Event The event that occurred.
$w $w A selector function. The $w function enables event handlers to work with elements in repeaters and in the global scope.

Return Value

Element The element on which the event is now registered.

Examples

Get the ID of the element that has entered the viewport

JHcoIiNteUVsZW1lbnQiKS5vblZpZXdwb3J0TGVhdmUoIChldmVudCwgJHcpID0+IHsKICBsZXQgdGFyZ2V0SWQgPSBldmVudC50YXJnZXQuaWQ7IC8vICJteUVsZW1lbnQiCn0pOwo=
$w("#myElement").onViewportLeave( (event, $w) => {
  let targetId = event.target.id; // "myElement"
});

Mixed In From

$w.Element

See Also

ViewportMixin-onViewportEnter( )

refresh( )

refresh( )

Fetches the most current data and updates the table.

function refresh(): void

Examples

Refresh a table

JHcoIiNteVRhYmxlIikucmVmcmVzaCgpOwo=
$w("#myTable").refresh();
scrollTo( )

scrollTo( )

Scrolls the page to the element using an animation.

function scrollTo(): Promise<void>

Description

The scrollTo() function returns a Promise that is resolved when the animated scroll is complete and the element is now in view.

To scroll to a specific location on the page, see the wix-window scrollTo() function.

Calling the scrollTo() function on an element in a repeated item that is selected from the global scope causes an error.

Return Value

Returns a Promise

On fulfillment void When the scroll is complete.

Examples

Scroll the page to an element

JHcoIiNteUVsZW1lbnQiKS5zY3JvbGxUbygpOwo=
$w("#myElement").scrollTo();

Scroll the page to an element and log message when done

JHcoIiNteUVsZW1lbnQiKS5zY3JvbGxUbygpCiAgLnRoZW4oICggKSA9PiB7CiAgICBjb25zb2xlLmxvZygiRG9uZSB3aXRoIHNjcm9sbCIpOwp9ICk7Cg==
$w("#myElement").scrollTo()
  .then( ( ) => {
    console.log("Done with scroll");
} );

Mixed In From

$w.Element

selectRow( )

selectRow( )

Selects a table row by index.

function selectRow(index: Number): void

Description

The rows in a table are zero-based and do not include the table header. Table Row Numbering

Parameters

index Number The number of the row to select.

Examples

Select the table's first row

JHcoIiNteVRhYmxlIikuc2VsZWN0Um93KDApOwo=
$w("#myTable").selectRow(0);
show( )

show( )

Shows the element and sets its hidden property to false, using an effect if specified.

function show([effectName: Effect], [effectOptions: EffectOptions]): Promise<void>
type Effect = "arc" | "bounce" | "fade" | "flip"
| "float" | "fly" | "fold" | "glide" | "puff"
| "roll" | "slide" | "spin" | "turn" | "zoom"
type EffectOptions = ArcEffectOptions | BounceEffectOptions
| FadeEffectOptions | FlipEffectOptions | FloatEffectOptions
| FlyEffectOptions | FoldEffectOptions | GlideEffectOptions
| PuffEffectOptions | RollEffectOptions | SlideEffectOptions
| SpinEffectOptions | TurnEffectOptions | ZoomEffectOptions

Description

The show() function shows the element and returns a Promise that is resolved when the effect is complete and the element's hidden property has been set to false.

You can optionally apply an effect when showing the element by providing an effectName value. You can also customize the effect by providing the optional effectOptions object.

Effects:

Parameters

effectName (optional) String The name of the effect to play when showing the item.
effectOptions (optional) ArcEffectOptions |
BounceEffectOptions |
FadeEffectOptions |
FlipEffectOptions |
FloatEffectOptions |
FlyEffectOptions |
FoldEffectOptions |
GlideEffectOptions |
PuffEffectOptions |
RollEffectOptions |
SlideEffectOptions |
SpinEffectOptions |
TurnEffectOptions |
ZoomEffectOptions
The effect's options.

Return Value

Returns a Promise

On fulfillment void When the effect is complete and the element's hidden property has been set to false.

Examples

Show an element with no effect

JHcoIiNteUVsZW1lbnQiKS5zaG93KCk7Cg==
$w("#myElement").show();

Show an element with the "fade" effect

JHcoIiNteUVsZW1lbnQiKS5zaG93KCJmYWRlIik7Cg==
$w("#myElement").show("fade");

Show an element with the "fade" effect and custom options

bGV0IGZhZGVPcHRpb25zID0gewogICJkdXJhdGlvbiI6ICAgMjAwMCwKICAiZGVsYXkiOiAgICAgIDEwMDAKfTsKCiR3KCIjbXlFbGVtZW50Iikuc2hvdygiZmFkZSIsIGZhZGVPcHRpb25zKTsK
let fadeOptions = {
  "duration":   2000,
  "delay":      1000
};

$w("#myElement").show("fade", fadeOptions);

Show an element with an effect and log message when the effect is done

JHcoIiNteUVsZW1lbnQiKS5zaG93KCJmYWRlIikKICAudGhlbiggKCApID0+IHsKICAgIGNvbnNvbGUubG9nKCJEb25lIHdpdGggZmFkZSIpOwogIH0gKTsK
$w("#myElement").show("fade")
  .then( ( ) => {
    console.log("Done with fade");
  } );

Toggle an element's hidden state

aWYoICR3KCIjbXlFbGVtZW50IikuaGlkZGVuICkgewogICR3KCIjbXlFbGVtZW50Iikuc2hvdygpOwp9CmVsc2UgewogICR3KCIjbXlFbGVtZW50IikuaGlkZSgpOwp9Cg==
if( $w("#myElement").hidden ) {
  $w("#myElement").show();
}
else {
  $w("#myElement").hide();
}

Mixed In From

$w.HiddenCollapsedMixin

See Also

hide( ), hidden, expand( )

updateRow( )

updateRow( )

Updates a the row data of a single row at the specified index.

function updateRow(index: Number, rowData: Object) : void

Description

The rows in a table are zero-based and do not include the table header. Table Row Numbering

Parameters

index Number The number of the row to update.
rowData Object A row data object of field_name:value pairs where the keys are the table columns.

Examples

Update the table's first row

JHcoIiNteVRhYmxlIikudXBkYXRlUm93KDAsIHJvd0RhdGEpOwo=
$w("#myTable").updateRow(0, rowData);

Update the table's first row

bGV0IHJvd0RhdGEgPSB7ZmllbGRfMTogIlZhbHVlMSIsIGZpZWxkXzI6ICJWYWx1ZTIifTsKCi8vIC4uLgoKJHcoIiNteVRhYmxlIikudXBkYXRlUm93KDAsIHJvd0RhdGEpOwo=
let rowData = {field_1: "Value1", field_2: "Value2"};

// ...

$w("#myTable").updateRow(0, rowData);
Column

Column

An object used by the columns property that contains the properties that define a table column. Table columns do not store any data.

Type

Object

Properties

id String The column ID.
dataPath String The location of the data displayed in the column. When the table is populated by a connection to a dataset, the dataPath value is a field key from the collection that the dataset is connected to. When the table is populated by using the rows or dataFetcher properties, the dataPath value is one of the property keys from the table's row objects.
label String The column header label.
type String The type of data in this column: "number", "string", "date", "image", "bool", or "richText".
width (optional) Number The pixel width of the column.
visible (optional) Boolean Whether the column is visible.
linkPath (optional) String The location of the links used when the items in the column are clicked. When the table is populated by a connection to a dataset, the linkPath value is a field key from the collection that the dataset is connected to. The collection field can be a regular field that contains URLs or a calculated field that contains relative links to dynamic pages. When the table is populated by using the rows or dataFetcher properties, the linkPath value is one of the property keys from the table's rows objects. The property values associated with that key contain URLs or relative links.

Examples

Get the list of columns and the first columns's information

bGV0IGNvbHMgPSAkdygiI215VGFibGUiKS5jb2x1bW5zOwoKbGV0IGZpcnN0Q29sSUQgPSBjb2xzWzBdLmlkOyAgICAgICAgICAgICAgLy8gImNvbDAiCmxldCBmaXJzdENvbERhdGFQYXRoID0gY29sc1swXS5kYXRhUGF0aDsgIC8vICJmaXJzdF9jb2wiCmxldCBmaXJzdENvbExhYmVsID0gY29sc1swXS5sYWJlbDsgICAgICAgIC8vICJGaXJzdCBDb2x1bW4iCmxldCBmaXJzdENvbFdpZHRoID0gY29sc1swXS53aWR0aDsgICAgICAgIC8vIDEwMApsZXQgZmlyc3RDb2xWaXNpYmxlID0gY29sc1swXS52aXNpYmxlOyAgICAgIC8vIHRydWUKbGV0IGZpcnN0Q29sVHlwZSA9IGNvbHNbMF0udHlwZTsgICAgICAgICAgLy8gInN0cmluZyIKbGV0IGZpcnN0Q29sUGF0aCA9IGNvbHNbMF0ubGlua1BhdGg7ICAgICAvLyAibGluay1maWVsZC1vci1wcm9wZXJ0eSIK
let cols = $w("#myTable").columns;

let firstColID = cols[0].id;              // "col0"
let firstColDataPath = cols[0].dataPath;  // "first_col"
let firstColLabel = cols[0].label;        // "First Column"
let firstColWidth = cols[0].width;        // 100
let firstColVisible = cols[0].visible;      // true
let firstColType = cols[0].type;          // "string"
let firstColPath = cols[0].linkPath;     // "link-field-or-property"

Set the list of columns for a table

JHcoIiNteVRhYmxlIikuY29sdW1ucyA9IFsKICB7CiAgICAiaWQiOiAiY29sMSIsCiAgICAiZGF0YVBhdGgiOiAiZmllbGQxIiwKICAgICJsYWJlbCI6ICJGaWVsZCAxIiwKICAgICJ3aWR0aCI6IDEwMCwKICAgICJ2aXNpYmxlIjogdHJ1ZSwKICAgICJ0eXBlIjogInN0cmluZyIsCiAgICAibGlua1BhdGgiOiAibGluay1maWVsZC1vci1wcm9wZXJ0eSIKICB9LAogIHsKICAgICJpZCI6ICJjb2wyIiwKICAgICJkYXRhUGF0aCI6ICJmaWVsZDIiLAogICAgImxhYmVsIjogIkZpZWxkIDIiLAogICAgIndpZHRoIjogMTAwLAogICAgInZpc2libGUiOiB0cnVlLAogICAgInR5cGUiOiAiaW1hZ2UiLAogICAgImxpbmtQYXRoIjogImxpbmstZmllbGQtb3ItcHJvcGVydHkiCiAgfSwKICB7CiAgICAiaWQiOiAiY29sMyIsCiAgICAiZGF0YVBhdGgiOiAiZmllbGQzIiwKICAgICJsYWJlbCI6ICJGaWVsZCAzIiwKICAgICJ3aWR0aCI6IDEwMCwKICAgICJ2aXNpYmxlIjogdHJ1ZSwKICAgICJ0eXBlIjogIm51bWJlciIsCiAgICAibGlua1BhdGgiOiAibGluay1maWVsZC1vci1wcm9wZXJ0eSIKICB9Cl07Cg==
$w("#myTable").columns = [
  {
    "id": "col1",
    "dataPath": "field1",
    "label": "Field 1",
    "width": 100,
    "visible": true,
    "type": "string",
    "linkPath": "link-field-or-property"
  },
  {
    "id": "col2",
    "dataPath": "field2",
    "label": "Field 2",
    "width": 100,
    "visible": true,
    "type": "image",
    "linkPath": "link-field-or-property"
  },
  {
    "id": "col3",
    "dataPath": "field3",
    "label": "Field 3",
    "width": 100,
    "visible": true,
    "type": "number",
    "linkPath": "link-field-or-property"
  }
];

Set the columns, data, and links for a table

This example sets the columns of the table using the table's columns property. The items in the first column are linked using the URLs found in the wikiLink property of the table data. It then populates a table with static data using the table's rows property.

Y29uc3QgbXlUYWJsZURhdGEgPSBbCiAge25hbWU6ICJBIiwgbnVtOiA0NSwgd2lraUxpbms6ICJodHRwczovL2VuLndpa2lwZWRpYS5vcmcvd2lraS9BIn0sCiAge25hbWU6ICJCIiwgbnVtOiAzNCwgd2lraUxpbms6ICJodHRwczovL2VuLndpa2lwZWRpYS5vcmcvd2lraS9CIn0sCiAge25hbWU6ICJDIiwgbnVtOiAxOSwgd2lraUxpbms6ICJodHRwczovL2VuLndpa2lwZWRpYS5vcmcvd2lraS9DIn0sCiAge25hbWU6ICJEIiwgbnVtOiA1OSwgd2lraUxpbms6ICJodHRwczovL2VuLndpa2lwZWRpYS5vcmcvd2lraS9EIn0sCiAge25hbWU6ICJFIiwgbnVtOiAyNCwgd2lraUxpbms6ICJodHRwczovL2VuLndpa2lwZWRpYS5vcmcvd2lraS9FIn0sCiAge25hbWU6ICJGIiwgbnVtOiA5Niwgd2lraUxpbms6ICJodHRwczovL2VuLndpa2lwZWRpYS5vcmcvd2lraS9GIn0KXTsKCiR3Lm9uUmVhZHkoIGZ1bmN0aW9uICgpIHsKICAkdygiI215VGFibGUiKS5jb2x1bW5zID0gWwogICAgewogICAgICAiaWQiOiAiY29sMSIsCiAgICAgICJkYXRhUGF0aCI6ICJuYW1lIiwKICAgICAgImxhYmVsIjogIk5hbWUiLAogICAgICAidHlwZSI6ICJzdHJpbmciLAogICAgICAid2lkdGgiOiAxMDAsCiAgICAgICJ2aXNpYmxlIjogdHJ1ZSwKICAgICAgImxpbmtQYXRoIjogIndpa2lMaW5rIgogICAgfSwKICAgIHsKICAgICAgImlkIjogImNvbDIiLAogICAgICAiZGF0YVBhdGgiOiAibnVtIiwKICAgICAgImxhYmVsIjogIk51bWJlciIsCiAgICAgICJ0eXBlIjogIm51bWJlciIsCiAgICAgICJ3aWR0aCI6IDEwMCwKICAgICAgInZpc2libGUiOiB0cnVlCiAgICB9CiAgXTsKCiAgJHcoIiNteVRhYmxlIikucm93cyA9IG15VGFibGVEYXRhOwp9ICk7Cg==
const myTableData = [
  {name: "A", num: 45, wikiLink: "https://en.wikipedia.org/wiki/A"},
  {name: "B", num: 34, wikiLink: "https://en.wikipedia.org/wiki/B"},
  {name: "C", num: 19, wikiLink: "https://en.wikipedia.org/wiki/C"},
  {name: "D", num: 59, wikiLink: "https://en.wikipedia.org/wiki/D"},
  {name: "E", num: 24, wikiLink: "https://en.wikipedia.org/wiki/E"},
  {name: "F", num: 96, wikiLink: "https://en.wikipedia.org/wiki/F"}
];

$w.onReady( function () {
  $w("#myTable").columns = [
    {
      "id": "col1",
      "dataPath": "name",
      "label": "Name",
      "type": "string",
      "width": 100,
      "visible": true,
      "linkPath": "wikiLink"
    },
    {
      "id": "col2",
      "dataPath": "num",
      "label": "Number",
      "type": "number",
      "width": 100,
      "visible": true
    }
  ];

  $w("#myTable").rows = myTableData;
} );

See Also

columns

PaginationOptions

PaginationOptions

An object used by the pagination property that contains the pagination options which determine if and how the table is paginated.

Description

The table can paginate in three ways:

  • "normal": No pagination. The table is scrollable if there are more rows than can be displayed at once. All data is fetched at once.
  • "pagination": The data is separated into pages which are navigatable using paging buttons. New data is fetched when a user clicks on a paging button.
  • "virtual": The data is separated into pages which are navigated by scrolling. New data is fetched when user a user scrolls below the displayed rows.

Type

Object

Properties

type String The type of pagination to use: "normal", "pagination", or "virtual".
rowsPerPage Number The number of rows per page.

Examples

Get the table's pagination options

bGV0IHRhYmxlUGFnaW5hdGlvbiA9ICR3KCIjbXlUYWJsZSIpLnBhZ2luYXRpb247CgpsZXQgcGFnaW5hdGlvblR5cGUgPSB0YWJsZVBhZ2luYXRpb24udHlwZTsgICAgICAgIC8vICJwYWdpbmF0aW9uIgpsZXQgcGFnaW5hdGlvblJvd3MgPSB0YWJsZVBhZ2luYXRpb24ucm93c1BlclBhZ2U7IC8vIDUK
let tablePagination = $w("#myTable").pagination;

let paginationType = tablePagination.type;        // "pagination"
let paginationRows = tablePagination.rowsPerPage; // 5

Set the table's pagination options

JHcoIiNteVRhYmxlIikucGFnaW5hdGlvbiA9IHsidHlwZSI6ICJwYWdpbmF0aW9uIiwgInJvd3NQZXJQYWdlIjogNH07Cg==
$w("#myTable").pagination = {"type": "pagination", "rowsPerPage": 4};

See Also

pagination