CodeAPI

Table

A table for displaying data.

Table of Contents

PROPERTIES

?
Store values associated with an object.
collapsedIndicates if the element is collapsed or expanded.
columnsSets or gets the defining properties of the columns in a table.
dataFetcherSets the function that is called when a new page of table data is to be displayed.
globalIndicates if an element appears on all pages or only on the current page.
hiddenIndicates if the element is visible or hidden.
idGets the elements's ID.
isVisibleIndicates if the element is actually visible.
paginationSets or gets the table's pagination options.
parentGets the element's parent element.
renderedIndicates if an element is currently displayed.
rowsSets or gets the table's row data.
typeGets the element's type.

FUNCTIONS

?
Perform actions on an object.
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.

OBJECTS

?
Objects used when setting, getting, or calling the properties and methods listed above.
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.

PaginationParam

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

MIXES IN

?
Where some functionality is inherited from.
$w.Element, $w.HiddenCollapsedMixin, $w.ClickableMixin

collapsed

Indicates if the element is collapsed or expanded.

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.

See Also

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

Syntax

get collapsed(): boolean
TYPE
?
The kind of data the property stores.
boolean
DEFAULT VALUE
?
The value of a property before you explicitly set it.
false

MIXED IN FROM

?
Where this functionality is inherited from.
$w.HiddenCollapsedMixin

Examples

Get an element's collapsed status

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

Toggle an element's collapsed state

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

columns

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

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.

Syntax

get columns(): Array<Column>
set columns(value: Array<Column>): void
TYPE
?
The kind of data the property stores.
Array<Column>

Examples

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

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

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

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

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();
       }
     } );
   }

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.

See Also

rows

Syntax

get dataFetcher(): Function
set dataFetcher(value: Function): void
TYPE
?
The kind of data the property stores.
Function

Examples

Set the function that fetches more data

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

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
    } );
  } );
}

global

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

Description

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

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

Syntax

get global(): boolean
TYPE
?
The kind of data the property stores.
boolean
DEFAULT VALUE
?
The value of a property before you explicitly set it.
false

MIXED IN FROM

?
Where this functionality is inherited from.
$w.Element

Examples

Get whether an element is displayed on all pages

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

hidden

Indicates if the element is visible or hidden.

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.

Note

An element's hidden property is not the same as its isVisible property. The hidden property indicates whether the element should be displayed, while isVisible indicates if it is actually displayed.

See Also

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

Syntax

get hidden(): boolean
TYPE
?
The kind of data the property stores.
boolean
DEFAULT VALUE
?
The value of a property before you explicitly set it.
false

MIXED IN FROM

?
Where this functionality is inherited from.
$w.HiddenCollapsedMixin

Examples

Get an element's hidden status

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

Toggle an element's hidden state

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

id

Gets the elements's ID.

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.

Syntax

get id(): string
TYPE
?
The kind of data the property stores.
string

MIXED IN FROM

?
Where this functionality is inherited from.
$w.Element

Examples

Get the ID

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

isVisible

Indicates if the element is actually visible.

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.

Note

An element's isVisible property is not the same as its hidden property. The isVisible property indicates whether the element is actually displayed, while hidden indicates if it should be displayed.

The isVisible property of an element remains true even if another element completely covers it so that a user cannot see it.

See Also

hidden, collapsed, rendered

Syntax

get isVisible(): boolean
TYPE
?
The kind of data the property stores.
boolean
DEFAULT VALUE
?
The value of a property before you explicitly set it.
true

MIXED IN FROM

?
Where this functionality is inherited from.
$w.HiddenCollapsedMixin

Examples

Get whether an element is visible

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

pagination

Sets or gets the table's pagination options.

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.

Syntax

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

Examples

Get the table's pagination options

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

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

Set the table's pagination options

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

parent

Gets the element's parent element.

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.

See Also

children

Syntax

get parent(): Node
TYPE
?
The kind of data the property stores.
DEFAULT VALUE
?
The value of a property before you explicitly set it.
null

MIXED IN FROM

?
Where this functionality is inherited from.
$w.Element

Examples

Get the parent element and the parent's ID

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

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

rendered

Indicates if an element is currently displayed.

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.

See Also

collapsed, hidden, isVisible

Syntax

get rendered(): boolean
TYPE
?
The kind of data the property stores.
boolean
DEFAULT VALUE
?
The value of a property before you explicitly set it.
false

MIXED IN FROM

?
Where this functionality is inherited from.
$w.Element

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

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.

Syntax

