ReorderPlugin

Column Reorder Plugin for tbw-grid

Lets users rearrange columns by dragging and dropping column headers. Supports smooth FLIP animations, fade transitions, or instant reordering. Animation respects the grid-level animation.mode setting.

Installation

import { ReorderPlugin } from '@toolbox-web/grid/plugins/reorder-columns';

Configuration Options

Option	Type	Default	Description
animation	false | 'flip' | 'fade'	'flip'	Animation type for column moves
animationDuration	number	200	Animation duration in ms

Keyboard Shortcuts

Key	Action
Alt + ←	Move focused column left
Alt + →	Move focused column right

Events

Event	Detail	Cancelable	Description
column-move	{ field, fromIndex, toIndex, columnOrder }	Yes	Fired when a column move is attempted

Examples

Basic Drag-and-Drop Reordering

import { queryGrid } from '@toolbox-web/grid';
import { ReorderPlugin } from '@toolbox-web/grid/plugins/reorder-columns';

const grid = queryGrid('tbw-grid');
grid.gridConfig = {
  columns: [
    { field: 'id', header: 'ID' },
    { field: 'name', header: 'Name' },
    { field: 'email', header: 'Email' },
  ],
  plugins: [new ReorderPlugin({ animation: 'flip', animationDuration: 200 })],
};

// Persist column order
grid.on('column-move', ({ columnOrder }) => {
  localStorage.setItem('columnOrder', JSON.stringify(columnOrder));
});

Prevent Moves That Break Group Boundaries

grid.on('column-move', (detail, e) => {
  if (!isValidMoveWithinGroup(detail.field, detail.fromIndex, detail.toIndex)) {
    e.preventDefault(); // Column snaps back to original position
  }
});

See Also

• ReorderConfig for all configuration options
• ColumnMoveDetail for the event detail structure
• GroupingColumnsPlugin for column group integration

Extends BaseGridPlugin

Inherited methods like attach(), detach(), afterRender(), etc. are documented in the base class.

Accessors

animationDuration

Get animation duration, allowing plugin config override. Uses base class animationDuration for default.

readonly animationDuration: number

---

Methods

getColumnOrder()

Get the current column order from the grid.

getColumnOrder(): string[]

Returns

string[] - Array of field names in display order

---

moveColumn()

Move a column to a new position.

moveColumn(field: string, toIndex: number): void

Parameters

Name	Type	Description
field	string	The field name of the column to move
toIndex	number	The target index

---

setColumnOrder()

Set a specific column order.

setColumnOrder(order: string[]): void

Parameters

Name	Type	Description
order	string[]	Array of field names in desired order

---

resetColumnOrder()

Reset column order to the original configuration order.

resetColumnOrder(): void

---