Ability to move table rows up/down (drag and drop)

Question

My table has five columns.

I would like to add the ability to drag rows up or down. That is, when the user hovers over a row and then hovers over a button (in the first column), I would like the user to be able to move that column up or down.

I have not found similar solutions anywhere, and I would be very grateful for your help

export default function App() {
  return (
    <table className="zui">
      <tbody style={{ fontSize: "40px" }}>
        {nodes.map((val, key) => (
          <tr key={key}>
            <td>
              <AppsIcon className="sss" />
            </td>
            <td
              style={{
                paddingLeft: "20px"
              }}
            >
              {val.name}
            </td>
            <td>{val.length}</td>
            <td>{val.hotkey}</td>
            <td>{val.isActivness}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

styles.css

    .sss {
  visibility: hidden;
}

tr:hover .sss {
  background: gray;
  visibility: visible;
}

tr:hover {
  background: gray;
  visibility: visible;
}

td:first-child {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

td:last-child {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

Answer 1

You can achieve by this code.

import React, { useState, useRef } from 'react';

const Table = () => {
    const dragItem = useRef();
    const dragOverItem = useRef();
    const [data, setData] = useState(
        [
            {
                "fullName": "Jhon",
                "age": 26,
            },
            {
                "fullName": "Doe",
                "age": 24,
            }
        ]
    )
    const dragStart = (e) => {
        dragItem.current = e.target.id;
    };
    const dragEnter = (e) => {
        dragOverItem.current = e.currentTarget.id;
    };
    const drop = () => {
        const copyListItems = [...data];
        const dragItemContent = copyListItems[dragItem.current];
        copyListItems.splice(dragItem.current, 1);
        copyListItems.splice(dragOverItem.current, 0, dragItemContent);
        dragItem.current = null;
        dragOverItem.current = null;
        setData(copyListItems);
    }

    const row = data.map((item) => {
        return (
            <tr 
                onDragEnter={(e) => dragEnter(e)}
                onDragStart={(e) => dragStart(e)}
                onDragEnd={drop}
                draggable
            >
                <td>{item.fullName}</td>
                <td>{item.age}</td>
            </tr>
        )
    })

    return (   
        <>
            <table>
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Age</th>
                    </tr>
                </thead>
                <tbody>
                    {React.Children.toArray(row)}
                </tbody>
            </table>        
        </>
    )
}
export default Table