ColumnPicker

Multi-select columns with drag-and-drop reordering

Overview

ColumnPicker allows users to select which columns to display in a data table. Columns are organized by category with optional icons. When reordering is enabled, selected columns can be rearranged via drag-and-drop. Ideal for customizable table views in the Universal Data Engine.

Key Features

Grouped column selection by category
Search filtering across all columns
Drag-and-drop reordering of selected columns
Visual feedback with category icons
Accessible checkbox-based selection
Column descriptions on hover

Interactive Examples

Basic Usage

Click a column to toggle selection. Columns are grouped by category.

Selected: None

Pre-selected Columns

Selected columns are highlighted. Use the search to filter available columns.

Name

Status

Selected: user.name, user.email, membership.status

With Drag & Drop Reordering

Drag selected columns to reorder them. Order is preserved when columns are toggled.

Name

Role

Completion Rate

Order: user.name → user.email → membership.role → metrics.completionRate

Disabled State

When disabled, columns cannot be selected or reordered.

Name

Interfaces

ColumnGroup

Prop	Type	Description
`id`	`string`	Unique identifier for the group
`name`	`string`	Display name for the group header
`icon`	`IconDefinition?`	Optional icon for the group header
`fields`	`ColumnField[]`	Array of column fields within this group

ColumnField

Prop	Type	Description
`id`	`string`	Unique identifier for the column
`path`	`string`	Data path for the column (e.g., "user.name")
`label`	`string`	Display label for the column
`fieldType`	`string`	Field type (TEXT, NUMBER, DATE, etc.)
`category`	`string`	Category the column belongs to
`description`	`string?`	Optional description shown on hover

Props Reference

Prop	Type	Default	Description
`groups`	`ColumnGroup[]`	`required`	Array of column groups containing fields
`selected`	`string[]`	`required`	Array of currently selected column paths
`onChange`	`(selected: string[]) => void`	`required`	Callback when selection changes
`allowReorder`	`boolean`	`false`	Enable drag-and-drop reordering
`placeholder`	`string`	`-`	Search placeholder text
`disabled`	`boolean`	`false`	Disable all interactions
`className`	`string`	`-`	Additional CSS classes

Usage

import { ColumnPicker, type ColumnGroup } from '@/ui/components';
import { faUser, faCalendar } from '@fortawesome/duotone-regular-svg-icons';

// Define column groups
const groups: ColumnGroup[] = [
  {
    id: 'account',
    name: 'Account',
    icon: faUser,
    fields: [
      { id: 'name', path: 'user.name', label: 'Name', fieldType: 'TEXT', category: 'account' },
      { id: 'email', path: 'user.email', label: 'Email', fieldType: 'EMAIL', category: 'account' },
    ],
  },
  {
    id: 'membership',
    name: 'Membership',
    icon: faCalendar,
    fields: [
      { id: 'joinedAt', path: 'membership.joinedAt', label: 'Joined Date', fieldType: 'DATE', category: 'membership' },
    ],
  },
];

// Usage in component
const [selected, setSelected] = useState<string[]>(['user.name', 'user.email']);

<ColumnPicker
  groups={groups}
  selected={selected}
  onChange={setSelected}
  allowReorder
/>

Prop

Type

Description

id

string

Unique identifier for the group

name

string

Display name for the group header

icon

IconDefinition?

Optional icon for the group header

fields

ColumnField[]

Array of column fields within this group

Prop

Type

Description

id

string

Unique identifier for the column

path

string

Data path for the column (e.g., "user.name")

label

string

Display label for the column

fieldType

string

Field type (TEXT, NUMBER, DATE, etc.)

category

string

Category the column belongs to

description

string?

Optional description shown on hover

Prop

Type

Default

Description

groups

ColumnGroup[]

required

Array of column groups containing fields

selected

string[]

required

Array of currently selected column paths

onChange

(selected: string[]) => void

required

Callback when selection changes

allowReorder

boolean

false

Enable drag-and-drop reordering

placeholder

string

-

Search placeholder text

disabled

boolean

false

Disable all interactions

className

string

-

Additional CSS classes

import { ColumnPicker, type ColumnGroup } from '@/ui/components'; import { faUser, faCalendar } from '@fortawesome/duotone-regular-svg-icons'; // Define column groups const groups: ColumnGroup[] = [ { id: 'account', name: 'Account', icon: faUser, fields: [ { id: 'name', path: 'user.name', label: 'Name', fieldType: 'TEXT', category: 'account' }, { id: 'email', path: 'user.email', label: 'Email', fieldType: 'EMAIL', category: 'account' }, ], }, { id: 'membership', name: 'Membership', icon: faCalendar, fields: [ { id: 'joinedAt', path: 'membership.joinedAt', label: 'Joined Date', fieldType: 'DATE', category: 'membership' }, ], }, ]; // Usage in component const [selected, setSelected] = useState<string[]>(['user.name', 'user.email']); <ColumnPicker groups={groups} selected={selected} onChange={setSelected} allowReorder />