watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-08 06:37:18 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Add draggable rows to table component

Browse source
This commit is contained in:
Chris Walsh 2022-07-23 22:56:13 -07:00
parent bcabc25300
commit 70c6211e2c
No known key found for this signature in database
GPG key ID: 28EE0CCA6032019E
3 changed files with 114 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

39
components/common/Table.js
View file

@ -1,3 +1,4 @@
import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
@ -13,6 +14,9 @@ function Table({
rowKey,
showHeader = true,
children,
isDraggable = false,
dragId,
onDragEnd,
}) {
if (empty && rows.length === 0) {
return empty;
@ -36,10 +40,37 @@ function Table({
<div className={classNames(styles.body, bodyClassName)}>
{rows.length === 0 && <NoData />}
{!children &&
rows.map((row, index) => {
const id = rowKey ? rowKey(row) : index;
return <TableRow key={id} columns={columns} row={row} />;
})}
(isDraggable ? (
<DragDropContext onDragEnd={onDragEnd}>
<Droppable droppableId={dragId}>
{provided => (
<div {...provided.droppableProps} ref={provided.innerRef}>
{rows.map((row, index) => {
const id = rowKey ? rowKey(row) : index;
return (
<Draggable key={id} draggableId={`${dragId}-${id}`} index={index}>
{provided => (
<div
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
>
<TableRow columns={columns} row={row} />
</div>
)}
</Draggable>
);
})}
</div>
)}
</Droppable>
</DragDropContext>
) : (
rows.map((row, index) => {
const id = rowKey ? rowKey(row) : index;
return <TableRow key={id} columns={columns} row={row} />;
})
))}
{children}
</div>
</div>