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';

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

Configuration Options

Option	Type	Description
animation?	ReorderAnimation	Animation type for column movement. - false: No animation, instant reorder - 'flip': FLIP animation (slides columns smoothly) - 'fade': View Transitions API (cross-fade effect)
animationDuration?	number	Animation duration in milliseconds. Applies to FLIP animation. View Transitions use browser defaults.

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

---