Below is a layout of the table:

I can drag and drop rows but my additional requirement is to drag columns. How can I achieve it?

My code:

  return (
    <>
      <DragDropContext onDragEnd={onDragEnd}>
        <table
          border="1"
          cellPadding="10"
          cellSpacing="0"
          style={{ width: "100%", borderCollapse: "collapse" }}
        >
          <thead>
            <tr>
              <th>Action</th>
              {Object.keys(data[0]).map((key) => (
                <th key={key}>{key}</th>
              ))}
            </tr>
          </thead>
          <Droppable droppableId="tbody">
            {(provided) => (
              <tbody ref={provided.innerRef} {...provided.droppableProps}>
                {data.map((row, index) => (
                  <Draggable
                    draggableId={row.Name}
                    index={index}
                    key={row.Name + "-key"}
                  >
                    {(provided) => (
                      <tr
                        key={index}
                        ref={provided.innerRef}
                        {...provided.draggableProps}
                      >
                        <td
                          style={{ width: 50, textAlign: "center" }}
                          {...provided.dragHandleProps}
                        >
                          =
                        </td>
                        {Object.values(row).map((value, i) => (
                          <td key={i}>{value}</td>
                        ))}
                      </tr>
                    )}
                  </Draggable>
                ))}
                {provided.placeholder}
              </tbody>
            )}
          </Droppable>
        </table>
      </DragDropContext>
    </>
  );

I am using @hello-pangea/dnd library which is exactly same as react-beautiful-dnd.