2 min read



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.


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


Event name Properties Description


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


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.


A list of events that the component will emit: