---

title: BaseColumnPickerDropdown

---

# 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       |
| ----------------------- | -------------------------------------------------------------------- | --------------------- | ------------- |
| <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>animation</code>  | The transition to use for opening and closing the dropdown.          | <code></code>         | <code></code> |

## Events

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

## Slots

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

## Events

An event 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 in the dropdown. 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, and whenever the value changes. The event payload is the
  current `selectedColumns` value.

## Examples

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

```vue live
<template>
  <BaseColumnPickerDropdown v-model="selectedColumns" :columns="[2, 4, 6]">
    <template #item="{ item, isSelected, isHighlighted }">
      <span v-if="isHighlighted">🟢</span>
      <span v-if="isSelected">✅</span>
      <span>{{ item }}</span>
    </template>
  </BaseColumnPickerDropdown>
</template>

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

const selectedColumns = ref(2);
</script>
```

#### Customizing toggle button

```vue live
<template>
  <BaseColumnPickerDropdown v-model="selectedColumns" :columns="[2, 4, 6]">
    <template #toggle="{ item, isOpen }"
      >Selected: {{ item }} {{ isOpen ? "🔼" : "🔽" }}️</template
    >
    <template #item="{ item, isSelected, isHighlighted }">
      <span v-if="isHighlighted">🟢</span>
      <span v-if="isSelected">✅</span>
      <span>{{ item }}</span>
    </template>
  </BaseColumnPickerDropdown>
</template>

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

const selectedColumns = ref(2);
</script>
```

#### 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.

```vue live
<template>
  <BaseColumnPickerDropdown :columns="[2, 4, 6]">
    <template #toggle="{ item, isOpen }"
      >Selected: {{ item }} {{ isOpen ? "🔼" : "🔽" }}️</template
    >
    <template #item="{ item, isSelected, isHighlighted }">
      <span v-if="isHighlighted">🟢</span>
      <span v-if="isSelected">✅</span>
      <span>{{ item }}</span>
    </template>
  </BaseColumnPickerDropdown>
</template>

<script setup>
import BaseColumnPickerDropdown from "@empathyco/x-components/js/components/column-picker/base-column-picker-dropdown.vue";
</script>
```