Implementing Custom Header for Drag-and-Drop Ordering

Create a custom header component that integrates with React DnD (Drag and Drop) for a more intuitive and visually appealing column ordering experience.

import { useDrag, useDrop } from 'react-dnd';

// Custom Header component
const DraggableHeader = ({ header, index, moveColumn }) => {
  const [, drag] = useDrag(() => ({
    type: 'column',
    item: { index }
  }), [index]);

  const [, drop] = useDrop(() => ({
    accept: 'column',
    hover(item) {
      if (item.index !== index) {
        moveColumn(item.index, index);
        item.index = index; // Update the index for real-time dragging
      }
    }
  }), [index, moveColumn]);

  return (
    <th ref={(node) => drag(drop(node))}>
      {header}
    </th>
  );
};

This code defines a DraggableHeader component that uses the useDrag and useDrop hooks from react-dnd for dragging and dropping table column headers. It accepts header text, the index of the column, and a moveColumn function to reorder columns.

const moveColumn = (dragIndex, hoverIndex) => {
  // Logic to reorder columns based on drag and drop
  console.log(`Move column from ${dragIndex} to ${hoverIndex}`);
  // Implementation of reordering should update the state that manages columns
};

Defines the moveColumn function, which is used as the logic to reorder columns when dragging and dropping. This function would typically update the state that manages the columns' order, ensuring the UI reflects the new order post drag-and-drop.