BaseColumnPickerDropdown

Column picker dropdown component renders BaseDropdown component which options are the different columns you can set for a grid.

It emits XEventsTypes.UserClickedColumnPicker on dropdown input.

Props

Name	Description	Type	Default
value	The value of the selected columns number.	number
columns	An array of numbers that represents the number of columns to render.	Array
animation	The transition to use for opening and closing the dropdown.	union

Events

Event name	Properties	Description
change

Slots

Name	Description	Bindings (name - type - description)
toggle	From BaseDropdown component: Used to render the contents of the dropdown toggle	item string | number | Identifiable - The item data to render. isOpen boolean - True if the dropdown is opened, and false if it is
item	(required) From BaseDropdown component: Used to render each one of the items	item string | number | Identifiable - Item to render isSelected boolean - True when the item is selected. isHighlighted boolean - True when the item has the focus.

Events

An event that the component will emit:

• UserClickedColumnPicker (opens new window): the event is emitted after the user clicks an item in the dropdown. The event payload is the number of columns that the clicked item represents.
• ColumnsNumberProvided (opens new window): the event is emitted on component mount, and whenever the value changes. The event payload is the current selectedColumns value.

Example

Column picker dropdown component renders a dropdown component which options are the different columns you can set for a grid.

Usage

Notice that the slots provided match with the BaseDropdown component. The item slot is required unlike the toggle, which renders the same item slot defined by default.

Default usage

Customizing toggle button

Using it without v-model / value

The component emits an X Event, UserClickedColumnPicker, on column change and it also listens to that event from outside, so you don't need to store the current column value to keep it synchronized with other column pickers.