Filtering

Filtering configuration is added along with the each column config.

Simple Filter

Filter the rows based on the given keyword. If you don't specify filter config then filter feature will be disabled for the specific column.

Example

SimplFilter.vue

...
columns: [
    {
        label: "First Name",
        name: "name.first_name", // access nested objects properties with "."
        filter: {
            type: "simple",
            placeholder: "Enter first name",
            case_sensitive: true, // "false" by default
        }
    }
]
...

Attributes details

Attributes	Description	Type	Default
filter.type	Defines the type of filter.	String	Empty string
filter.placeholder	Placeholder is hint text for filter text box	String	Empty string
filter.case_sensitive	Enable/Disable case sensitive filtering.	Boolean	false

Multi-Select Filter

You can have multi select dropdown filter for each columns. The options in the dropdown will be rendered with bootstrap 4 custom checkboxes.

Example

MultiColumnFilter.vue

...
columns: [
    {
        label: "First Name",
        name: "name.first_name", // access nested objects properties with "."
        filter: {
            type: "multi-select",
            placeholder: "Select options",
            options: [{
                    "name": "option one",
                    "value": "option one"
                },
                {
                    "name": "option two",
                    "value": "option two"
                },
                {
                    "name": "option three",
                    "value": "option three"
                }
        }
    }
]
...

Attributes details

Attributes	Description	Type	Default
filter.type	Defines the type of filter.	String	Empty string
filter.placeholder	Default text for the dropdown.	String	Empty string
filter.options	You can provide your list of name and value objects to be populated in the multi-select filter dropdown.	Array	Empty array