---

title: BaseColumnPickerList

---

# 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       |
| ------------------------ | -------------------------------------------------------------------- | --------------------- | ------------- |
| <code>columns</code>     | An array of numbers that represents the number of columns to render. | <code>number[]</code> | <code></code> |
| <code>modelValue</code>  | The value of the selected columns number.                            | <code>number</code>   | <code></code> |
| <code>buttonClass</code> | Class inherited by each button.                                      | <code>string</code>   | <code></code> |

## Events

| Event name        | Properties | Description |
| ----------------- | ---------- | ----------- |
| update:modelValue |            |

## Slots

| Name                 | Description                                                                      | Bindings<br />(name - type - description)                                                                                                            |
| -------------------- | -------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
| <code>default</code> | Customized Column Picker Button content. Specifying a slot with the column value | **column** <code>number</code> - Columns Number to pick.<br />**isSelected** <code>boolean</code> - True if the columns number are the chosen value. |
| <code>divider</code> | 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
button emits the needed events to sync other instances of column pickers or grids with the
number of columns being selected when clicked.

### Default usage

It is required to send the columns prop.

```vue live
<template>
  <BaseColumnPickerList :columns="columns" />
</template>

<script setup>
import { ref } from "vue";
import BaseColumnPickerList from "@empathyco/x-components/js/components/column-picker/base-column-picker-list.vue";

const columns = ref([2, 4, 6]);
</script>
```

### Using v-model

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

```vue live
<template>
  <BaseColumnPickerList :columns="columns" v-model="selectedColumns" />
</template>

<script setup>
import { ref } from "vue";
import BaseColumnPickerList from "@empathyco/x-components/js/components/column-picker/base-column-picker-list.vue";

const columns = ref([2, 4, 6]);
const selectedColumns = ref(4);
</script>
```

### Customized usage

#### Overriding the slots

It is possible to override the column picker button content.

```vue live
<template>
  <BaseColumnPickerList :columns="columns">
    <template #default="{ column, isSelected }">
      <span>{{ column }} {{ isSelected ? "🟢" : "" }}</span>
    </template>
  </BaseColumnPickerList>
</template>

<script setup>
import { ref } from "vue";
import BaseColumnPickerList from "@empathyco/x-components/js/components/column-picker/base-column-picker-list.vue";

const columns = ref([2, 4, 6]);
</script>
```

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

```vue live
<template>
  <BaseColumnPickerList :columns="columns">
    <template #divider>
      <ChevronRightIcon aria-hidden="true" />
    </template>
  </BaseColumnPickerList>
</template>

<script setup>
import { ref } from "vue";
import BaseColumnPickerList from "@empathyco/x-components/js/components/column-picker/base-column-picker-list.vue";
import ChevronRightIcon from "@empathyco/x-components/js/components/icons/chevron-right.vue";

const columns = ref([2, 4, 6]);
</script>
```

#### Customizing the buttons with classes

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

```vue live
<template>
  <BaseColumnPickerList :columns="columns" buttonClass="xds:button-circle" />
</template>

<script setup>
import { ref } from "vue";
import BaseColumnPickerList from "@empathyco/x-components/js/components/column-picker/base-column-picker-list.vue";

const columns = ref([2, 4, 6]);
</script>
```

## Events

A list of events that the component will emit:

- [`UserClickedColumnPicker`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):
  the event is emitted after the user clicks an item. The event payload is the number of columns
  that the clicked item represents.
- [`ColumnsNumberProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):
  the event is emitted on component mount. The event payload is the current `selectedColumns` value.