Vertical Filter
The vertical layout renders filters in a scrollable column, making it perfect for sidebars and filter panels in dashboards or search pages.
Schema-based vertical filters
vue
<filters :schema="verticalSchema" view="vertical" @change="onChange" />schema array
[
{
"name": "text",
"type": "text",
"label": "text"
},
{
"name": "media",
"type": "checkbox",
"label": "Checkbox",
"options": [
{
"id": "is_video",
"text": "Video",
"color": "#104e02",
"count": 23
},
{
"id": "is_photo",
"text": "Photo",
"color": "#370106",
"count": 23
}
]
},
{
"name": "source",
"type": "radio",
"label": "Radio",
"options": [
{
"id": "is_local",
"text": "Local"
},
{
"id": "is_external",
"text": "External"
},
{
"id": "is_partner",
"text": "Partner"
},
{
"id": "is_imported",
"text": "Imported"
},
{
"id": "is_generated",
"text": "Generated"
},
{
"id": "is_manual",
"text": "Manual"
},
{
"id": "is_automated",
"text": "Automated"
},
{
"id": "is_third_party",
"text": "Third-party"
},
{
"id": "is_uploaded",
"text": "Uploaded"
},
{
"id": "is_copied",
"text": "Copied"
},
{
"id": "is_synced",
"text": "Synced"
},
{
"id": "is_archived",
"text": "Archived"
},
{
"id": "is_collected",
"text": "Collected"
},
{
"id": "is_transferred",
"text": "Transferred"
},
{
"id": "is_legacy",
"text": "Legacy"
},
{
"id": "is_public",
"text": "Public"
},
{
"id": "is_private",
"text": "Private"
},
{
"id": "is_internal",
"text": "Internal"
},
{
"id": "is_verified",
"text": "Verified"
},
{
"id": "is_unverified",
"text": "Unverified"
}
]
},
{
"name": "date",
"type": "date",
"label": "Date"
},
{
"name": "price",
"type": "range",
"label": "Price",
"placeHolder": [
"from",
"to"
]
},
{
"name": "select",
"type": "select",
"label": "Select",
"apiUrl": "https://dummyjson.com/products/search",
"dataKey": "products"
},
{
"name": "tag",
"type": "tag",
"label": "TAG",
"options": [
{
"id": null,
"label": "One size"
},
{
"id": "2XS",
"label": "2XS"
},
{
"id": "XS",
"label": "XS"
},
{
"id": "S",
"label": "S"
},
{
"id": "M",
"label": "M"
},
{
"id": "L",
"label": "L"
},
{
"id": "XL",
"label": "XL"
},
{
"id": "2XL",
"label": "2XL"
},
{
"id": "3XL",
"label": "3XL"
},
{
"id": "4XL",
"label": "4XL"
},
{
"id": "5XL",
"label": "5XL"
},
{
"id": "44",
"label": "44"
},
{
"id": "45",
"label": "45"
},
{
"id": "46",
"label": "46"
}
],
"multi": true
}
]schema object
{
"text": {
"type": "text",
"label": "text",
"name": "text"
},
"media": {
"type": "checkbox",
"label": "Checkbox",
"options": [
{
"id": "is_video",
"text": "Video",
"color": "#104e02",
"count": 23
},
{
"id": "is_photo",
"text": "Photo",
"color": "#370106",
"count": 23
}
],
"name": "media"
},
"source": {
"type": "radio",
"label": "Radio",
"options": [
{
"id": "is_local",
"text": "Local"
},
{
"id": "is_external",
"text": "External"
},
{
"id": "is_partner",
"text": "Partner"
},
{
"id": "is_imported",
"text": "Imported"
},
{
"id": "is_generated",
"text": "Generated"
},
{
"id": "is_manual",
"text": "Manual"
},
{
"id": "is_automated",
"text": "Automated"
},
{
"id": "is_third_party",
"text": "Third-party"
},
{
"id": "is_uploaded",
"text": "Uploaded"
},
{
"id": "is_copied",
"text": "Copied"
},
{
"id": "is_synced",
"text": "Synced"
},
{
"id": "is_archived",
"text": "Archived"
},
{
"id": "is_collected",
"text": "Collected"
},
{
"id": "is_transferred",
"text": "Transferred"
},
{
"id": "is_legacy",
"text": "Legacy"
},
{
"id": "is_public",
"text": "Public"
},
{
"id": "is_private",
"text": "Private"
},
{
"id": "is_internal",
"text": "Internal"
},
{
"id": "is_verified",
"text": "Verified"
},
{
"id": "is_unverified",
"text": "Unverified"
}
],
"name": "source"
},
"date": {
"type": "date",
"label": "Date",
"name": "date"
},
"price": {
"type": "range",
"label": "Price",
"placeHolder": [
"from",
"to"
],
"name": "price"
},
"select": {
"type": "select",
"label": "Select",
"apiUrl": "https://dummyjson.com/products/search",
"dataKey": "products",
"name": "select"
},
"tag": {
"type": "tag",
"label": "TAG",
"options": [
{
"id": null,
"label": "One size"
},
{
"id": "2XS",
"label": "2XS"
},
{
"id": "XS",
"label": "XS"
},
{
"id": "S",
"label": "S"
},
{
"id": "M",
"label": "M"
},
{
"id": "L",
"label": "L"
},
{
"id": "XL",
"label": "XL"
},
{
"id": "2XL",
"label": "2XL"
},
{
"id": "3XL",
"label": "3XL"
},
{
"id": "4XL",
"label": "4XL"
},
{
"id": "5XL",
"label": "5XL"
},
{
"id": "44",
"label": "44"
},
{
"id": "45",
"label": "45"
},
{
"id": "46",
"label": "46"
}
],
"multi": true,
"name": "tag"
}
}{}
Slot-based vertical filters
vue
<filters view="vertical" @change="onChange" @clear="onClear">
<filter-field
name="media"
type="checkbox"
label="Media"
:options="mediaOptions"
/>
<filter-field
name="source"
type="radio"
label="Source"
:options="sourceOptions"
/>
</filters>