Filter Component

The Filter supports advanced filtering options, infinite scrolling, and dynamic data handling.

Features

• Multi-select filtering with options.
• Advanced filter menu with nested filters.
• Infinite scrolling support.
• Customizable UI with slots and props.
• Avatar support for options.

Basic Usage

Selected: []searchValue:

Search

<template>
  <spr-filter v-model="selectedOptions" v-model:search="searchValue" :options="options" label="Search" hasAvatar />
</template>

<script setup>
import { ref } from 'vue';

const options = ref([
  { column: '', isSelected: false, text: 'sample 1', value: 'sample1' },
  { column: '', isSelected: false, text: 'sample 2', value: 'sample2' },
  { column: '', isSelected: false, text: 'sample 3', value: 'sample3' },
  { column: '', isSelected: false, text: 'sample 4', value: 'sample4' },
  { column: '', isSelected: false, text: 'sample 5', value: 'sample5' },
]);

const selectedOptions = ref([]);
const searchValue = ref('');
</script>

Filterable

Selected: []searchValue:

Search

<template>
  <spr-filter
    v-model="selectedOptions1"
    v-model:search="searchValue1"
    :options="options1"
    label="Search"
    :filterMenu="filterMenuList1"
    :filterData="filterMenuOptions1"
    filterable
  />
</template>

<script setup>
const options = ref([
  { column: '', isSelected: false, text: 'sample 1', value: 'sample1' },
  { column: '', isSelected: false, text: 'sample 2', value: 'sample2' },
  { column: '', isSelected: false, text: 'sample 3', value: 'sample3' },
  { column: '', isSelected: false, text: 'sample 4', value: 'sample4' },
  { column: '', isSelected: false, text: 'sample 5', value: 'sample5' },
]);

const filterMenuList = ref([
  { count: 0, isFilterVisible: false, columnName: 'Employee Type', field: 'employeeType' },
  { count: 0, isFilterVisible: false, columnName: 'Department', field: 'department' },
  { count: 0, isFilterVisible: false, columnName: 'Location', field: 'location' },
  { count: 0, isFilterVisible: false, columnName: 'Region', field: 'region' },
  { count: 0, isFilterVisible: false, columnName: 'Job Level', field: 'jobLevel' },
]);

const filterMenuOptions = [
  { column: 'location', isSelected: false, text: 'sample 1', value: 'sample1' },
  { column: 'location', isSelected: false, text: 'sample 2', value: 'sample2' },
  { column: 'location', isSelected: false, text: 'sample 3', value: 'sample3' },
  { column: 'location', isSelected: false, text: 'sample 4', value: 'sample4' },
];

const selectedOptions = ref([]);
const searchValue = ref('');
</script>

Deselect

This example demonstrates how to remove selected options from outside the component.

Search

<template>
  <div class="spr-space-y-3">
    <div class="spr-flex spr-gap-2">
      <div v-for="selected in selectedOptions2">
        <spr-button hasIcon size="small" tone="danger" variant="secondary" @click="removeSelected(selected.value)">
          {{ selected.value }}
          <Icon icon="ph:trash" />
        </spr-button>
      </div>
    </div>
    <spr-filter
      v-model="selectedOptions2"
      v-model:search="searchValue2"
      id="search-filter"
      :deselected="deselected"
      :options="options"
      label="Search"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { Icon } from '@iconify/vue';
import SprButton from '@/components/button/button.vue';

const options = ref([
  { column: '', isSelected: false, text: 'sample 1', value: 'sample1' },
  { column: '', isSelected: false, text: 'sample 2', value: 'sample2' },
  { column: '', isSelected: false, text: 'sample 3', value: 'sample3' },
  { column: '', isSelected: false, text: 'sample 4', value: 'sample4' },
  { column: '', isSelected: false, text: 'sample 5', value: 'sample5' },
]);

const selectedOptions2 = ref([]);
const searchValue2 = ref('');
const deselected = ref('');

const removeSelected = (removeSelected) => {
  deselected.value = removeSelected;
};
</script>

API Reference

Name	Description	Type	Default
modelValue	The selected filter values.	Array or String	[]
options	The list of filter options.	Array	[]
label	Label for the filter input.	String	''
placeholder	Placeholder text for the filter input.	String	''
disabled	Disables the filter input.	Boolean	false
filterable	Enables the advanced filter menu.	Boolean	false
id	Unique identifier for the filter.	String	''
filterMenu	List of advanced filter menu options.	Array	[]
filterData	Data for the advanced filter menu.	Array	[]
loading	Indicates if the filter is in a loading state.	Boolean	false
filling	Indicates if the filter is in a filling state.	Boolean	false
search	Search query for the main filter.	String	''
searchFilter	Search query for the advanced filter menu.	String	''
width	Width of the filter component.	String	'100%'
deselected	Value of the deselected filter option.	String	''
hasSearchApi	Enables external search API integration.	Boolean	false
hasAvatar	Enables avatar display for filter options.	Boolean	false

Events

Name	Payload Type	Description
getFilterData	String	Triggered when fetching filter data for a specific column.
update:modelValue	Array	Updates the selected filter values.
update:search	String	Updates the search query for the main filter.
update:searchFilter	String	Updates the search query for the advanced filter menu.
selectedFilter	Array	Emits the selected filter options.
infiniteScrollTrigger	Boolean	Triggered when infinite scrolling is activated for the main filter.
infiniteScrollFilterTrigger	String	Triggered when infinite scrolling is activated for the advanced filter.

Slots

Slot Name	Description
default	Slot for customizing the filter input.
loading	Slot for displaying a loading state in the advanced filter menu.
empty	Slot for displaying an empty state in the advanced filter menu.
loading-state	Slot for displaying a loading state in the main filter.
empty-state	Slot for displaying an empty state in the main filter.

Advanced Features

Infinite Scrolling

The component supports infinite scrolling for both the main filter and the advanced filter menu. Use the infiniteScrollTrigger and infiniteScrollFilterTrigger events to handle data fetching.

Avatar Support

Enable the hasAvatar prop to display avatars for filter options. Provide an avatar property in the options array.

Product Uses