Data Table Filter
<zn-data-table-filter> | ZnDataTableFilter
Short summary of the component’s intended use.
<zn-data-table-filter filters="[{"id":"title","name":"Title","operators":["eq"]},{"id":"author","name":"Author","operators":["eq","fuzzy"]},{"id":"genre","name":"Genre","options":{"action":"Action","comedy":"Comedy","drama":"Drama","fantasy":"Fantasy","horror":"Horror","mystery":"Mystery","romance":"Romance","thriller":"Thriller","sci-fi":"ScienceFiction"},"maxOptionsVisible":"3","operators":["eq","in"]},{"id":"rating","name":"Rating","type":"number","operators":["eq","gt","gte","lt","lte"]},{"id":"created","name":"Created","type":"date","operators":["eq","before","after"]}]"> </zn-data-table-filter>
Examples
Basic Text Filters
Create simple text-based filters with equality and fuzzy search operators.
<zn-data-table-filter filters="[{"id":"name","name":"Name","operators":["eq","fuzzy"]},{"id":"email","name":"Email","operators":["eq","fuzzy"]},{"id":"company","name":"Company","operators":["eq"]}]" name="text-filters"> </zn-data-table-filter>
Number Filters with Operators
Use number type filters with comparison operators like equal, greater than, less than.
<zn-data-table-filter filters="[{"id":"age","name":"Age","type":"number","operators":["eq","gt","gte","lt","lte"]},{"id":"price","name":"Price","type":"number","operators":["eq","gt","lt"]},{"id":"quantity","name":"Quantity","type":"number","operators":["eq","gte","lte"]}]" name="number-filters"> </zn-data-table-filter>
Date Filters
Filter by dates with before, after, and equal operators.
<zn-data-table-filter filters="[{"id":"created","name":"Created Date","type":"date","operators":["eq","before","after"]},{"id":"modified","name":"Modified Date","type":"date","operators":["before","after"]},{"id":"due_date","name":"Due Date","type":"date","operators":["eq","before","after"]}]" name="date-filters"> </zn-data-table-filter>
Dropdown Options
Use predefined options for select-based filtering.
<zn-data-table-filter filters="[{"id":"status","name":"Status","options":{"open":"Open","in_progress":"In Progress","closed":"Closed"},"operators":["eq","in"]},{"id":"priority","name":"Priority","options":{"low":"Low","medium":"Medium","high":"High","critical":"Critical"},"operators":["eq","in"]}]" name="option-filters"> </zn-data-table-filter>
Limited Options Display
Control how many options are initially visible using maxOptionsVisible.
<zn-data-table-filter filters="[{"id":"category","name":"Category","options":{"cat1":"Category 1","cat2":"Category 2","cat3":"Category 3","cat4":"Category 4","cat5":"Category 5","cat6":"Category 6"},"maxOptionsVisible":3,"operators":["eq","in"]}]" name="limited-options"> </zn-data-table-filter>
Mixed Filter Types
Combine different field types in a single filter component.
<zn-data-table-filter filters="[{"id":"product","name":"Product Name","operators":["eq","fuzzy"]},{"id":"category","name":"Category","options":{"electronics":"Electronics","clothing":"Clothing","books":"Books"},"operators":["eq","in"]},{"id":"price","name":"Price","type":"number","operators":["eq","gt","lt"]},{"id":"in_stock","name":"In Stock","type":"boolean","operators":["eq"]}]" name="mixed-filters"> </zn-data-table-filter>
Employee Filter Example
A practical example for filtering employee data.
<zn-data-table-filter filters="[{"id":"employee_name","name":"Employee Name","operators":["eq","fuzzy"]},{"id":"department","name":"Department","options":{"engineering":"Engineering","sales":"Sales","marketing":"Marketing","hr":"Human Resources","finance":"Finance"},"operators":["eq","in"]},{"id":"hire_date","name":"Hire Date","type":"date","operators":["before","after"]},{"id":"salary","name":"Salary","type":"number","operators":["gt","lt"]}]" name="employee-filters"> </zn-data-table-filter>
E-commerce Filter Example
Filter products with various criteria.
<zn-data-table-filter filters="[{"id":"title","name":"Product Title","operators":["eq","fuzzy"]},{"id":"brand","name":"Brand","operators":["eq"]},{"id":"category","name":"Category","options":{"electronics":"Electronics","clothing":"Clothing","home":"Home & Garden","sports":"Sports","toys":"Toys"},"maxOptionsVisible":3,"operators":["eq","in"]},{"id":"price","name":"Price","type":"number","operators":["eq","gt","gte","lt","lte"]},{"id":"rating","name":"Rating","type":"number","operators":["gte"]},{"id":"release_date","name":"Release Date","type":"date","operators":["before","after"]}]" name="product-filters"> </zn-data-table-filter>
Content Library Filter
Filter media content like books, movies, or articles.
<zn-data-table-filter filters="[{"id":"title","name":"Title","operators":["eq","fuzzy"]},{"id":"author","name":"Author","operators":["eq","fuzzy"]},{"id":"genre","name":"Genre","options":{"action":"Action","comedy":"Comedy","drama":"Drama","fantasy":"Fantasy","horror":"Horror","mystery":"Mystery","romance":"Romance","thriller":"Thriller","sci-fi":"Science Fiction"},"maxOptionsVisible":3,"operators":["eq","in"]},{"id":"rating","name":"Rating","type":"number","operators":["eq","gt","gte","lt","lte"]},{"id":"published","name":"Published Date","type":"date","operators":["eq","before","after"]}]" name="content-filters"> </zn-data-table-filter>
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/data-table-filter/data-table-filter.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/data-table-filter/data-table-filter.js';
To import this component using a bundler:
import '@kubex/zinc/dist/components/data-table-filter/data-table-filter.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>