Accessibility: Work in progress

Translations: Full

Migration Guide: Work in progress

Advance Filter

A flexible and powerful advance filter component that supports filtering data.

See here on how to use inside a table.

Basic Usage

First Name

Text Contains

Vue

<script setup lang="ts">
  import { HLAdvanceFilter } from '@platform-ui/highrise'
</script>
<template>
  <HLAdvanceFilter :columnOptions="defaultOptions" v-model:data="defaultData" />
</template>

Options.ts

const defaultOptions = [
  { label: 'First Name', value: 'first_name', columnType: 'string' },
  {
    label: h('div', { class: 'flex items-center gap-1' }, [h(HLIcon, { size: 14 }, Phone01Icon), 'Phone']),
    value: 'phone',
    columnType: 'string',
  },
  { label: 'Age', value: 'age', columnType: 'number' },
  {
    label: h('div', { class: 'flex items-center gap-1' }, [h(HLIcon, { size: 14 }, CalendarIcon), 'Birthday']),
    value: 'birthday',
    columnType: 'date',
  },
]

const defaultData = ref({
  condition: 'OR',
  rules: [
    {
      condition: 'AND',
      rules: [
        {
          field: 'first_name', // value of the option in the columnOptions
          operator: 'contains', // operator -> based in the columnType
          value: 'ABC', // value -> based in the columnType
        },
      ],
    },
  ],
})

Number Column

Default Usage

Age

Is less than or equal to

Customized Usage

Age

Is less than

Vue

<script setup lang="ts">
  import { HLAdvanceFilter } from '@platform-ui/highrise'
</script>
<template>
  <HLAdvanceFilter :columnOptions="numberCustomizedColumn" v-model:data="numberCustomizedData" />
</template>

Default.ts

const numberColumn = [{ label: 'Age', value: 'age', columnType: 'number' }]
const numberData = ref({
  condition: 'OR',
  rules: [
    {
      condition: 'AND',
      rules: [
        {
          field: 'age',
          operator: 'less_or_equal',
          value: 18,
        },
      ],
    },
  ],
})

Customized.ts

const numberCustomizedColumn = [
  {
    label: 'Age',
    value: 'age',
    columnType: 'number',
    operatorOptions: [
      {
        label: 'Is less than',
        value: 'less',
        valueType: 'number',
        props: { min: 10, max: 20 },
      },
      {
        label: 'Is greater than',
        value: 'greater',
        valueType: 'number',
        props: { min: 10, max: 20 },
      },
    ],
  },
]
const numberCustomizedData = ref({
  condition: 'OR',
  rules: [
    {
      condition: 'AND',
      rules: [
        {
          field: 'age',
          operator: 'less',
          value: 18,
        },
      ],
    },
  ],
})

String Column

Default Usage

First Name

Text is Exactly

Customized Usage

First Name

Is equal to

Vue

<script setup lang="ts">
  import { HLAdvanceFilter } from '@platform-ui/highrise'
</script>
<template>
  <HLAdvanceFilter :columnOptions="stringCustomizedColumn" v-model:data="stringCustomizedData" />
</template>

Default.ts

const stringColumn = [{ label: 'First Name', value: 'first_name', columnType: 'string' }]
const stringData = ref({
  condition: 'OR',
  rules: [
    {
      condition: 'AND',
      rules: [
        {
          field: 'first_name',
          operator: 'equal',

          value: 'John',
        },
      ],
    },
  ],
})

Customized.ts

const stringCustomizedColumn = [
  {
    label: 'First Name',
    value: 'first_name',
    columnType: 'string',
    operatorOptions: [
      {
        label: 'Is equal to',
        value: 'equal',
        valueType: 'string',
      },
      {
        label: 'Is not equal to',
        value: 'not_equal',
        valueType: 'string',
      },
    ],
  },
]
const stringCustomizedData = ref({
  condition: 'OR',
  rules: [
    {
      condition: 'AND',
      rules: [
        {
          field: 'first_name',
          operator: 'equal',

          value: 'John',
        },
      ],
    },
  ],
})

Date Column

Default Usage

Birthday

Date is after

Customized Usage

Birthday

Is greater than

Vue

<script setup lang="ts">
  import { HLAdvanceFilter } from '@platform-ui/highrise'
</script>
<template>
  <HLAdvanceFilter :columnOptions="dateCustomizedColumn" v-model:data="dateCustomizedData" />
</template>

Default.ts

const dateColumn = [{ label: 'Birthday', value: 'birthday', columnType: 'date' }]
const dateData = ref({
  condition: 'OR',
  rules: [
    {
      condition: 'AND',
      rules: [
        {
          field: 'birthday',
          operator: 'greater',
          value: 1762799400000,
        },
      ],
    },
  ],
})

