vue-tables-2
  • Dependencies & Compatability
  • Getting Started
    • Vue Version 3
  • Client Table
    • Asynchronous Loading
    • Grouping
    • Filtering Algorithm
    • Editable Cells
  • Server Table
    • Implementations
    • Custom Request Function
    • Setting Multiple Request Parameters
    • Error Message
    • Draw Counter
  • Virtual Pagination
  • Custom Template
  • Column Templates
  • Nested Data Structures
  • Selectable Rows
  • Date Columns
  • List Filters
  • Custom Filters
  • Custom Sorting
  • Multiple Sorting
  • Child Rows
  • Conditional Cell Styling
  • Columns Visibility
  • Methods
  • Properties
  • Events
  • Slots
  • Options API
Powered by GitBook
On this page

Was this helpful?

List Filters

When filtering by column (option filterByColumn:true), the listColumns option allows for filtering columns whose values are part of a list, using a select box instead of the default free-text filter.

For example:

options: {
    filterByColumn: true,
    listColumns: {
        animal: [{
                id: 1,
                text: 'Dog'
            },
            {
                id: 2,
                text: 'Cat',
                hide:true
            },
            {
                id: 3,
                text: 'Tiger'
            },
            {
                id: 4,
                text: 'Bear'
            }
        ]
    }
}

The values of this column should correspond to the id's passed to the list. They will be automatically converted to their textual representation.

Adding hide:true to an item, will exclude it from the options presented to the user

PreviousDate ColumnsNextCustom Filters

Last updated 5 years ago

Was this helpful?