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

Previous Topic

Using CoCreateJS attributes on html elements

Next Topic

Applying logic and sharing data between pages