Light Dark System

Filter Wrapper

<zn-filter-wrapper> | ZnFilterWrapper
Since 1.0 experimental

Short summary of the component’s intended use.

<zn-filter-wrapper>
  <zn-input name="search" label="Search" placeholder="Enter search term"></zn-input>
</zn-filter-wrapper>

Examples

Basic Usage

Wrap filter inputs to automatically submit to a parent data-table.

<zn-filter-wrapper>
  <zn-input name="search" label="Search" placeholder="Search items..."></zn-input>
</zn-filter-wrapper>

Multiple Filter Inputs

Combine multiple input fields for complex filtering.

 
<zn-filter-wrapper>
  <div class="form-spacing">
    <zn-input name="name" label="Name" placeholder="Filter by name"></zn-input>
    <zn-input name="email" label="Email" placeholder="Filter by email"></zn-input>
  </div>
</zn-filter-wrapper>

With Select Dropdown

Use select components for dropdown filters.

All Active Inactive Pending All Admin User Guest 
<zn-filter-wrapper>
  <div class="form-spacing">
    <zn-select name="status" label="Status">
      <zn-option value="">All</zn-option>
      <zn-option value="active">Active</zn-option>
      <zn-option value="inactive">Inactive</zn-option>
      <zn-option value="pending">Pending</zn-option>
    </zn-select>
    <zn-select name="role" label="Role">
      <zn-option value="">All</zn-option>
      <zn-option value="admin">Admin</zn-option>
      <zn-option value="user">User</zn-option>
      <zn-option value="guest">Guest</zn-option>
    </zn-select>
  </div>
</zn-filter-wrapper>

With Data Select

Use data-select components for predefined options.

 
<zn-filter-wrapper>
  <div class="form-spacing">
    <zn-data-select name="country" label="Country" provider="country"></zn-data-select>
    <zn-data-select name="currency" label="Currency" provider="currency"></zn-data-select>
  </div>
</zn-filter-wrapper>

Custom Button Text

Change the default button text using the button attribute.

<zn-filter-wrapper button="Apply Filters">
  <zn-input name="search" label="Search" placeholder="Search..."></zn-input>
</zn-filter-wrapper>

Custom Submit Button

Provide your own submit button by adding the submit attribute to a button.

Apply Clear 
<zn-filter-wrapper>
  <div class="form-spacing">
    <zn-input name="query" label="Query" placeholder="Enter query"></zn-input>
    <div style="display: flex; gap: 10px;">
      <zn-button submit color="success">Apply</zn-button>
      <zn-button color="secondary">Clear</zn-button>
    </div>
  </div>
</zn-filter-wrapper>

Omit Empty Values

Use the omit-empty attribute on inputs to exclude them from the filter when empty.

 
<zn-filter-wrapper>
  <div class="form-spacing">
    <zn-input name="required_field" label="Required Field"></zn-input>
    <zn-input name="optional_field" label="Optional Field" omit-empty></zn-input>
  </div>
</zn-filter-wrapper>

Date Range Filter

Create a date range filter with multiple inputs.

 
<zn-filter-wrapper>
  <div class="form-spacing">
    <zn-input name="start_date" label="Start Date" type="date"></zn-input>
    <zn-input name="end_date" label="End Date" type="date"></zn-input>
  </div>
</zn-filter-wrapper>

Number Range Filter

Filter by number ranges.

 
<zn-filter-wrapper>
  <div class="form-spacing">
    <zn-input name="min_price" label="Min Price" type="number" placeholder="0"></zn-input>
    <zn-input name="max_price" label="Max Price" type="number" placeholder="1000"></zn-input>
  </div>
</zn-filter-wrapper>

Advanced Filter Form

A complete filter form with multiple field types.

All Categories Electronics Clothing Books Name Price Date 
<zn-filter-wrapper button="Search">
  <div class="form-spacing">
    <zn-input name="keyword" label="Keyword" placeholder="Search keyword"></zn-input>

    <zn-select name="category" label="Category">
      <zn-option value="">All Categories</zn-option>
      <zn-option value="electronics">Electronics</zn-option>
      <zn-option value="clothing">Clothing</zn-option>
      <zn-option value="books">Books</zn-option>
    </zn-select>

    <zn-cols layout="1,1">
      <zn-input name="min_price" label="Min Price" type="number"></zn-input>
      <zn-input name="max_price" label="Max Price" type="number"></zn-input>
    </zn-cols>

    <zn-select name="sort" label="Sort By">
      <zn-option value="name">Name</zn-option>
      <zn-option value="price">Price</zn-option>
      <zn-option value="date">Date</zn-option>
    </zn-select>
  </div>
</zn-filter-wrapper>

With Query Builder

Integrate with query builder for advanced filtering.

<zn-filter-wrapper>
  <zn-query-builder
    name="filters"
    filters="[{&quot;id&quot;:&quot;name&quot;,&quot;name&quot;:&quot;Name&quot;,&quot;operators&quot;:[&quot;eq&quot;]},{&quot;id&quot;:&quot;status&quot;,&quot;name&quot;:&quot;Status&quot;,&quot;options&quot;:{&quot;active&quot;:&quot;Active&quot;,&quot;inactive&quot;:&quot;Inactive&quot;},&quot;operators&quot;:[&quot;eq&quot;]}]">
  </zn-query-builder>
</zn-filter-wrapper>

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

To import this component from the CDN using a script tag: 

<script type="module" src="https://cdn.jsdelivr.net/npm/@kubex/zinc@1.0.86/dist/components/filter-wrapper/filter-wrapper.js"></script>

To import this component from the CDN using a JavaScript import: 

import 'https://cdn.jsdelivr.net/npm/@kubex/zinc@1.0.86/dist/components/filter-wrapper/filter-wrapper.js';

To import this component using a bundler:

import '@kubex/zinc/dist/components/filter-wrapper/filter-wrapper.js';

Slots

Name Description
(default) The default slot.
example An example slot.

Learn more about using slots.

Events

Name React Event Description Event Detail
zn-event-name Emitted as an example. -

Learn more about events.

Custom Properties

Name Description Default
--example An example CSS custom property.

Learn more about customizing CSS custom properties.

Parts

Name Description
base The component’s base wrapper.

Learn more about customizing CSS parts.

Dependencies

This component automatically imports the following dependencies.

  • <zn-example>