# Class CriteriaFilterTile

UI component that allows the user to filter numeric or text attributes according to a number of built-in operations defined in the numeric filter, text filter, or ranking filter.

The arrangement prop determines whether the filter is rendered vertically or horizontally, with the latter intended for toolbar use and omitting title, enable/disable, and collapse/expand functionality.

# Example

Here's how you can use the CriteriaFilterTile component in a Vue application:

<template>
  <CriteriaFilterTile
    :title="criteriaFilterTileProps.title"
    :filter="criteriaFilterTileProps.filter"
    :onUpdate="onUpdate"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { CriteriaFilterTile } from '@sisense/sdk-ui-vue';
import { filterFactory } from '@sisense/sdk-data';

const criteriaFilterTileProps = ref({
 title: 'Revenue',
 filter: filterFactory.greaterThanOrEqual(DM.Commerce.Revenue, 10000)
});

const onUpdate = (filter: Filter | null) => {
 ...
}
</script>

# Param

Criteria filter tile props

# Properties

# arrangement

readonly arrangement?: FilterVariant

Arrangement of the filter inputs. Use vertical for standard filter tiles and horizontal for toolbars

# filter

readonly filter?: CriteriaFilterType

Text or numeric filter object to initialize filter type and default values

# measures

readonly measures?: Measure[]

List of available measures to rank by. Required only for ranking filters.

# onUpdate

readonly onUpdate?: (filter) => void

Callback returning filter object, or null for failure

# Parameters

Parameter	Type
`filter`	`Filter` \| `null`

# Returns

void

# title

readonly title?: string

Title for the filter tile, which is rendered into the header