Column DnD Table

Drag column headers to reorder them, wired through DataTableColumnDndProvider on top of @dnd-kit. Unlike row DnD, column DnD is safe to combine with sorting, filtering, and virtualization — the user’s column order is independent of the row model.

Overview

PreviewCodeOpen in

View

Employee ID	Name	Department	Role	Location	Status
EMP-001	Alice Johnson	Engineering	Senior Developer	New York	active
EMP-002	Bob Smith	Design	UI Designer	San Francisco	remote
EMP-003	Carol Williams	Marketing	Marketing Lead	Chicago	active
EMP-004	David Brown	Engineering	Backend Developer	Austin	on-leave
EMP-005	Eva Martinez	Product	Product Manager	Seattle	active
EMP-006	Frank Lee	Engineering	DevOps Engineer	Denver	remote
EMP-007	Grace Kim	Design	UX Researcher	Portland	active
EMP-008	Henry Davis	Sales	Account Executive	Boston	active

"use client"

import * as React from "react"
import { DataTableRoot } from "@/components/niko-table/core/data-table-root"
import { DataTable } from "@/components/niko-table/core/data-table"
import { DataTableEmptyBody } from "@/components/niko-table/core/data-table-structure"
import {
  DataTableDndHeader,
  DataTableDndColumnBody,
} from "@/components/niko-table/core/data-table-column-dnd-structure"
import { DataTableColumnDndProvider } from "@/components/niko-table/components/data-table-column-dnd"
import { DataTableColumnResize } from "@/components/niko-table/components/data-table-column-resize"
import {
  DataTableEmptyIcon,
  DataTableEmptyMessage,
  DataTableEmptyTitle,
  DataTableEmptyDescription,
} from "@/components/niko-table/components/data-table-empty-state"
import { DataTableSearchFilter } from "@/components/niko-table/components/data-table-search-filter"
import { DataTableToolbarSection } from "@/components/niko-table/components/data-table-toolbar-section"
import { DataTableViewDndMenu } from "@/components/niko-table/components/data-table-view-dnd-menu"
import type { DataTableColumnDef } from "@/components/niko-table/types"
import { Badge } from "@/components/ui/badge"
import { Inbox } from "lucide-react"

// Types
type Employee = {
  id: string
  name: string
  department: string
  role: string
  location: string
  status: "active" | "on-leave" | "remote"
}

// Sample data
const data: Employee[] = [
  {
    id: "EMP-001",
    name: "Alice Johnson",
    department: "Engineering",
    role: "Senior Developer",
    location: "New York",
    status: "active",
  },
  {
    id: "EMP-002",
    name: "Bob Smith",
    department: "Design",
    role: "UI Designer",
    location: "San Francisco",
    status: "remote",
  },
  {
    id: "EMP-003",
    name: "Carol Williams",
    department: "Marketing",
    role: "Marketing Lead",
    location: "Chicago",
    status: "active",
  },
  {
    id: "EMP-004",
    name: "David Brown",
    department: "Engineering",
    role: "Backend Developer",
    location: "Austin",
    status: "on-leave",
  },
  {
    id: "EMP-005",
    name: "Eva Martinez",
    department: "Product",
    role: "Product Manager",
    location: "Seattle",
    status: "active",
  },
  {
    id: "EMP-006",
    name: "Frank Lee",
    department: "Engineering",
    role: "DevOps Engineer",
    location: "Denver",
    status: "remote",
  },
  {
    id: "EMP-007",
    name: "Grace Kim",
    department: "Design",
    role: "UX Researcher",
    location: "Portland",
    status: "active",
  },
  {
    id: "EMP-008",
    name: "Henry Davis",
    department: "Sales",
    role: "Account Executive",
    location: "Boston",
    status: "active",
  },
]

// Status badge variant helper
const getStatusVariant = (status: Employee["status"]) => {
  switch (status) {
    case "active":
      return "default"
    case "remote":
      return "secondary"
    case "on-leave":
      return "outline"
    default:
      return "secondary"
  }
}

// Column definitions
const columns: DataTableColumnDef<Employee>[] = [
  {
    accessorKey: "id",
    id: "id",
    header: "Employee ID",
    size: 120,
  },
  {
    accessorKey: "name",
    id: "name",
    header: "Name",
    size: 160,
    cell: ({ row }) => (
      <div className="font-medium">{row.getValue("name")}</div>
    ),
  },
  {
    accessorKey: "department",
    id: "department",
    header: "Department",
    size: 140,
  },
  {
    accessorKey: "role",
    id: "role",
    header: "Role",
    size: 170,
  },
  {
    accessorKey: "location",
    id: "location",
    header: "Location",
    size: 140,
  },
  {
    accessorKey: "status",
    id: "status",
    header: "Status",
    size: 110,
    cell: ({ row }) => {
      const status = row.getValue("status") as Employee["status"]
      return <Badge variant={getStatusVariant(status)}>{status}</Badge>
    },
  },
]

