Filtering lists, tables, etc (search)

Hide elements based on match with data attributes.

Attribute Description Example value
js-filter-container Container of what should be filterable, has to contain unique id. unique_id
js-filter-data Elements inside item that contain data which should be used in the filter.
js-filter-input The input for a specific container, has to contain same id as parent. unique_id

Parameters (Blade)

Key Default value Type Available values Description
js-filter-container
id string - Top container that contains items that shoiudld be filterable.
js-filter-item
string - Item that should be filterable.
js-filter-data
string - Child of item that contains data that should be considered when filtering.
js-filter-input
Matching id of container string - An input field that will be used to filter a container
id
string - The DOM id of the component.
classList
[] array - Array containing wrapping classes array
attributeList
[] array - Array containing keys and values rendered as attributes