Filtering lists, tables, etc (search)

Hide elements based on match with data attributes.

error_outline
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
<div js-filter-container="5da57cccd46c6">
            
            <!-- field.blade.php -->
<div class="c-field c-field--text c-field--md c-field--radius-md c-field--md c-field--radius-md" id="62bed1d5e3ae6">
            <label class="c-field__label" for="input_62bed1d5e3ae6" id="label_62bed1d5e3ae6">
            Search
                    </label>
        
    <div class="c-field__inner c-field__inner--text">
                                
            <input id="input_62bed1d5e3ae6"
                type="text"
                value=""
                type="search" name="search" required="1" js-filter-input="5da57cccd46c6" aria-labelledby="label_62bed1d5e3ae6" data-uid="62bed1d5e3b03"
                                placeholder=""
            />

                        
            <i class="c-icon c-field__suffix material-icons c-field__error-icon" translate="no" role="img">error_outline</i>
            </div>
    </div>

            <div class="c-table table-striped table-bordered">
                <div class="c-table__inner">
                    <table class="c-table__table">
                        <thead class="c-table__head">
                            <tr class="c-table__line">
                                <th scope="col" class="c-table__column c-table__column-0">Attribute</th>
                                <th scope="col" class="c-table__column c-table__column-1">Description</th>
                                <th scope="col" class="c-table__column c-table__column-2">Example value</th>
                            </tr>
                        </thead>
                        <tbody class="c-table__body">
                            <tr class="c-table__line c-table__line-0" js-filter-item="">
                                <td scope="row" class="c-table__column c-table__column-0" js-filter-data="">js-filter-container</td>
                                <td scope="row" class="c-table__column c-table__column-1" js-filter-data="">Container of what should be filterable, has to contain unique id.</td>
                                <td scope="row" class="c-table__column c-table__column-2" js-filter-data="">unique_id</td>
                            </tr>

                            <tr class="c-table__line c-table__line-2" js-filter-item="">
                                <td scope="row" class="c-table__column c-table__column-0" js-filter-data="">js-filter-data</td>
                                <td scope="row" class="c-table__column c-table__column-1" js-filter-data="">Elements inside item that contain data which should be used in the filter.</td>
                                <td scope="row" class="c-table__column c-table__column-2" js-filter-data=""></td>
                            </tr>

                            <tr class="c-table__line c-table__line-3" js-filter-item="">
                                <td scope="row" class="c-table__column c-table__column-0" js-filter-data="">js-filter-input</td>
                                <td scope="row" class="c-table__column c-table__column-1" js-filter-data="">The input for a specific container, has to contain same id as parent.</td>
                                <td scope="row" class="c-table__column c-table__column-2" js-filter-data="">unique_id</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

Attributes

This script allows you to filter a container which includes items to filter.

The input can be anywhere on the page as long as it has the correct attribute. The value of the attribute must be the containers id which it should filter.
The container (which does not have to be direct parent if items) has to have the attribute [js-filter-container] whith the value of a unique id.

Apply the [js-filter-item] on the elements that will be filterable (e.g. a row in a table). The items should contain at least one child which has the [js-filter-item] attribute. The data inside that element will be used for filtering.

You can have several filterable items on one page as long as each container has a unique ID and a matching input.

Blade component parameters

Attributes Description Values
js-filter-container Top container that contains items that shoiudld be filterable. id
js-filter-item Item that should be filterable.
js-filter-data Child of item that contains data that should be considered when filtering.
js-filter-input An input field that will be used to filter a container Matching id of container