Column Reorder Plugin

The Reorder plugin lets users rearrange columns by dragging and dropping column headers. Supports smooth FLIP animations, fade transitions, or instant reordering depending on your preference.

Installation

import '@toolbox-web/grid/features/reorder-columns';

Basic Usage

Just enable the feature and columns become draggable. Users can grab any column header and drop it in a new position. Visual feedback and smooth animations are handled automatically.

TypeScript

import { queryGrid } from '@toolbox-web/grid';

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

// Listen for column moves
grid.on('column-move', ({ field, fromIndex, toIndex }) => {
  console.log(`Moved ${field} from ${fromIndex} to ${toIndex}`);
});

React

import '@toolbox-web/grid-react/features/reorder-columns';
import { DataGrid } from '@toolbox-web/grid-react';

function MyGrid({ data }) {
  return (
    <DataGrid
      rows={data}
      columns={[
        { field: 'id', header: 'ID' },
        { field: 'name', header: 'Name' },
        { field: 'email', header: 'Email' },
        { field: 'department', header: 'Department' },
      ]}
      reorderColumns={{ animation: 'flip' }}
      onColumnMove={(e) => console.log(`Moved ${e.detail.field} from ${e.detail.fromIndex} to ${e.detail.toIndex}`)}
    />
  );
}

Vue

<script setup>
import '@toolbox-web/grid-vue/features/reorder-columns';
import { TbwGrid, TbwGridColumn } from '@toolbox-web/grid-vue';

const data = [
  { id: 1, name: 'Alice', email: 'alice@example.com', department: 'Engineering' },
  { id: 2, name: 'Bob', email: 'bob@example.com', department: 'Marketing' },
];
</script>

<template>
  <TbwGrid :rows="data" :reorder-columns="{ animation: 'flip' }" @column-move="(e) => console.log('Column moved:', e.detail)">
    <TbwGridColumn field="id" header="ID" />
    <TbwGridColumn field="name" header="Name" />
    <TbwGridColumn field="email" header="Email" />
    <TbwGridColumn field="department" header="Department" />
  </TbwGrid>
</template>

Angular

// Feature import - enables the [reorder] input
import { GridReorderColumnsDirective } from '@toolbox-web/grid-angular/features/reorder-columns';
import { Component } from '@angular/core';
import { Grid } from '@toolbox-web/grid-angular';
import type { ColumnConfig } from '@toolbox-web/grid';

@Component({
  selector: 'app-my-grid',
  imports: [Grid, GridReorderColumnsDirective],
  template: `
    <tbw-grid
      [rows]="rows"
      [columns]="columns"
      [reorderColumns]="{ animation: 'flip' }"
      (column-move)="onColumnMove($event)"
      style="height: 400px; display: block;">
    </tbw-grid>
  `,
})
export class MyGridComponent {
  rows = [...];

  columns: ColumnConfig[] = [
    { field: 'id', header: 'ID' },
    { field: 'name', header: 'Name' },
    { field: 'email', header: 'Email' },
    { field: 'department', header: 'Department' },
  ];

  onColumnMove(e: CustomEvent) {
    console.log(`Moved ${e.detail.field} from ${e.detail.fromIndex} to ${e.detail.toIndex}`);
  }
}

Demos

Default Reorder

REORDER

Animation Reorder animation style

flipslidefadenone

Duration (ms) Animation duration in ms

200

Show source

Drag column headers to reorder them. Use the controls below to experiment with different animation types and durations.

Configuration Options

See ReorderConfig for the full list of options and defaults.

Animation Examples

// No animation - instant reorder
features: { reorderColumns: { animation: false } }

// FLIP animation with custom duration
features: { reorderColumns: { animation: 'flip', animationDuration: 300 } }

// View Transitions API fade effect
features: { reorderColumns: { animation: 'fade' } }

Locking Individual Columns

Set lockPosition: true on any column to prevent users from dragging it — both in the header row and in the Column Visibility panel. Programmatic reorder via grid.setColumnOrder() still works.

columns: [
  { field: 'id', header: 'ID', lockPosition: true }, // cannot be moved
  { field: 'name', header: 'Name' },
  { field: 'email', header: 'Email' },
]

Events

Drag column headers to reorder them.

Event Log: Clear

Show source

Event	Detail	Cancelable	Description
column-move	{ field, fromIndex, toIndex, columnOrder }	Yes	Fired when a column move is attempted. Call preventDefault() to block the move.

Keyboard Shortcuts

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

Column Group Drag

When Column Grouping is also active, group header cells become draggable. Dragging a group header moves all columns in that fragment as a block. If a group is fragmented (split across non-contiguous positions), each fragment can be dragged independently.

See Also

• Pinned Columns — Sticky columns
• Column Visibility — Show/hide columns
• Column Groups — Group column headers