postnet-front/src/modules/Table/TableSettings.jsx

import {useState} from "react";
import {Button, Dropdown} from "antd";
import {SettingOutlined} from "@ant-design/icons";
import {DragDropContext, Draggable, Droppable} from "react-beautiful-dnd";

export const TableSettings = ({orderColumns}) => {
  const [columnsList, setColumnsList] = useState(orderColumns.order)

  const handleDrop = (droppedItem) => {
    // Ignore drop outside droppable container
    if (!droppedItem.destination) return;
    var updatedList = [...columnsList];
    // Remove dragged item
    const [reorderedItem] = updatedList.splice(droppedItem.source.index, 1);
    // Add dropped item
    updatedList.splice(droppedItem.destination.index, 0, reorderedItem);
    // Update State
    setColumnsList(updatedList);
    orderColumns.setOrder(updatedList);
  };

  const columnsListRender = () => {
    return (
      <div onClick={(e) => e.stopPropagation()} className='z-10 bg-white-background rounded-xl p-3 space-y-3'>
        <DragDropContext onDragEnd={handleDrop}>
          <Droppable droppableId="tableOrder">
            {(provided) => (
              <div className="flex flex-col" {...provided.droppableProps} ref={provided.innerRef}>
                {columnsList.map((item, index) => {
                  return (
                    <Draggable key={`list-${item}`} draggableId={`list-${item}`} index={index}>
                      {(provided) => (
                        <div ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
                          <p>
                            { orderColumns.defaultColumns[item].title }
                          </p>
                        </div>
                      )}
                    </Draggable>
                  );
                })}
                {provided.placeholder}
              </div>
            )}
          </Droppable>
        </DragDropContext>
      </div>
    )
  }

  return (
    <Dropdown
      trigger="click"
      dropdownRender={() => columnsListRender()}
    >
      <Button
        onClick={(e) => e.stopPropagation()}
      >
        <SettingOutlined/>
      </Button>
    </Dropdown>
  );
};