Skip to content

Documentation - Vanilla Javascript binding

This binding provides a declarative HTML API for smart table. You'll be able to link some of your smart table directives to html elements simply by adding html data attributes on html elements. Note that because this binding tries to be as less opinionated as possible, any part of your component which will need a specific template (to display an item or a pagination control for instance) will have to be handled manually. However this binding probably remains the fastest way to link a smart table to a Document Object Model (DOM).

Check the basic codepen for an example or the more advanced example on the binding repository.

Usage

Use the grid factory to automatically link flagged elements to directives.

Note you will need to specify yourself how to display data.


<div id="table-container">
  <table>
    <thead>
      <tr>
        <th>Surname</th>
        <th>Name</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>
</div>
<script>
  import { table as tableComponentFactory } from "smart-table-vanilla";
  import { table } from "smart-table";
  
  const el = document.getElementById("table-container");
  
  const tbody = el.querySelector("tbody");
  const rowFactory = ({
    surname,
    name
  }) => {
    const tr = document.createElement("tr");
    tr.innerHTML = `<td>${surname}</td><td>${name}</td>`;
    return tr;
  };
  
  const t = table({
    data: [
      { surname: "Renard", name: "Laurent" },
      { surname: "Leponge", name: "Bob" }
    ]
  });
  const tableComponent = tableComponentFactory({ el, table: t });
  
  tableComponent.onDisplayChange(displayed => {
    tbody.innerHTML = "";
    for (let r of displayed) {
      const newChild = rowFactory(r.value);
      tbody.appendChild(newChild);
    }
  });
</script>

This example does not do much: it simply binds any change in the displayed collection to an update in the DOM. But you will now be able to edit the template to add more features.

Sort attributes

You can add the data-st-sort attribute to let the table know the related element will be bound to a sort directive.

HTML attributes

data-st-sort
The pointer to the sorted property
data-st-sort-cycle
If present. The toggle cycle will have three states instead of two: sort ascent -> sort descent -> no sort

Bound listeners

click
when the element is clicked the .toggle() method will be called on the relative directive and the class name st-sort-asc or st-sort-desc will be added.

Example


<table>
  <thead>
    <tr>
      <th data-st-sort="surname" data-st-sort-cycle="data-st-sort-cycle">Surname</th>
      <th data-st-sort="name"></th>
    </tr>
  </thead>
  <tbody>
    <!--...-->
  </tbody>
</table>

Search attributes

By adding the data-st-search attribute you will bind an input to a search directive

data-st-search
A comma separated list of pointer to include in the search scope

Bound listeners

input
Whenever the input event is fired (with a delay of 400ms) the search will be triggered

Example


<table>
  <thead>
    <tr>
      <th colspan="2">
        <label>Search:
          <input type="search" data-st-search="surname, name"/>
        </label>
      </th>
    </tr>
    <tr>
      <th>Surname</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <!--...-->
  </tbody>
</table>

Filter attributes

Use the data-st-filter on an input or select element to add filter capabilities

HTML attributes

data-st-filter
The pointer to the filtered property
data-st-filter-operator
The filter operator to use (defaults to "includes")
data-st-filter-type
The type of the bound property. If not provided it will look for the type attribute of the input or it will defaults to string

Bound listeners

input (or change for select elements)
Whenever the event is fired (with a delay of 400ms) the filter element will be triggered with the input/select value and the provided configuration

Example


<table>
  <thead>
    <tr>
      <th>Surname</th>
      <th>Name</th>
      <th>Gender</th>
      <th>Birth date</th>
    </tr>
    <tr>
      <th>
        <input data-st-filter="name.last"/>
      </th>
      <th>
        <input data-st-filter="name.first"/>
      </th>
      <th>
        <select data-st-filter="gender" data-st-filter-operator="is">
          <option value="">-</option>
          <option value="female">Female</option>
          <option value="male">Male</option>
        </select>
      </th>
      <th>
        <label>Born after:</label>
        <input data-st-filter="birthDate" data-st-filter-operator="gte" type="date"/>
      </th>
    </tr>
  </thead>
  <tbody>
    <!--..-->
  </tbody>
</table>

Working state attributes

will react to the current working state of the smart table (ideal to build loading indicator)

HTML attributes

data-st-loading-indicator
If presents, the element will react to changes in the working state. It will add/remove the st-working class name accordingly