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.

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}`);
});

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}`)}
    />
  );
}

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

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

const gridRef = ref(null);

useGridEvent(gridRef, 'column-move', (e) => {
  console.log('Column moved:', e.detail);
});
</script>

<template>
  <TbwGrid ref="gridRef" :rows="data" :reorder-columns="{ animation: 'flip' }">
    <TbwGridColumn field="id" header="ID" />
    <TbwGridColumn field="name" header="Name" />
    <TbwGridColumn field="email" header="Email" />
    <TbwGridColumn field="department" header="Department" />
  </TbwGrid>
</template>

// Feature import - enables the [reorder] input
import '@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],
  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

Duration (ms) Animation duration in ms

<tbw-grid style="height: 350px;"></tbw-grid>

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

const sampleData = [
  { id: 1, name: 'Alice', department: 'Engineering', email: 'alice@example.com', salary: 95000 },
  { id: 2, name: 'Bob', department: 'Marketing', email: 'bob@example.com', salary: 75000 },
  { id: 3, name: 'Carol', department: 'Engineering', email: 'carol@example.com', salary: 105000 },
];
const columns = [
  { field: 'id', header: 'ID', type: 'number' },
  { field: 'name', header: 'Name' },
  { field: 'department', header: 'Department' },
  { field: 'email', header: 'Email' },
  { field: 'salary', header: 'Salary', type: 'number' },
];

const grid = queryGrid('tbw-grid')!;

function rebuild(animation = 'flip', animationDuration = 200) {
  grid.gridConfig = {
    columns,
    features: { reorderColumns: { animation, animationDuration } as any },
  };
  grid.rows = sampleData;
}

rebuild();

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

Events

Drag column headers to reorder them.

Event Log:

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