table-dnd-sortable
v1.0.1
Published
Make table rows sortable by drag and drop
Downloads
7
Readme
Table Dnd Sortable
Implement table row sorting via drag & drop.
Usage
Basic usage, enable dnd sort effects on table rows.
import tableDndSortable from 'table-dnd-sortable';
const dndSorter = tableDndSortable(document.querySelector('table#my-table'), {
onDrop({ sourceIndex, targetIndex }) {
// Implement your data movement / table re-render here, via sourceIndex and targetIndex
console.log(`Move row ${sourceIndex} to ${targetIndex}`);
}
});
// rememeber to clean up when you don't need it...
dndSorter.destroy();
You can narrow down the dnd handler to a specific dom via onBeforeDrag
.
const dndSorter = tableDndSortable(document.querySelector('table#my-table'), {
onBeforeDragStart: (evt) => {
return evt.target.classList.contains('dnd-sorter');
},
});
API
Please checkout the typescript declarations.
LICENSE
MIT