2 min read

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

<template>
  <BaseColumnPickerList :columns="columns" />
</template>
<script>
  import { BaseColumnPickerList } from '@empathyco/xcomponents';
  export default {
    components: {
      BaseColumnPickerList
    },
    data() {
      return { columns: [2, 4, 6] };
    }
  };
</script>

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.

<template>
  <BaseColumnPickerList :columns="columns" v-model="selectedColumns" />
</template>
<script>
  import { BaseColumnPickerList } from '@empathyco/xcomponents';
  export default {
    components: {
      BaseColumnPickerList
    },
    data() {
      return { columns: [2, 4, 6], selectedColumns: 4 };
    }
  };
</script>

Customized usage

Overriding the slots

It is possible to override the column picker button content.

<template>
  <BaseColumnPickerList :columns="columns" #default="{ column, isSelected }">
    <span>{{ column }} {{ isSelected ? '🟢' : '' }}</span>
  </BaseColumnPickerList>
</template>
<script>
  import { BaseColumnPickerList } from '@empathyco/xcomponents';
  export default {
    components: {
      BaseColumnPickerList
    },
    data() {
      return { columns: [2, 4, 6] };
    }
  };
</script>

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

<template>
  <BaseColumnPickerList :columns="columns">
    <template #divider>
      <ChevronRightIcon aria-hidden="true" />
    </template>
  </BaseColumnPickerList>
</template>
<script>
  import { BaseColumnPickerList, ChevronRightIcon } from '@empathyco/xcomponents';
  export default {
    components: {
      BaseColumnPickerList,
      ChevronRightIcon
    },
    data() {
      return { columns: [2, 4, 6] };
    }
  };
</script>

Customizing the buttons with classes

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

<template>
  <BaseColumnPickerList :columns="columns" buttonClass="x-button--round" />
</template>
<script>
  import { BaseColumnPickerList } from '@empathyco/xcomponents';
  export default {
    components: {
      BaseColumnPickerList
    },
    data() {
      return { columns: [2, 4, 6] };
    }
  };
</script>

Events

A list of events that the component will emit: