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
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
filter.filterOnPressEnter
Enable/Disable filtering on "enter" key press.
Boolean
false
filter.debounceRate
Defines the wait time for filtering between the key strokes. Value should be in milliseconds.
Number
60
filter.showClearButton
Show/Hide clear button in the simple filter.
Boolean
true
filter.init.value
Assign initial value to the the filter before rendering the table.
String
Empty string
Clear button icon slot
You can override the default clear button icon in the simple filter text input.
Select Filter
You can have select dropdown filter for each columns. The options in the dropdown will be rendered with bootstrap 4 custom radio/checkboxes.
Example (Single select)
Single select will render a dropdown list with radio buttons.
Example (Multi select)
Multi select will render a dropdown list with checkboxes.
Attributes details
Attributes
Description
Type
Default
filter.type
Defines the type of filter.
String
Empty string
filter.mode
Defines the mode of selection in the dropdown. Allowed options are single
and multi
. If the mode is single
, then dropdown will be rendered with radio
buttons, else if the mode is multi, then dropdown will be rendered with checkboxes
.
String
"single"
filter.placeholder
Default text for the dropdown.
String
Empty string
filter.closeDropdownOnSelection
Immediately close dropdown on selection.
Boolean
false
filter.options
You can provide your list of name and value objects to be populated in the multi-select filter dropdown.
Array
Empty array
filter.init.value
Select initial value in the dropdown list before rendering the table. In single select mode, value should be a single number (index of the item).
In multi select mode, value should be array of numbers (indexes of the items).
Number | Array
-
select_all_checkbox.visibility
Enable or disable select all items checkbox in the dropdown list. This option is valid only in multi select mode.
Boolean
true
select_all_checkbox.text
You can override the default text of Select all item text. This option is valid only in multi select mode.
String
"Select All"
Last updated