Customized.ts

const dateCustomizedColumn = [
  {
    label: 'Birthday',
    value: 'birthday',
    columnType: 'date',
    operatorOptions: [
      {
        label: 'Is greater than',
        value: 'greater',
        valueType: 'date',
      },
      {
        label: 'Is less than',
        value: 'less',
        valueType: 'date',
      },
    ],
  },
]
const dateCustomizedData = ref({
  condition: 'OR',
  rules: [
    {
      condition: 'AND',
      rules: [
        {
          field: 'birthday',
          operator: 'greater',
          value: 1762799400000,
        },
      ],
    },
  ],
})

Mixed Filter Column

Custom Select

In

O1

Option 1

O2

Option 2

ANDOR

Custom Select

greater than

Vue

<script setup lang="ts">
  import { HLAdvanceFilter } from '@platform-ui/highrise'
</script>
<template>
  <HLAdvanceFilter :columnOptions="mixedFilterColumn" v-model:data="mixedFilterData" />
</template>

Customized.ts

const mixedFilterColumn = [
  {
    label: 'Custom Select',
    value: 'custom_select',
    columnType: 'select',
    operatorOptions: [
      {
        type: 'group',
        label: 'Filter by value',
        key: 'Filter by value',
        children: [
          {
            label: 'In',
            value: 'in',
            valueType: 'select',
            props: {
              multiple: true,
              options: [
                { label: 'Option 1', value: 'option1' },
                { label: 'Option 2', value: 'option2' },
                { label: 'Option 3', value: 'option3' },
              ],
            },
          },
        ],
      },
      {
        type: 'group',
        label: 'Filter by Condition',
        key: 'Filter by Condition',
        children: [
          {
            label: 'greater than',
            value: 'greater_than',
            valueType: 'number',
            props: { min: 10, max: 20 },
          },
          {
            label: 'Is between',
            value: 'between',
            valueType: 'numberRange',
            props: { min: 10, max: 20, showInput: true },
          },
        ],
      },
    ],
  },
]
const mixedFilterData = ref({
  condition: 'OR',
  rules: [
    {
      condition: 'OR',
      rules: [
        {
          field: 'custom_select',
          operator: 'in',
          value: ['option1', 'option2'],
        },
        {
          field: 'custom_select',
          operator: 'greater_than',
          value: 10,
        },
      ],
    },
  ],
})

Customized Usage

Name

Text is Exactly

ANDOR

Age

Is less than or equal to

ANDOR

Birthday

Date is after

ANDOR

Age

equal

Vue

<script setup lang="ts">
  import { HLAdvanceFilter } from '@platform-ui/highrise'
</script>
<template>
  <HLAdvanceFilter :columnOptions="customColumnOptions" v-model:data="customData" />
</template>

Customized.ts

const customColumnOptions = [
  {
    label: h('div', { class: 'flex items-center gap-1' }, [h(HLIcon, { size: 14 }, ImageUserIcon), 'Name']),
    value: 'name',
    columnType: 'string',
  },
  {
    label: h('div', { class: 'flex items-center gap-1' }, [h(HLIcon, { size: 14 }, Mail01Icon), 'Email']),
    value: 'email',
    columnType: 'string',
  },
  {
    label: h('div', { class: 'flex items-center gap-1' }, [h(HLIcon, { size: 14 }, Phone01Icon), 'Phone']),
    value: 'phone',
    columnType: 'string',
  },
  {
    label: 'Rating',
    value: 'rating',
    columnType: 'select',
    operatorOptions: [
      {
        type: 'group',
        label: 'Filter by value',
        key: 'Filter by value',
        children: [
          {
            label: 'In',
            value: 'in',
            valueType: 'select',
            props: {
              multiple: true,
              options: [
                { label: 'Option 1', value: 'option1' },
                { label: 'Option 2', value: 'option2' },
                { label: 'Option 3', value: 'option3' },
              ],
            },
          },
        ],
      },
      {
        type: 'group',
        label: 'Filter by Condition',
        key: 'Filter by Condition',
        children: [
          {
            label: 'greater than',
            value: 'greater_than',
            valueType: 'number',
            props: { min: 10, max: 20 },
          },
          {
            label: 'less than',
            value: 'less_than',
            valueType: 'number',
            props: { min: 10, max: 20 },
          },
        ],
      },
    ],
  },
  {
    label: 'Age',
    value: 'age',
    columnType: 'number',
    operatorOptions: [
      {
        label: 'Is less than or equal to',
        value: 'less_or_equal',
        valueType: 'number',
        props: { min: 10, max: 20 },
      },
      {
        label: 'Is between',
        value: 'between',
        valueType: 'numberRange',
        props: { min: 10, max: 20, showInput: true },
      },
    ],
  },
  {
    label: h('div', { class: 'flex items-center gap-1' }, [h(HLIcon, { size: 14 }, CalendarIcon), 'Birthday']),
    value: 'birthday',
    columnType: 'date',
  },
  {
    label: 'Custom Select',
    value: 'custom_select',
    columnType: 'select',
    operatorOptions: [
      {
        label: 'Select In',
        value: 'select_in',
        valueType: 'select',
        props: {
          multiple: true,
          options: [
            { label: 'Option 1', value: 'option1' },
            { label: 'Option 2', value: 'option2' },
            { label: 'Option 3', value: 'option3' },
          ],
        },
      },
      { label: 'Number Selection', value: 'not_null', valueType: 'number' },
    ],
  },
]

