I have made a table with beautiful-dnd components so i can reorder rows but since i have large amount of data, i want to make a table container so I can have a scrollable fixed size table but if i add "react-table-container", drag and drop no longer works.
Can anyone help me how to make a container that is draggable
export default function DataTable({ data, title }) {
const columns = useMemo(() => COLUMNS, []);
const {
getTableProps,
getTableBodyProps,
headerGroups,
rows,
prepareRow,
} = useTable(
{
columns,
data,
},
useSortBy
);
return (
<>
<div className="title">{title} </div>
<DragDropContext
onDragEnd={(param) => {
if (!param.destination) {
return;
}
const srcIdx = param.source.index;
const desIdx = param.destination.index;
rows.splice(desIdx, 0, rows.splice(srcIdx, 1)[0]);
}}
>
<ReactTableContainer width="auto" height="800px">
<Droppable droppableId="droppable">
{(provided, snapshot) => (
<table
ref={provided.innerRef}
id="players"
{...getTableProps()}
style={{ width: 1000, height: 500 }}
>
<thead>
{headerGroups.map((headerGroup) => (
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map((column) => (
<th
{...column.getHeaderProps(
column.getSortByToggleProps()
)}
>
{column.render("Header")}
<span className="sort-icon">
{column.isSorted ? (
column.isSortedDesc ? (
<SortUpIcon />
) : (
<SortDownIcon />
)
) : (
""
)}
</span>
<div className="filter">
{column.canFilter ? column.render("Filter") : null}
</div>
</th>
))}
</tr>
))}
</thead>
<tbody {...getTableBodyProps()}>
{rows.map((row, i) => {
prepareRow(row);
return (
<Draggable
key={row.id}
draggableId={row.id}
index={i}
className="draggableRow"
>
{(provided, snapshot) => (
<tr
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
{...row.getRowProps()}
style={{
...provided.draggableProps.style,
boxShadow: snapshot.isDragging
? "0 0 .4rem #666"
: "none",
}}
>
{row.cells.map((cell) => {
return (
<td {...cell.getCellProps()}>
{cell.render("Cell")}
</td>
);
})}
</tr>
)}
</Draggable>
);
})}
{provided.placeholder}
</tbody>
</table>
)}
</Droppable>
</ReactTableContainer>
</DragDropContext>
</>
); }
