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

<div js-filter-container="5da57cccd46c6">
            
                <!-- field.blade.php -->
<div class="c-field c-field--search c-field--md c-field--radius-md" id="id_69f0cfea92157" data-uid="69f0cfea92186" data-component="field">
    
            <label class="c-field__label " for="input_id_69f0cfea92157" id="label_id_69f0cfea92157">
            Search
                    </label>
            
    <div class="c-field__inner c-field__inner--text">
        
        
        
        
                    
            
            <input id="input_id_69f0cfea92157" value="" aria-labelledby="label_id_69f0cfea92157" type="search" name="search" required="required" js-filter-input="5da57cccd46c6" data-js-required="" data-required="1" aria-required="true" autocomplete="on">
            <div class="c-field_focus-styler u-level-top"></div> 

                    
        
            <!-- icon.blade.php -->
    <span class="c-icon c-field__suffix c-field__error-icon c-icon--error-outline c-icon--material c-icon--material-error_outline material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="error_outline" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0cfea9231b" data-component="icon">
                    </span>

        
            <!-- icon.blade.php -->
    <span class="c-icon c-field__suffix c-field__success-icon c-icon--check-circle-outline c-icon--material c-icon--material-check_circle_outline material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="check_circle_outline" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0cfea9237d" data-component="icon">
                    </span>

    </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>

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

Filtering lists, tables, etc (search)

Parameters (Blade)