const customData = ref({
  condition: 'AND',
  rules: [
    {
      condition: 'OR',
      rules: [
        {
          field: 'name',
          operator: 'equal',
          value: 'Mara',
        },
        {
          field: 'age',
          operator: 'less_or_equal',
          value: 18,
        },
      ],
    },
    {
      condition: 'OR',
      rules: [
        {
          field: 'birthday',
          operator: 'greater',
          value: 1762799400000,
        },
        {
          field: 'age',
          operator: 'equal',
          value: 20,
        },
      ],
    },
  ],
})

Live Demo

First Name

Text Contains

{
  "condition": "OR",
  "rules": [
    {
      "condition": "AND",
      "rules": [
        {
          "field": "first_name",
          "operator": "contains",
          "value": "ABC"
        }
      ]
    }
  ]
}
    

Props

Prop	Type	Default	Description
columnOptions	HLAdvanceFilterColumnOption[]	-	The columns to display in the filter
data	HLAdvanceFilterData	-	The data to display in the filter
selectColumnProps	Object see here	-	The props to pass to the select field column

Types

HLAdvanceFilterColumnOption.ts

interface HLAdvanceFilterColumnOption {
  value: string
  columnType: 'string' | 'number' | 'date' | 'select'
  operatorOptions?: {
    props?: Object
    label?: string
    key?: string
    children?: OperatorOption[]
    type?: 'group' | 'option'
    value?: string
    valueType?: 'string' | 'number' | 'date' | 'select' | 'numberRange' | 'dateRange'
  }[]
  operatorProps?: Object
}

HLAdvanceFilterData.ts

interface HLAdvanceFilterData {
  condition: 'AND' | 'OR'
  rules: {
    condition: 'AND' | 'OR'
    rules: {
      field: string | null
      operator: Operator | null
      value: any
    }[]
  }[]
}

defaultOperatorOptions.ts

const defaultOperatorOptions = {
  number: [
    { label: 'Is equals to', value: 'equal', valueType: 'number' },
    { label: 'Is not equals to', value: 'not_equal', valueType: 'number' },
    { label: 'Is greater than', value: 'greater', valueType: 'number' },
    { label: 'Is greater than or equal to', value: 'greater_or_equal', valueType: 'number' },
    { label: 'Is less than', value: 'less', valueType: 'number' },
    { label: 'Is less than or equal to', value: 'less_or_equal', valueType: 'number' },
    { label: 'Is between', value: 'between', valueType: 'numberRange' },
    { label: 'Is not between', value: 'not_between', valueType: 'numberRange' },
  ],
  string: [
    { label: 'Text Contains', value: 'contains', valueType: 'string' },
    { label: 'Text Does Not Contain', value: 'not_contains', valueType: 'string' },
    { label: 'Text Starts With', value: 'begins_with', valueType: 'string' },
    { label: 'Text Ends With', value: 'ends_with', valueType: 'string' },
    { label: 'Text is Exactly', value: 'equal', valueType: 'string' },
  ],
  date: [
    { label: 'Date is before', value: 'less', valueType: 'date' },
    { label: 'Date is after', value: 'greater', valueType: 'date' },
    { label: 'Date is', value: 'equal', valueType: 'date' },
    { label: 'Date is between', value: 'between', valueType: 'dateRange' },
    { label: 'Date is not between', value: 'not_between', valueType: 'dateRange' },
  ],
}

Emits

Event	Parameters	Description
update:data	(data: HLAdvanceFilterData) => void	Emitted when the data changes

Methods

Method	Parameters	Description
setFilterData	(data: HLAdvanceFilterData)	Sets the filter data