const initialColumnOrder = columns.map(c => c.id as string)

export default function ColumnDndExample() {
  const [columnOrder, setColumnOrder] =
    React.useState<string[]>(initialColumnOrder)

  return (
    <DataTableRoot
      data={data}
      columns={columns}
      state={{ columnOrder }}
      onColumnOrderChange={setColumnOrder}
    >
      <DataTableColumnResize />
      <DataTableColumnDndProvider
        columnOrder={columnOrder}
        onColumnOrderChange={setColumnOrder}
      >
        {/*
         * Two reorder surfaces share one `columnOrder`:
         *   1. Drag column headers (DataTableColumnDndProvider)
         *   2. Drag rows in the View menu (DataTableViewDndMenu)
         * Either updates the same state, so both stay in sync.
         */}
        <DataTableToolbarSection className="justify-between">
          <DataTableSearchFilter placeholder="Search employees..." />
          <DataTableViewDndMenu
            columnOrder={columnOrder}
            onColumnOrderChange={setColumnOrder}
            onReset={() => setColumnOrder(initialColumnOrder)}
          />
        </DataTableToolbarSection>
        <DataTable>
          <DataTableDndHeader />
          <DataTableDndColumnBody>
            <DataTableEmptyBody>
              <DataTableEmptyMessage>
                <DataTableEmptyIcon>
                  <Inbox className="size-12" />
                </DataTableEmptyIcon>
                <DataTableEmptyTitle>No employees found</DataTableEmptyTitle>
                <DataTableEmptyDescription>
                  Try a different search.
                </DataTableEmptyDescription>
              </DataTableEmptyMessage>
            </DataTableEmptyBody>
          </DataTableDndColumnBody>
        </DataTable>
      </DataTableColumnDndProvider>
    </DataTableRoot>
  )
}

Preview with Controlled State

PreviewCodeOpen in

View

Employee ID	Name	Department	Role	Location	Status
EMP-001	Alice Johnson	Engineering	Senior Developer	New York	active
EMP-002	Bob Smith	Design	UI Designer	San Francisco	remote
EMP-003	Carol Williams	Marketing	Marketing Lead	Chicago	active
EMP-004	David Brown	Engineering	Backend Developer	Austin	on-leave
EMP-005	Eva Martinez	Product	Product Manager	Seattle	active
EMP-006	Frank Lee	Engineering	DevOps Engineer	Denver	remote
EMP-007	Grace Kim	Design	UX Researcher	Portland	active
EMP-008	Henry Davis	Sales	Account Executive	Boston	active

Column DnD State

Header drag, view-menu drag, visibility toggles, and search — all live state.

Reset

Total Columns:6

Current Order:id → name → department → role → location → status

Hidden:none

Search:—

View Full State

{
  "columnOrder": [
    "id",
    "name",
    "department",
    "role",
    "location",
    "status"
  ],
  "columnVisibility": {},
  "globalFilter": ""
}

"use client"

