反应如何制作漂亮的 dnd 工作表容器

问题描述

我制作了一个包含 beautiful-dnd 组件的表格，以便我可以重新排列行 但由于我有大量数据，我想制作一个表格容器，这样我就可以有一个可滚动的固定大小的表格 但如果我添加“react-table-container”，拖放不再有效。

谁能帮我制作一个可拖动的容器

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,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>
</>

); }

解决方法

在{...provided.droppableProps}下添加ref={provided.innerRef}

<table
   ref={provided.innerRef}
   id="players"
   {...provided.droppableProps}
   {...getTableProps()}
   style={{ width: 1000,height: 500 }}
>