BaseColumnPickerList

Column picker list component renders a list of buttons to choose the columns number.

Additionally, this component exposes the following props to modify the classes of the elements: buttonClass.

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

Events

Event name	Properties	Description
change

Slots

Name	Description	Bindings (name - type - description)
default	Customized Column Picker Button content. Specifying a slot with the column value	column number - Columns Number to pick. isSelected boolean - True if the columns number are the chosen value.
divider	Customized Column Picker divider. Specify an element to act as divider for	None

Examples

This component renders a list of elements in different slots depending on the columns prop. Each element will emit the needed events to sync other instances of columns pickers, or grids with the number of columns that it is being selected when it is clicked.

Default usage

It is required to send the columns prop.

Using v-model

It is possible to do two way binding in order to synchronize the value with the parents. It will be updated if it changed the value or if the parent changes it.

Customized usage

Overriding the slots

It is possible to override the column picker button content.

It is also possible to add a divider element between the column picker buttons by overriding the divider slot.

Customizing the buttons with classes

The buttonClass prop can be used to add classes to the buttons.

Events

A list of events that the component will emit:

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