Column select

A button that opens a checkbox dropdown for toggling grid columns on and off. Bind ngModel to a ColumnFilterOption[] directly, or hand it cacheKey + columns and it will build the list itself and persist ticks to localStorage.

bk-column-selectForms and inputsAngular

The dropdown is positioned absolute right-0 against its own template root, which is a block element. Always place <bk-column-select> inside an inline-block (or flex/inline) wrapper, otherwise it stretches to the width of its parent and the dropdown opens away from the button.

Interactive playground

With autoFlip on, shrink the window or scroll so the button is near an edge, the dropdown flips to the opposite side automatically.

Event log

Open the dropdown and tick a column to see emitted events.

Examples

Basic

Not searchable. Value: [ { "columnName": "Name", "selected": true }, { "columnName": "Email", "selected": true }, { "columnName": "Phone", "selected": true }, { "columnName": "Status", "selected": true } ]

Searchable, many columns

searchable adds a filter input above the list.

Mixed initial state

Some columns start unticked, pass a ColumnFilterOption[] with selected: false where needed.

Persisted via cacheKey

No initial value passed, cacheKey + columns let the component build the list and remember ticks in localStorage across reloads.

Custom label

label and lefticon control the trigger button's text and icon.

Position

bottom-right `(default)`

autoFlip is set to false on these four so each one always opens on the requested corner, leave it at its default true in real usage so the vertical and horizontal side each flip independently instead of overflowing the viewport.

Usage

bk-column-select is a ControlValueAccessor, so it works with ngModel or formControlName. The bound value is a ColumnFilterOption[], one { columnName, selected } per column.

// component.ts
import { ColumnFilterOption } from './shared/components/column-select/models/column-filter-option';

columns: string[] = ['Name', 'Email', 'Phone', 'Status'];
columnsFilterList: ColumnFilterOption[] = this.columns.map(c => new ColumnFilterOption(c, true));
isColumnFilterOpened = false;

onColumnsFilterChanged(list: ColumnFilterOption[]): void {
  // list carries every column with its current .selected state
}

// template - wrap in an inline-block/w-fit container so the dropdown
// hugs the button instead of stretching to the parent's full width.
<div class="inline-block">
  <bk-column-select
    [(ngModel)]="columnsFilterList"
    [searchable]="true"
    [(isOpened)]="isColumnFilterOpened"
    position="bottom-right"
    [autoFlip]="true"
    (ngModelChange)="onColumnsFilterChanged($event)">
  </bk-column-select>
</div>

// position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
// - which corner of the button the dropdown opens from. autoFlip
// (default true) flips each axis independently (above/below, left/right)
// when the viewport doesn't have room for the requested corner.

Persisting with cacheKey

Use columnFilterService.showColumn(name, list) in the grid template to decide whether to render a given column's <th>/<td>.

// component.ts
// No initial value needed - pass cacheKey + columns and the component
// builds the ColumnFilterOption[] itself, persisting ticks to
// localStorage under cacheKey so the choice survives a reload.
columns: string[] = ['Order No', 'Customer', 'Amount', 'Status', 'Created Date'];
columnFilterKey = 'orders-grid-columns';
columnsFilterList: ColumnFilterOption[] = [];

// template
<div class="inline-block">
  <bk-column-select
    [(ngModel)]="columnsFilterList"
    [cacheKey]="columnFilterKey"
    [columns]="columns"
    [searchable]="true">
  </bk-column-select>
</div>

// In the grid, hide/show a <th>/<td> with the service:
columnFilterService.showColumn('Amount', this.columnsFilterList)

API reference

Inputs <`bk-column-select`>

Name	Type	Default	Possible values	Description
`ngModel`	`ColumnFilterOption[]`	`[]`	array of { columnName, selected }	Bound via ControlValueAccessor, works with `ngModel` or `formControlName`. Empty when cacheKey + columns are set instead (see below).
`columns`	`string[]`	`[]`	array of column names	Column names available to toggle. Required alongside cacheKey for the component to build the list itself.
`cacheKey`	`string`	–	any string	localStorage key. When set with columns, ticks persist and survive a reload, see BkColumnFilterService.
`searchable`	`boolean`	`false`	`true \| false`	Shows a search input above the column list to filter it.
`isOpened`	`boolean`	`false`	`true \| false`	Two-way bound (`[(isOpened)]`), whether the dropdown panel is shown.
`label`	`string`	`'Columns'`	any text	Text on the trigger button.
`lefticon`	`string`	`'assets/icons/columns-black.svg'`	any icon path	Icon on the trigger button.
`buttonClass`	`string`	`''`	any classes	Extra classes appended to the trigger button.
`position`	`BkColumnSelectPosition`	`'bottom-right'`	`'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right'`	Corner of the trigger button the dropdown opens from.
`autoFlip`	`boolean`	`true`	`true \| false`	Flips the vertical and horizontal side independently when the requested corner doesn't have viewport room.

Outputs <`bk-column-select`>

Name	Payload	Fires when
`ngModelChange`	`ColumnFilterOption[]`	A checkbox is ticked or unticked. Not emitted on search.
`isOpenedChange`	`boolean`	The dropdown opens or closes (trigger click, or an outside click while open).