1 min read

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
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:

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

<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>
  import { BaseColumnPickerDropdown } from '@empathyco/x-components';
  export default {
    name: 'BaseColumnPickerDropdownTest',
    components: {
      BaseColumnPickerDropdown
    },
    data() {
      return {
        selectedColumns: 2
      };
    }
  };
</script>

Customizing toggle button

<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>
  import { BaseColumnPickerDropdown } from '@empathyco/x-components';
  export default {
    name: 'BaseColumnPickerDropdownTest',
    components: {
      BaseColumnPickerDropdown
    },
    data() {
      return {
        selectedColumns: 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.

<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>
  import { BaseColumnPickerDropdown } from '@empathyco/x-components';
  export default {
    name: 'BaseColumnPickerDropdownTest',
    components: {
      BaseColumnPickerDropdown
    }
  };
</script>