Templating

Fetch, filter and render a list of data using HTML. Great for creating blogs, shopping items, datatables, etc.

Fetch

Fetching and rendering a list is done by applying array to an element and nesting a template within

Filter

Add attribute filter-selector and filter-key to one or more elements to filter the results

Templating Attributes

  • template_id string required

    Template identifier. This attribute should be define.

  • array string required

    Array name to fetch data. It is required.

  • key string optional

    Define the field name to fetch array

    If this value defined, it will fetch the special field's value

  • filter-limit string optional

    Fetch the item's count on page load or when updated. If attribute is empty or not used, total items will be fetch.

  • filter-on string optional

    Available value: loadmore | scroll | total.

  • filter-key string optional

    Array's object key to filter.

  • filter-value string optional

    Array's object value to filter. If filter-key defined, this attribute should be defined too

  • filter-value-type string optional

    string | number | object | array . Default value is string

  • filter-operator string optional

    Define the filter operator.

    Operators: includes | $range | $eq | $ne | $lt | $lte | $gt | $gte | $in | $nin

  • filter-logical-operator string optional

    Define the filter operator.

    Operators: and | or

  • filter-case-sensitive boolean optional

    Define the filter operator.

    true | false defauts to false

  • filter-search string optional

    define on input elemens. Will perform a search for the value across all keys in the array

  • filter-sort-key string optional

    Field key to sorting.

  • filter-sort-direction string optional

    Available value: asc | desc.

    Fetch order value on page load or when updated. If attribute is empty or not used Default's to asc.

  • filter-sort-toggle string optional

    Available value: asc | desc.

    Fetch order value on page load or when updated. If attribute is empty or not used Default's to asc.