Tables

API

Table

Parameters

• element HTMLElement DOM element for component instantiation and scope

• options Object (optional, default {})

  • options.sortSelector String Selector for toggling element (optional, default '[data-ecl-table-sort-toggle]')
  • options.attachClickListener Boolean

init

Initialise component.

destroy

Destroy component.

handleClickOnSort

Parameters

• toggle HTMLElement Target element to toggle.

autoInit

Parameters

• root HTMLElement DOM element for component instantiation and scope

• $1 Object (optional, default {})

  • $1.TABLE (optional, default {})

Returns Table An instance of table.

createSortIcon

Parameters

• customClass

Returns HTMLElement

Setup

Add data-ecl-table-sort-toggle attribute on table headings for which you want to activate sorting.

There are 2 ways to initialise the component for sort table.

Automatic

Add data-ecl-auto-init="Table" attribute to component's markup:

<table data-ecl-auto-init="Table" class="ecl-table">
  ...
</table>

Use the ECL library's autoInit() (ECL.autoInit()) when your page is ready or other custom event you want to hook onto.

Manual

Get target element, create an instance and invoke init().

Given you have 1 element with an attribute data-ecl-table on the page:

var elt = document.querySelector('[data-ecl-table]');
var table = new ECL.Table(elt);
table.init();

Retrieve an existing instance

If an existing instance needs to be updated, it can be retrieved this way:

var elt = document.querySelector('[data-ecl-table]');
var instance = ECL.components.get(elt);

To update an existing instance, you can run destroy() and init() on this instance, like this:

instance.destroy();
instance.init();