Data Table: Filtering

Configure filter types, advanced mode with operators, and custom filter fields.

Filter Fields

Pass filterFields to enable the filter toolbar. Each field maps to a column ID:

Filter Types

Filter Field Configuration

import type { DataTableFilterField } from '@meldui/vue'

const filterFields: DataTableFilterField<User>[] = [
  // Text filter
  {
    id: 'name',
    label: 'Name',
    type: 'text',
    placeholder: 'Filter by name...',
  },

  // Select with options
  {
    id: 'role',
    label: 'Role',
    type: 'select',
    options: [
      { label: 'Admin', value: 'admin' },
      { label: 'User', value: 'user' },
      { label: 'Guest', value: 'guest' },
    ],
  },

  // Multiselect (simple mode only)
  {
    id: 'department',
    label: 'Department',
    type: 'multiselect',
    options: [
      { label: 'Engineering', value: 'engineering' },
      { label: 'Marketing', value: 'marketing' },
      { label: 'Sales', value: 'sales' },
    ],
  },

  // Number with range constraints
  {
    id: 'age',
    label: 'Age',
    type: 'number',
    min: 18,
    max: 100,
  },

  // Range slider
  {
    id: 'salary',
    label: 'Salary',
    type: 'range',
    range: [0, 200000],
    step: 5000,
    unit: '$',
  },

  // Boolean toggle
  {
    id: 'is_verified',
    label: 'Verified',
    type: 'boolean',
  },

  // Date picker
  {
    id: 'created_at',
    label: 'Created',
    type: 'date',
  },

  // Date range
  {
    id: 'last_login',
    label: 'Last Login',
    type: 'daterange',
  },
]

Advanced Mode

Enable operator-based filtering with advancedMode:

<DataTable
  :columns="columns"
  :data="data"
  :page-count="pageCount"
  :filter-fields="filterFields"
  enable-filter
  enable-pagination
  advanced-mode
  v-model:filters="filters"
  v-model:pagination="pagination"
/>

See the <Filters> composite page for the props and types in detail, or the Recipes page for how filters compose with sorting and pagination in different layouts.

In advanced mode, each filter gets an operator dropdown. Only base types are allowed (text, number, date, select, boolean — not multiselect, range, or daterange).

Available Operators

You can customize available operators per field:

{
  id: 'name',
  label: 'Name',
  type: 'text',
  defaultOperator: 'contains',
  availableOperators: ['contains', 'equals', 'startsWith'],
}