import * as React from "react"
import type { VisibilityState } from "@tanstack/react-table"
import { DataTableRoot } from "@/components/niko-table/core/data-table-root"
import { DataTable } from "@/components/niko-table/core/data-table"
import { DataTableEmptyBody } from "@/components/niko-table/core/data-table-structure"
import {
  DataTableDndHeader,
  DataTableDndColumnBody,
} from "@/components/niko-table/core/data-table-column-dnd-structure"
import { DataTableColumnDndProvider } from "@/components/niko-table/components/data-table-column-dnd"
import { DataTableColumnResize } from "@/components/niko-table/components/data-table-column-resize"
import {
  DataTableEmptyIcon,
  DataTableEmptyMessage,
  DataTableEmptyTitle,
  DataTableEmptyDescription,
} from "@/components/niko-table/components/data-table-empty-state"
import { DataTableSearchFilter } from "@/components/niko-table/components/data-table-search-filter"
import { DataTableToolbarSection } from "@/components/niko-table/components/data-table-toolbar-section"
import { DataTableViewDndMenu } from "@/components/niko-table/components/data-table-view-dnd-menu"
import type { DataTableColumnDef } from "@/components/niko-table/types"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import {
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import { Inbox } from "lucide-react"

// Types
type Employee = {
  id: string
  name: string
  department: string
  role: string
  location: string
  status: "active" | "on-leave" | "remote"
}

// Sample data
const data: Employee[] = [
  {
    id: "EMP-001",
    name: "Alice Johnson",
    department: "Engineering",
    role: "Senior Developer",
    location: "New York",
    status: "active",
  },
  {
    id: "EMP-002",
    name: "Bob Smith",
    department: "Design",
    role: "UI Designer",
    location: "San Francisco",
    status: "remote",
  },
  {
    id: "EMP-003",
    name: "Carol Williams",
    department: "Marketing",
    role: "Marketing Lead",
    location: "Chicago",
    status: "active",
  },
  {
    id: "EMP-004",
    name: "David Brown",
    department: "Engineering",
    role: "Backend Developer",
    location: "Austin",
    status: "on-leave",
  },
  {
    id: "EMP-005",
    name: "Eva Martinez",
    department: "Product",
    role: "Product Manager",
    location: "Seattle",
    status: "active",
  },
  {
    id: "EMP-006",
    name: "Frank Lee",
    department: "Engineering",
    role: "DevOps Engineer",
    location: "Denver",
    status: "remote",
  },
  {
    id: "EMP-007",
    name: "Grace Kim",
    department: "Design",
    role: "UX Researcher",
    location: "Portland",
    status: "active",
  },
  {
    id: "EMP-008",
    name: "Henry Davis",
    department: "Sales",
    role: "Account Executive",
    location: "Boston",
    status: "active",
  },
]

// Status badge variant helper
const getStatusVariant = (status: Employee["status"]) => {
  switch (status) {
    case "active":
      return "default"
    case "remote":
      return "secondary"
    case "on-leave":
      return "outline"
    default:
      return "secondary"
  }
}

// Column definitions
const columns: DataTableColumnDef<Employee>[] = [
  {
    accessorKey: "id",
    id: "id",
    header: "Employee ID",
    size: 120,
  },
  {
    accessorKey: "name",
    id: "name",
    header: "Name",
    size: 160,
    cell: ({ row }) => (
      <div className="font-medium">{row.getValue("name")}</div>
    ),
  },
  {
    accessorKey: "department",
    id: "department",
    header: "Department",
    size: 140,
  },
  {
    accessorKey: "role",
    id: "role",
    header: "Role",
    size: 170,
  },
  {
    accessorKey: "location",
    id: "location",
    header: "Location",
    size: 140,
  },
  {
    accessorKey: "status",
    id: "status",
    header: "Status",
    size: 110,
    cell: ({ row }) => {
      const status = row.getValue("status") as Employee["status"]
      return <Badge variant={getStatusVariant(status)}>{status}</Badge>
    },
  },
]

const initialColumnOrder = columns.map(c => c.id as string)

export default function ColumnDndStateExample() {
  const [columnOrder, setColumnOrder] =
    React.useState<string[]>(initialColumnOrder)
  const [columnVisibility, setColumnVisibility] =
    React.useState<VisibilityState>({})
  const [globalFilter, setGlobalFilter] = React.useState<string | object>("")

  const resetAll = () => {
    setColumnOrder(initialColumnOrder)
    setColumnVisibility({})
    setGlobalFilter("")
  }

  return (
    <div className="w-full space-y-4">
      <DataTableRoot
        data={data}
        columns={columns}
        state={{ columnOrder, columnVisibility, globalFilter }}
        onColumnOrderChange={setColumnOrder}
        onColumnVisibilityChange={setColumnVisibility}
        onGlobalFilterChange={setGlobalFilter}
      >
        <DataTableColumnResize />
        <DataTableColumnDndProvider
          columnOrder={columnOrder}
          onColumnOrderChange={setColumnOrder}
        >
          {/*
           * Two reorder surfaces share one `columnOrder`:
           *   1. Drag column headers (DataTableColumnDndProvider)
           *   2. Drag rows in the View menu (DataTableViewDndMenu)
           * Either updates the same state, so both stay in sync.
           * The View menu also toggles visibility and exposes a Reset.
           */}
          <DataTableToolbarSection className="justify-between">
            <DataTableSearchFilter placeholder="Search employees..." />
            <DataTableViewDndMenu
              columnOrder={columnOrder}
              onColumnOrderChange={setColumnOrder}
              onReset={resetAll}
            />
          </DataTableToolbarSection>
          <DataTable>
            <DataTableDndHeader />
            <DataTableDndColumnBody>
              <DataTableEmptyBody>
                <DataTableEmptyMessage>
                  <DataTableEmptyIcon>
                    <Inbox className="size-12" />
                  </DataTableEmptyIcon>
                  <DataTableEmptyTitle>No employees found</DataTableEmptyTitle>
                  <DataTableEmptyDescription>
                    Try a different search.
                  </DataTableEmptyDescription>
                </DataTableEmptyMessage>
              </DataTableEmptyBody>
            </DataTableDndColumnBody>
          </DataTable>
        </DataTableColumnDndProvider>
      </DataTableRoot>

      {/* State Display */}
      <Card>
        <CardHeader>
          <CardTitle>Column DnD State</CardTitle>
          <CardDescription>
            Header drag, view-menu drag, visibility toggles, and search — all
            live state.
          </CardDescription>
          <CardAction>
            <Button variant="outline" size="sm" onClick={resetAll}>
              Reset
            </Button>
          </CardAction>
        </CardHeader>
        <CardContent>
          <div className="grid gap-2 text-xs text-muted-foreground">
            <div className="flex justify-between">
              <span className="font-medium">Total Columns:</span>
              <span className="text-foreground">{columnOrder.length}</span>
            </div>
            <div className="flex justify-between">
              <span className="font-medium">Current Order:</span>
              <span className="text-foreground">{columnOrder.join(" → ")}</span>
            </div>
            <div className="flex justify-between">
              <span className="font-medium">Hidden:</span>
              <span className="text-foreground">
                {Object.entries(columnVisibility)
                  .filter(([, v]) => !v)
                  .map(([k]) => k)
                  .join(", ") || "none"}
              </span>
            </div>
            <div className="flex justify-between">
              <span className="font-medium">Search:</span>
              <span className="text-foreground">
                {typeof globalFilter === "string" && globalFilter
                  ? globalFilter
                  : "—"}
              </span>
            </div>
          </div>

          <details className="mt-4 border-t pt-4">
            <summary className="cursor-pointer text-xs font-medium hover:text-foreground">
              View Full State
            </summary>
            <pre className="mt-2 overflow-auto rounded bg-muted p-2 text-xs">
              {JSON.stringify(
                { columnOrder, columnVisibility, globalFilter },
                null,
                2,
              )}
            </pre>
          </details>
        </CardContent>
      </Card>
    </div>
  )
}

Virtualized Column DnD

For large datasets, use DataTableVirtualizedDndHeader and DataTableVirtualizedDndColumnBody which combine row virtualization with column drag-and-drop. Same <DataTableColumnResize /> marker — drag a header to reorder, drag the edge grip to resize (grip stops propagation so it won’t start a reorder).

PreviewCodeOpen in

View

Employee ID	Name	Email	Department	Role	Location	Status	Salary

"use client"

import * as React from "react"
import { DataTableRoot } from "@/components/niko-table/core/data-table-root"
import { DataTable } from "@/components/niko-table/core/data-table"
import { DataTableVirtualizedEmptyBody } from "@/components/niko-table/core/data-table-virtualized-structure"
import {
  DataTableVirtualizedDndHeader,
  DataTableVirtualizedDndColumnBody,
} from "@/components/niko-table/core/data-table-virtualized-column-dnd-structure"
import { DataTableColumnDndProvider } from "@/components/niko-table/components/data-table-column-dnd"
import { DataTableColumnResize } from "@/components/niko-table/components/data-table-column-resize"
import {
  DataTableEmptyIcon,
  DataTableEmptyMessage,
  DataTableEmptyTitle,
  DataTableEmptyDescription,
} from "@/components/niko-table/components/data-table-empty-state"
import { DataTableSearchFilter } from "@/components/niko-table/components/data-table-search-filter"
import { DataTableToolbarSection } from "@/components/niko-table/components/data-table-toolbar-section"
import { DataTableViewDndMenu } from "@/components/niko-table/components/data-table-view-dnd-menu"
import type { DataTableColumnDef } from "@/components/niko-table/types"
import { Badge } from "@/components/ui/badge"
import { Inbox } from "lucide-react"

// Types
type Employee = {
  id: string
  name: string
  email: string
  department: string
  role: string
  location: string
  status: "active" | "on-leave" | "remote"
  salary: number
}

// Generate large dataset for virtualization demo
const generateEmployees = (count: number): Employee[] => {
  const firstNames = [
    "Alice",
    "Bob",
    "Carol",
    "David",
    "Eva",
    "Frank",
    "Grace",
    "Henry",
    "Ivy",
    "Jack",
    "Karen",
    "Leo",
    "Mia",
    "Noah",
    "Olivia",
    "Paul",
    "Quinn",
    "Ruby",
    "Sam",
    "Tina",
  ]
  const lastNames = [
    "Johnson",
    "Smith",
    "Williams",
    "Brown",
    "Martinez",
    "Lee",
    "Kim",
    "Davis",
    "Wilson",
    "Taylor",
    "Anderson",
    "Thomas",
    "Jackson",
    "White",
    "Harris",
  ]
  const departments = [
    "Engineering",
    "Design",
    "Marketing",
    "Sales",
    "Product",
    "HR",
    "Finance",
    "Operations",
  ]
  const roles = [
    "Senior Developer",
    "UI Designer",
    "Marketing Lead",
    "Backend Developer",
    "Product Manager",
    "DevOps Engineer",
    "UX Researcher",
    "Account Executive",
    "Data Analyst",
    "QA Engineer",
  ]
  const locations = [
    "New York",
    "San Francisco",
    "Chicago",
    "Austin",
    "Seattle",
    "Denver",
    "Portland",
    "Boston",
    "Miami",
    "Atlanta",
  ]
  const statuses: Employee["status"][] = ["active", "on-leave", "remote"]

  return Array.from({ length: count }, (_, i) => {
    const firstName = firstNames[i % firstNames.length]
    const lastName = lastNames[(i * 3) % lastNames.length]
    return {
      id: `EMP-${String(i + 1).padStart(4, "0")}`,
      name: `${firstName} ${lastName}`,
      email: `${firstName.toLowerCase()}.${lastName.toLowerCase()}${i}@company.com`,
      department: departments[i % departments.length],
      role: roles[(i * 5) % roles.length],
      location: locations[(i * 7) % locations.length],
      status: statuses[i % statuses.length],
      salary: 50000 + ((i * 1337) % 100000),
    }
  })
}

const data = generateEmployees(500)

// Status badge variant helper
const getStatusVariant = (status: Employee["status"]) => {
  switch (status) {
    case "active":
      return "default"
    case "remote":
      return "secondary"
    case "on-leave":
      return "outline"
    default:
      return "secondary"
  }
}

// Column definitions — all columns need explicit `id` for column ordering
const columns: DataTableColumnDef<Employee>[] = [
  {
    accessorKey: "id",
    id: "id",
    header: "Employee ID",
    size: 120,
  },
  {
    accessorKey: "name",
    id: "name",
    header: "Name",
    size: 170,
    cell: ({ row }) => (
      <div className="font-medium">{row.getValue("name")}</div>
    ),
  },
  {
    accessorKey: "email",
    id: "email",
    header: "Email",
    size: 250,
    cell: ({ row }) => (
      <div className="text-muted-foreground">{row.getValue("email")}</div>
    ),
  },
  {
    accessorKey: "department",
    id: "department",
    header: "Department",
    size: 140,
  },
  {
    accessorKey: "role",
    id: "role",
    header: "Role",
    size: 170,
  },
  {
    accessorKey: "location",
    id: "location",
    header: "Location",
    size: 140,
  },
  {
    accessorKey: "status",
    id: "status",
    header: "Status",
    size: 110,
    cell: ({ row }) => {
      const status = row.getValue("status") as Employee["status"]
      return <Badge variant={getStatusVariant(status)}>{status}</Badge>
    },
  },
  {
    accessorKey: "salary",
    id: "salary",
    header: "Salary",
    size: 120,
    cell: ({ row }) => {
      const salary = row.getValue("salary") as number
      return <div className="font-mono">${salary.toLocaleString()}</div>
    },
  },
]

const initialColumnOrder = columns.map(c => c.id as string)

export default function VirtualizedColumnDndExample() {
  const [columnOrder, setColumnOrder] =
    React.useState<string[]>(initialColumnOrder)

  return (
    <DataTableRoot
      data={data}
      columns={columns}
      state={{ columnOrder }}
      onColumnOrderChange={setColumnOrder}
    >
      <DataTableColumnResize />
      <DataTableColumnDndProvider
        columnOrder={columnOrder}
        onColumnOrderChange={setColumnOrder}
      >
        {/*
         * Two reorder surfaces, one state — header drag and view-menu drag
         * both update the same `columnOrder`. Search filters the 500-row
         * virtualized dataset on the fly.
         */}
        <DataTableToolbarSection className="justify-between">
          <DataTableSearchFilter placeholder="Search employees..." />
          <DataTableViewDndMenu
            columnOrder={columnOrder}
            onColumnOrderChange={setColumnOrder}
            onReset={() => setColumnOrder(initialColumnOrder)}
          />
        </DataTableToolbarSection>
        <DataTable height={500}>
          <DataTableVirtualizedDndHeader />
          <DataTableVirtualizedDndColumnBody estimateSize={40} overscan={10}>
            <DataTableVirtualizedEmptyBody>
              <DataTableEmptyMessage>
                <DataTableEmptyIcon>
                  <Inbox className="size-12" />
                </DataTableEmptyIcon>
                <DataTableEmptyTitle>No employees found</DataTableEmptyTitle>
                <DataTableEmptyDescription>
                  Try a different search.
                </DataTableEmptyDescription>
              </DataTableEmptyMessage>
            </DataTableVirtualizedEmptyBody>
          </DataTableVirtualizedDndColumnBody>
        </DataTable>
      </DataTableColumnDndProvider>
    </DataTableRoot>
  )
}

Introduction

Column DnD lets users reorder table columns by dragging headers. Built with @dnd-kit and composable primitives following the shadcn/ui open-code pattern.

Installation

Install the DataTable core and column DnD add-ons. Add data-table-view-dnd-menu and data-table-search-filter for the toolbar shown in the example:

pnpmnpmyarnbun

pnpm dlx shadcn@latest add @niko-table/data-table @niko-table/data-table-column-dnd @niko-table/data-table-column-resize @niko-table/data-table-view-dnd-menu @niko-table/data-table-search-filter @niko-table/data-table-virtualized @niko-table/data-table-virtualized-column-dnd

First time using @niko-table? See the Installation Guide to set up the registry.

For other add-ons or manual copy-paste, see the Installation Guide.

Basic Column DnD

Three components work together:

1. DataTableColumnDndProvider — Wraps the table with horizontal DnD context
2. DataTableDndHeader — Renders headers as draggable items
3. DataTableDndColumnBody — Cells follow column drag position

column-dnd.tsx

import {
  DataTableDndHeader,
  DataTableDndColumnBody,
} from "@/components/niko-table/core/data-table-column-dnd-structure"

const [columnOrder, setColumnOrder] = React.useState<string[]>(() =>
  columns.map(c => c.id as string),
)

return (
  <DataTableRoot
    data={data}
    columns={columns}
    state={{ columnOrder }}
    onColumnOrderChange={setColumnOrder}
  >
    <DataTableColumnResize />
    <DataTableColumnDndProvider
      columnOrder={columnOrder}
      onColumnOrderChange={setColumnOrder}
    >
      <DataTable>
        <DataTableDndHeader />
        <DataTableDndColumnBody />
      </DataTable>
    </DataTableColumnDndProvider>
  </DataTableRoot>
)

Two Reorder Surfaces, One State

DataTableViewDndMenu is a drag-to-reorder variant of the View menu that shares the same columnOrder state as the column-header drag. Users get two ways to reorder, and visibility toggles + a Reset live in the same dropdown:

column-dnd.tsx

<DataTableToolbarSection className="justify-between">
  <DataTableSearchFilter placeholder="Search employees..." />
  <DataTableViewDndMenu
    columnOrder={columnOrder}
    onColumnOrderChange={setColumnOrder}
    onReset={() => setColumnOrder(initialColumnOrder)}
  />
</DataTableToolbarSection>

Use DataTableViewMenu (no DnD) instead if you don’t need drag-to-reorder — it skips the @dnd-kit/* bundle.

Key Points

• Every column needs an explicit id field for column order tracking
• columnOrder state must be passed to both DataTableRoot and DataTableColumnDndProvider — and DataTableViewDndMenu if you use it
• Headers are draggable by default — grab any header to reorder
• Safe to combine with sorting and filtering — column order is independent of data order, unlike Row DnD
• DataTableViewDndMenu and the column-header drag share state, so both surfaces stay in lockstep

When to Use

✅ Use Column DnD when:

• Users want to customize their table layout
• Different users prefer different column arrangements
• Building configurable dashboards

❌ Consider other options when:

• Column order is fixed by design
• Tables have very few columns

Next Steps

• Row DnD Table — Drag-and-drop row reordering
• Virtualization Table — Virtual scrolling for large datasets
• Column Pinning Table — Pin columns to edges