Multi select filter

Multi select filter

Overview

The MultiSelectFilter class represents a filter that allows users to select multiple options from a list. This filter uses the In operation to filter data based on multiple selected options and supports multiple conditions simultaneously.

Class: MultiSelectFilter

This class extends AbstractSelectFilter and is designed to handle a set of selectable options of type T. It provides the ability to filter data based on multiple selections from a list of options.

Constructor

constructor(column: string, label: string, options: MultiSelectOption[], conditions?: Condition[])

Parameters:

• column: string: The name of the column or field that the filter applies to.
• label: string: The label or display name for the filter.
• options: MultiSelectOption[]: An array of selectable options for the filter.
• conditions?: Condition[]: An optional array of conditions to initialize the filter with. Multiple conditions are supported to represent multiple selections.

Properties

selectedOptions (public)

public get selectedOptions(): MultiSelectOption[];

• Type: MultiSelectOption[]
• Description: Returns an array of the currently selected options from the filter.

Methods

selectOption (public)

public selectOption(value: T): void;

• Type: void
• Description: Selects or deselects an option based on its current selection state. If the option is already selected, it will be deselected and removed from the filter's conditions. If it is not selected, it will be selected and added to the filter's conditions.
• Parameters:
  • value: T: The value of the option to select or deselect.

reset (public)

public override reset(): void;

• Type: void
• Description: Resets the filter by deselecting all currently selected options and clearing all filter conditions. This method calls the parent class's reset method to ensure that the filter is fully reset.

Usage

The MultiSelectFilter class is ideal for cases where multiple selections need to be made from a list of options. It is useful for filtering data based on multiple criteria, such as selecting multiple categories, tags, or statuses.

Example Usage

To create a filter that allows the user to select multiple countries:

const countryOptions = [
  new MultiSelectOption("NL", 1),
  new MultiSelectOption("BE", 2),
  new MultiSelectOption("DE", 3),
  new MultiSelectOption("CZ", 4),
  new MultiSelectOption("PO", 5),
  new MultiSelectOption("US", 6),
  new MultiSelectOption("GB", 7),
];
const countryFilter = new MultiSelectFilter(
  "country_id",
  "Countries",
  countryOptions
);
countryFilter.selectOption(1); // Adds '1' to the filter conditions.
countryFilter.selectOption(2); // Adds '2' to the filter conditions.
countryFilter.reset(); // Resets the filter, clearing all selections.