geoheat-frontend/src/modules/Table/TableSettings.jsx

import { useEffect, useState } from "react";
import {Button, Checkbox, 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);
  useEffect(() => {
    setColumnsList(orderColumns.order);
  }, [orderColumns]);

  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 hideColumn = (columnIndex) => {
    const updatedList = columnsList.map((item, index) => {
      if (columnIndex === index) return {...item, show: !item.show};
      return item;
    });
    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'
           style={{ maxHeight: "80vh", overflowY: "scroll", margin: "24px 0 24px" }}>
        <DragDropContext onDragEnd={handleDrop}>
          <Droppable droppableId="tableOrder">
            {(provided) => (
              <div className="flex flex-col" {...provided.droppableProps} ref={provided.innerRef}>
                {columnsList.map((item, index) => {
                  const num = item.position;
                  if (!orderColumns.defaultColumns[num]) return;
                  return (
                    <Draggable key={`list-${num}`} draggableId={`list-${num}`} index={index}>
                      {(provided) => (
                        <div className="flex flex-row gap-2 p-1.5 hover:bg-gray-300 rounded-md" ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
                          <Checkbox onChange={() => hideColumn(index)} checked={item.show} />
                          <p className="m-0">
                            { orderColumns.defaultColumns[num].name || orderColumns.defaultColumns[num].title }
                          </p>
                        </div>
                      )}
                    </Draggable>
                  );
                })}
                {provided.placeholder}
              </div>
            )}
          </Droppable>
        </DragDropContext>
      </div>
    )
  }

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