get rows(): Array<Object>
set rows(value: Array<Object>): void
TYPE
?
The kind of data the property stores.
Array<Object>

Examples

Get a table's row data

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

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

Set a table's row data

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

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

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

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.

/*
  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 = '<span style="color:blue">Download the doc</span>';
      } );

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

} );

type

Gets the element's type.

Syntax

get type(): string
TYPE
?
The kind of data the property stores.
string

MIXED IN FROM

?
Where this functionality is inherited from.
$w.Element

Examples

Get the element's type

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

collapse( )

Collapses the element and sets its collapsed property to true.

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.

See Also

expand( ), collapsed, hide( )

Syntax

function collapse(): Promise<void>
RETURN VALUE
?
Value that a function evaluates to when it is finished running.
Promise<void>
Fulfilled - When the element's collapsed property has been set to true.

MIXED IN FROM

?
Where this functionality is inherited from.
$w.HiddenCollapsedMixin

Examples

Collapse an element

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

Collapse an element and log a message when done

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

Toggle an element's collapsed state

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

expand( )

Expands the element and sets its collapsed property to false.

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.

See Also

expand( ), collapsed, show( )

Syntax

function expand(): Promise<void>
RETURN VALUE
?
Value that a function evaluates to when it is finished running.
Promise<void>
Fulfilled - When the element's collapsed property has been set to false.

MIXED IN FROM

?
Where this functionality is inherited from.
$w.HiddenCollapsedMixin

Examples

Expand an element

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

Expand an element and log a message when done

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

Toggle an element's collapsed state

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

hide( )

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

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.

See Also

show( ), hidden, collapse( )

Syntax

function hide([effectName: string], [effectOptions: ArcEffectOptions | BounceEffectOptions | FadeEffectOptions | FlipEffectOptions | FloatEffectOptions | FlyEffectOptions | FoldEffectOptions | GlideEffectOptions | PuffEffectOptions | RollEffectOptions | SlideEffectOptions | SpinEffectOptions | TurnEffectOptions | ZoomEffectOptions]): Promise<void>
RETURN VALUE
?
Value that a function evaluates to when it is finished running.
Promise<void>
Fulfilled - When the effect is complete and the element's hidden property has been set to true.

MIXED IN FROM

?
Where this functionality is inherited from.
$w.HiddenCollapsedMixin

Examples

Hide an element with no effect

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

Hide an element with the "fade" effect

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

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

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

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

Toggle an element's hidden state

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

onCellSelect( )

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

Description

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

Note

Deprecation note: The $w parameter of event handlers is being deprecated. To get a scoped selector, use the $w.at() function and pass it the context property of the event parameter: $item = $w.at(event.context). To learn more, see here.

Syntax

function onCellSelect(eventHandler: TableCellEventHandler): Table
callback TableCellEventHandler(event: TableCellEvent, $w: $w): void
PARAMETERS
?
The kind of data the property stores.
eventHandler
function(event: TableCellEvent, $w: $w)

The name of the function or the function expression to run when the cell is selected.

?
The kind of data the property stores.
event
The table cell event that occurred.
$w

Deprecated: A selector function. The $w function enables event handlers to work with elements in repeaters and in the global scope.

RETURN VALUE
?
Value that a function evaluates to when it is finished running.
The table that triggered the event.

Examples

Get the selected table cell information

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

onClick( )

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

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.

Note

Deprecation note: The $w parameter of event handlers is being deprecated. To get a scoped selector, use the $w.at() function and pass it the context property of the event parameter: $item = $w.at(event.context). To learn more, see here.

See Also

onDblClick( )

Syntax

function onClick(handler: MouseEventHandler): Element
callback MouseEventHandler(event: MouseEvent, $w: $w): void
PARAMETERS
?
The kind of data the property stores.
handler
function(event: MouseEvent, $w: $w)

The name of the function or the function expression to run when the element is clicked.

?
The kind of data the property stores.
event
The mouse event that occurred.
$w

Deprecated: A selector function. The $w function enables event handlers to work with elements in repeaters and in the global scope.

RETURN VALUE
?
Value that a function evaluates to when it is finished running.
The element to which the event handler was added.

MIXED IN FROM

?
Where this functionality is inherited from.
$w.ClickableMixin

Examples

Get the ID of the element that was clicked

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

Get a mouse click's coordinates

$w("#myElement").onClick( (event) => {
  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
} );

onDataChange( )

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

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.

Note

Deprecation note: The $w parameter of event handlers is being deprecated. To get a scoped selector, use the $w.at() function and pass it the context property of the event parameter: $item = $w.at(event.context). To learn more, see here.

Syntax

function onDataChange(eventHandler: EventHandler): void
callback EventHandler(event: Event, $w: $w): void
PARAMETERS
?
The kind of data the property stores.
eventHandler
function(event: Event, $w: $w)

The name of the function or the function expression to run when the table's data is changed.

?
The kind of data the property stores.
event
The event that occurred.
$w

Deprecated: A selector function. The $w function enables event handlers to work with elements in repeaters and in the global scope.

onDblClick( )

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

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.

Note

Deprecation note: The $w parameter of event handlers is being deprecated. To get a scoped selector, use the $w.at() function and pass it the context property of the event parameter: $item = $w.at(event.context). To learn more, see here.

See Also

onClick( )

Syntax

function onDblClick(handler: MouseEventHandler): Element
callback MouseEventHandler(event: MouseEvent, $w: $w): void
PARAMETERS
?
The kind of data the property stores.
handler
function(event: MouseEvent, $w: $w)

The name of the function or the function expression to run when the element is clicked.

?
The kind of data the property stores.
event
The mouse event that occurred.
$w

Deprecated: A selector function. The $w function enables event handlers to work with elements in repeaters and in the global scope.

RETURN VALUE
?
Value that a function evaluates to when it is finished running.
The element to which the event handler was added.

MIXED IN FROM

?
Where this functionality is inherited from.
$w.ClickableMixin

Examples

Get the ID of the element that was double-clicked

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

onMouseIn( )

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

Note

Deprecation note: The $w parameter of event handlers is being deprecated. To get a scoped selector, use the $w.at() function and pass it the context property of the event parameter: $item = $w.at(event.context). To learn more, see here.

Syntax

function onMouseIn(handler: MouseEventHandler): Element
callback MouseEventHandler(event: MouseEvent, $w: $w): void
PARAMETERS
?
The kind of data the property stores.
handler
function(event: MouseEvent, $w: $w)

The name of the function or the function expression to run when the mouse pointer is moved onto the element.

?
The kind of data the property stores.
event
The mouse event that occurred.
$w

Deprecated: A selector function. The $w function enables event handlers to work with elements in repeaters and in the global scope.

RETURN VALUE
?
Value that a function evaluates to when it is finished running.
The element to which the event handler was added.

MIXED IN FROM

?
Where this functionality is inherited from.
$w.Element

Examples

Get the mouse event info when the mouse enters an element

$w("#myElement").onMouseIn( (event) => {
  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
} );

onMouseOut( )

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

Note

Deprecation note: The $w parameter of event handlers is being deprecated. To get a scoped selector, use the $w.at() function and pass it the context property of the event parameter: $item = $w.at(event.context). To learn more, see here.

Syntax

function onMouseOut(handler: MouseEventHandler): Element
callback MouseEventHandler(event: MouseEvent, $w: $w): void
PARAMETERS
?
The kind of data the property stores.
handler
function(event: MouseEvent, $w: $w)

The name of the function or the function expression to run when the mouse pointer is moved off of the element.

?
The kind of data the property stores.
event
The mouse event that occurred.
$w

Deprecated: A selector function. The $w function enables event handlers to work with elements in repeaters and in the global scope.

RETURN VALUE
?
Value that a function evaluates to when it is finished running.
The element to which the event handler was added.

MIXED IN FROM

?
Where this functionality is inherited from.
$w.Element

Examples

Get the mouse event info when the mouse exits an element

$w("#myElement").onMouseOut( (event) => {
  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
} );

onRowSelect( )

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

Description

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

Note

Deprecation note: The $w parameter of event handlers is being deprecated. To get a scoped selector, use the $w.at() function and pass it the context property of the event parameter: $item = $w.at(event.context). To learn more, see here.

Syntax

function onRowSelect(eventHandler: TableRowEventHandler): Table
callback TableRowEventHandler(event: TableRowEvent, $w: $w): void
PARAMETERS
?
The kind of data the property stores.
eventHandler
function(event: TableRowEvent, $w: $w)

The name of the function or the function expression to run when the row is selected.

?
The kind of data the property stores.
event
The event that has occurred.
$w

Deprecated: A selector function. The $w function enables event handlers to work with elements in repeaters and in the global scope.

RETURN VALUE
?
Value that a function evaluates to when it is finished running.
The table that triggered the event.

Examples

Get the selected table cell information

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

Get the full item information from the dataset

$w("#myTable").onRowSelect( (event) => {
  let rowData = event.rowData;
} );

// ...

$w("#myDataset").onCurrentIndexChanged( (event) => {
  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( )

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

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.

Note

Deprecation note: The $w parameter of event handlers is being deprecated. To get a scoped selector, use the $w.at() function and pass it the context property of the event parameter: $item = $w.at(event.context). To learn more, see here.

See Also

onViewportLeave( )

Syntax

function onViewportEnter(handler: EventHandler): Element
callback EventHandler(event: Event, $w: $w): void
PARAMETERS
?
The kind of data the property stores.
handler
function(event: Event, $w: $w)

The name of the function or the function expression to run when the element enters the viewport.

?
The kind of data the property stores.
event
The event that occurred.
$w

Deprecated: A selector function. The $w function enables event handlers to work with elements in repeaters and in the global scope.

RETURN VALUE
?
Value that a function evaluates to when it is finished running.
The element on which the event is now registered.

MIXED IN FROM

?
Where this functionality is inherited from.
$w.Element

Examples

Get the ID of the element that has entered the viewport

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

onViewportLeave( )

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

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.

Note

Deprecation note: The $w parameter of event handlers is being deprecated. To get a scoped selector, use the $w.at() function and pass it the context property of the event parameter: $item = $w.at(event.context). To learn more, see here.

See Also

onViewportEnter( )

Syntax

function onViewportLeave(handler: EventHandler): Element
callback EventHandler(event: Event, $w: $w): void
PARAMETERS
?
The kind of data the property stores.
handler
function(event: Event, $w: $w)

The name of the function or the function expression to run when the element leaves the viewport.

?
The kind of data the property stores.
event
The event that occurred.
$w

Deprecated: A selector function. The $w function enables event handlers to work with elements in repeaters and in the global scope.

RETURN VALUE
?
Value that a function evaluates to when it is finished running.
The element on which the event is now registered.

MIXED IN FROM

?
Where this functionality is inherited from.
$w.Element

Examples

Get the ID of the element that has entered the viewport

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

refresh( )

Fetches the most current data and updates the table.

Syntax

function refresh(): void

Examples

Refresh a table

$w("#myTable").refresh();

scrollTo( )

Scrolls the page to the element using an animation.

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.

Syntax

function scrollTo(): Promise<void>
RETURN VALUE
?
Value that a function evaluates to when it is finished running.
Promise<void>
Fulfilled - When the scroll is complete.

MIXED IN FROM

?
Where this functionality is inherited from.
$w.Element

Examples

Scroll the page to an element

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

Scroll the page to an element and log message when done

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

selectRow( )

Selects a table row by index.

Description

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

Syntax

function selectRow(index: number): void
PARAMETERS
?
The kind of data the property stores.
index
number
The number of the row to select.

Examples

Select the table's first row

$w("#myTable").selectRow(0);

show( )

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

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:

See Also

hide( ), hidden, expand( )

Syntax

function show([effectName: string], [effectOptions: ArcEffectOptions | BounceEffectOptions | FadeEffectOptions | FlipEffectOptions | FloatEffectOptions | FlyEffectOptions | FoldEffectOptions | GlideEffectOptions | PuffEffectOptions | RollEffectOptions | SlideEffectOptions | SpinEffectOptions | TurnEffectOptions | ZoomEffectOptions]): Promise<void>
RETURN VALUE
?
Value that a function evaluates to when it is finished running.
Promise<void>
Fulfilled - When the effect is complete and the element's hidden property has been set to false.

MIXED IN FROM

?
Where this functionality is inherited from.
$w.HiddenCollapsedMixin

Examples

Show an element with no effect

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

Show an element with the "fade" effect

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

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

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

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

Toggle an element's hidden state

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

updateRow( )

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

Description

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

Syntax

function updateRow(index: number, rowData: Object): void
PARAMETERS
?
The kind of data the property stores.
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

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

Update the table's first row

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

// ...

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

Column

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

See Also

columns

Syntax

type Column = {
  id: string
  dataPath: string
  label: string
  type: string
  width: number
  visible: boolean
  linkPath: string
}
MEMBERS
?
The kind of data the property stores.
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

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

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

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;
} );

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.

See Also

pagination

Syntax

type PaginationOptions = {
  type: string
  rowsPerPage: number
}
MEMBERS
?
The kind of data the property stores.
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

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

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

Set the table's pagination options

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

PaginationParam

An object used by the pagination property that contains the pagination parameters 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.

See Also

pagination

Syntax

type PaginationParam = {
  type: string
  rowsPerPage: number
}
MEMBERS
?
The kind of data the property stores.
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 parameters

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

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

Set the table's pagination parameters

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