I trying to make table columns change order by drag and drop , i tried a lot of libraries and the best i could do is this :
import React, { useState } from 'react';
import './list_de_tournees.css'
const Table = ({ columns }) => {
const [currentColumns, setCurrentColumns] = useState(columns);
const handleDragStart = (e, columnIndex) => {
e.dataTransfer.setData('columnIndex', columnIndex);
};
const handleDragOver = (e, columnIndex) => {
e.preventDefault();
const dragIndex = e.dataTransfer.getData('columnIndex');
if (dragIndex !== columnIndex) {
const newColumns = [...currentColumns];
const [draggedColumn] = newColumns.splice(dragIndex, 1);
newColumns.splice(columnIndex, 0, draggedColumn);
setCurrentColumns(newColumns);
}
};
return (
<table>
<thead>
<tr>
{currentColumns.map((column, index) => (
<th
key={column.id}
draggable
onDr
onDragStart={(e) => handleDragStart(e, index)}
onDragOver={(e) => handleDragOver(e, index)}
>
{column.Header}
</th>
))}
</tr>
</thead>
<tbody>
<tr>
{currentColumns.map((column, index) => (
<td key={column.id}>
{column.accessor === 'name' && 'alice'}
{column.accessor === 'age' && '30'}
{column.accessor === 'country' && 'USA'}
</td>
))}
</tr>
<tr>
{currentColumns.map((column, index) => (
<td key={column.id}>
{column.accessor === 'name' && 'Bob'}
{column.accessor === 'age' && '25'}
{column.accessor === 'country' && 'Canada'}
</td>
))}
</tr>
<tr>
{currentColumns.map((column, index) => (
<td key={column.id}>
{column.accessor === 'name' && 'Charlie'}
{column.accessor === 'age' && '35'}
{column.accessor === 'country' && 'UK'}
</td>
))}
</tr>
</tbody>
</table>
);
};
const columns = [
{
Header: 'Name',
accessor: 'name',
id: '1',
},
{
Header: 'Age',
accessor: 'age',
id: '2',
},
{
Header: 'Country',
accessor: 'country',
id: '3',
},
];
function App() {
return (
<div className="App">
<Table columns={columns} />
</div>
);
}
export default App;
but I want it the table to be a static html table and draggable at the same time , i tried this :
<td draggable onDragStart={(e) => handleDragStart(e, 0)} onDragOver={(e) => handleDragOver(e, 0)}>Alice</td>
<td draggable onDragStart={(e) => handleDragStart(e, 1)} onDragOver={(e) => handleDragOver(e, 1)}>30</td>
<td draggable onDragStart={(e) => handleDragStart(e, 2)} onDragOver={(e) => handleDragOver(e, 2)}>USA</td>
but it didn’t work , I couldn’t drag it .
I tried this in simple project of html,css and vanilla js and it work perfectly here example
