# Class MemberFilterTile
UI component that allows the user to select members to include/exclude in a filter. A query is executed against the provided data source to fetch all members that are selectable.
# Example
Below is an example for filtering countries in the Country dimension of the Sample ECommerce data model.
<template>
<MemberFilterTile
:attribute="memberFilter.attribute"
:onChange="memberFilter.onChange"
:dataSource="memberFilter.dataSource"
:title="memberFilter.title"
/>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { MemberFilterTile, type MemberFilterTileProps } from '@sisense/sdk-ui-vue';
const memberFilterValue = ref<Filter | null>(null);
const memberFilter = ref<MemberFilterTileProps>({
dataSource: DM.DataSource,
title: 'Member Filter',
attribute: DM.DimProducts.ProductName,
filter: memberFilterValue.value,
onChange(filter) {
memberFilterValue.value = filter;
},
});
</script>
# Param
MemberFilterTile props
# Properties
# attribute
readonlyattribute?:Attribute
Attribute to filter on. A query will run to fetch all this attribute's members
# dataSource
readonlydataSource?:DataSource
Data source the query is run against - e.g. Sample ECommerce
If not specified, the query will use the defaultDataSource specified in the parent Sisense Context.
# filter
readonlyfilter?:Filter|null
Source filter object. Caller is responsible for keeping track of filter state
# onChange
readonlyonChange?: (filter) =>void
Callback indicating when the source members filter should be updated
# Parameters
| Parameter | Type |
|---|---|
filter | Filter | null |
# Returns
void
# onDelete
readonlyonDelete?: () =>void
Filter delete callback
# Returns
void
# onEdit
readonlyonEdit?: () =>void
Filter edit callback
# Returns
void
# parentFilters
readonlyparentFilters?:Filter[]
List of filters this filter is dependent on
# title
readonlytitle?:string
Title for the filter tile, which is rendered into the header