DnD not working

react

Probably a pretty noob question but this is my first time working with anything Tanstack:

I implemented a Tanstack table as it was shown in the examples, the table was rendering without issues or errors, so i went ahead and implemented the DnD example. The handle is showing, the table is rendering without errors and the handler are also printing to the console, but i just cannot move a row. The code almost looks exactly like the example, just that i switched a value that is responsible for sorting, i will post the relevant parts of the code in order in the comments:

// imports and interfaces..

const RowDragHandleCell = ({ rowId }: { rowId: string }) => {
  const { attributes, listeners } = useSortable({
    id: rowId,
  });
  return (
    // Alternatively, you could set these attributes on the rows themselves
    <button {...attributes} {...listeners}>
      🟰
    </button>
  );
};

const DraggableRow = ({ row }: { row: Row<ProjectType> }) => {
  console.log("DraggableRow::RowID: ", row.id);
  const { transform, transition, setNodeRef, isDragging } = useSortable({
    id: row.original.order_nr,
  });

  const style: CSSProperties = {
    transform: CSS.Transform.toString(transform), //let dnd-kit do its thing
    transition: transition,
    opacity: isDragging ? 0.8 : 1,
    zIndex: isDragging ? 1 : 0,
    position: "relative",
  };
  return (
    // connect row ref to dnd-kit, apply important styles
    <tr ref={setNodeRef} style={style}>
      {row.getVisibleCells().map((cell) => (
        <td key={cell.id} style={{ width: cell.column.getSize() }}>
          {flexRender(cell.column.columnDef.cell, cell.getContext())}
        </td>
      ))}
    </tr>
  );
};

// imports and interfaces..

const RowDragHandleCell = ({ rowId }: { rowId: string }) => {
  const { attributes, listeners } = useSortable({
    id: rowId,
  });
  return (
    // Alternatively, you could set these attributes on the rows themselves
    <button {...attributes} {...listeners}>
      🟰
    </button>
  );
};

const DraggableRow = ({ row }: { row: Row<ProjectType> }) => {
  console.log("DraggableRow::RowID: ", row.id);
  const { transform, transition, setNodeRef, isDragging } = useSortable({
    id: row.original.order_nr,
  });

  const style: CSSProperties = {
    transform: CSS.Transform.toString(transform), //let dnd-kit do its thing
    transition: transition,
    opacity: isDragging ? 0.8 : 1,
    zIndex: isDragging ? 1 : 0,
    position: "relative",
  };
  return (
    // connect row ref to dnd-kit, apply important styles
    <tr ref={setNodeRef} style={style}>
      {row.getVisibleCells().map((cell) => (
        <td key={cell.id} style={{ width: cell.column.getSize() }}>
          {flexRender(cell.column.columnDef.cell, cell.getContext())}
        </td>
      ))}
    </tr>
  );
};

TanStack•2mo ago•

3 replies

conventional-black

DnD not working

react

// imports and interfaces..

const RowDragHandleCell = ({ rowId }: { rowId: string }) => {
  const { attributes, listeners } = useSortable({
    id: rowId,
  });
  return (
    // Alternatively, you could set these attributes on the rows themselves
    <button {...attributes} {...listeners}>
      🟰
    </button>
  );
};

const DraggableRow = ({ row }: { row: Row<ProjectType> }) => {
  console.log("DraggableRow::RowID: ", row.id);
  const { transform, transition, setNodeRef, isDragging } = useSortable({
    id: row.original.order_nr,
  });

  const style: CSSProperties = {
    transform: CSS.Transform.toString(transform), //let dnd-kit do its thing
    transition: transition,
    opacity: isDragging ? 0.8 : 1,
    zIndex: isDragging ? 1 : 0,
    position: "relative",
  };
  return (
    // connect row ref to dnd-kit, apply important styles
    <tr ref={setNodeRef} style={style}>
      {row.getVisibleCells().map((cell) => (
        <td key={cell.id} style={{ width: cell.column.getSize() }}>
          {flexRender(cell.column.columnDef.cell, cell.getContext())}
        </td>
      ))}
    </tr>
  );
};

// imports and interfaces..

const RowDragHandleCell = ({ rowId }: { rowId: string }) => {
  const { attributes, listeners } = useSortable({
    id: rowId,
  });
  return (
    // Alternatively, you could set these attributes on the rows themselves
    <button {...attributes} {...listeners}>
      🟰
    </button>
  );
};

const DraggableRow = ({ row }: { row: Row<ProjectType> }) => {
  console.log("DraggableRow::RowID: ", row.id);
  const { transform, transition, setNodeRef, isDragging } = useSortable({
    id: row.original.order_nr,
  });

  const style: CSSProperties = {
    transform: CSS.Transform.toString(transform), //let dnd-kit do its thing
    transition: transition,
    opacity: isDragging ? 0.8 : 1,
    zIndex: isDragging ? 1 : 0,
    position: "relative",
  };
  return (
    // connect row ref to dnd-kit, apply important styles
    <tr ref={setNodeRef} style={style}>
      {row.getVisibleCells().map((cell) => (
        <td key={cell.id} style={{ width: cell.column.getSize() }}>
          {flexRender(cell.column.columnDef.cell, cell.getContext())}
        </td>
      ))}
    </tr>
  );
};

DnD not working

Similar Threads

DnD not working

Similar Threads

Similar Threads

Similar Threads