react-multi-drag-drop

This package will do drag and drop of a table rows and columns both. Users can customize the table's CSS using the "custom-scrollbar" class. This package is compatible with or without MUI.

Installation

npm install react-multi-drag-drop OR npm react-multi-drag-drop  --legacy-peer-deps

OR

yarn add react-multi-drag-drop OR yarn add react-multi-drag-drop  --legacy-peer-deps

Usage

<!-- How to import package -->
import { TableDragAndDrop } from "react-multi-drag-drop";
<!-- How to define rows -->
const [tableRows, setTableRows] = useState([
    {
      name: "Design",
      id: "2f251f31-4d52-4c6d-b383-3e35b2257beb",
      message: "Npm",
      created_by: "Mohammad",
      file_count: 1,
      days: "Monday",
      date: "27-June-2024",
      status: "Complete",
    },
    {
      name: "Making",
      id: "149e7dd4-a537-452e-9346-ab19194ea96d",
      message: "Package",
      created_by: "Nadeem",
      file_count: 1,
      days: "Tuesday",
      date: "27-June-2024",
      status: "Ready",
    },
    {
      name: "CSS",
      id: "1",
      message: "Storybook",
      created_by: "Amans",
      file_count: 1,
      days: "Wednesday",
      date: "27-June-2024",
      status: "Review",
    },
    {
      name: "HTML",
      id: "2",
      message: "React.JS",
      created_by: "Maans",
      file_count: 1,
      days: "Thursday",
      date: "27-June-2024",
      status: "In_Progress",
    },
    {
      name: "New Folder",
      id: "2f251f31-4d52-4c6d-b383-3e35b2257beb",
      message: "Npm",
      created_by: "Mohammad",
      file_count: 1,
      days: "Monday",
      date: "27-June-2024",
      status: "Complete",
    },
    {
      name: "Storybook",
      id: "149e7dd4-a537-452e-9346-ab19194ea96d",
      message: "Package",
      created_by: "Nadeem",
      file_count: 1,
      days: "Tuesday",
      date: "27-June-2024",
      status: "Ready",
    },
    {
      name: "React Component",
      id: "1",
      message: "Storybook",
      created_by: "Amans",
      file_count: 1,
      days: "Wednesday",
      date: "27-June-2024",
      status: "Review",
    },
    {
      name: "Row and Col",
      id: "2",
      message: "React.JS",
      created_by: "Maans",
      file_count: 1,
      days: "Thursday",
      date: "27-June-2024",
      status: "In_Progress",
    },
  ]);

<!-- How to define columns -->
const [columns, setColumns] = useState([
    {
      name: "name",
      displayName: "Name",
      cellWidth: 200,
      render: (r) =>
        r && r?.name ? (
          <Box display={"flex"} flexDirection={"row"} alignItems={"center"}>
            <IconButton size="small">
              <FaFolder size={12} color="#F8D775" />
            </IconButton>
            <Text
              color="primary"
              semibold
              style={{
                width: "100%",
                overflow: "hidden",
                textOverflow: "ellipsis",
                whiteSpace: "nowrap",
              }}
            >
              {r?.name}
            </Text>
          </Box>
        ) : (
          "N/A"
        ),
    },
    {
      name: "created_by",
      displayName: "Created By",
      render: (r) =>
        r && r?.created_by ? <Text>{r?.created_by}</Text> : "N/A",
    },
    {
      name: "days",
      displayName: "Days",
      render: (r) => (r && r?.days ? <Text>{r?.days}</Text> : "N/A"),
    },
    {
      name: "date",
      displayName: "Date",
      cellWidth: 200,
      render: (r) => (r && r?.date ? <Text>{r?.date}</Text> : "N/A"),
    },
    {
      name: "status",
      displayName: "Progress Status",
      render: (r) => (r && r?.status ? <Text>{r?.status}</Text> : "N/A"),
    },
    {
      name: "message",
      displayName: "Message",
      render: (r) => (r && r?.message ? <Text>{r?.message}</Text> : "N/A"),
    },

    {
      name: "file_count",
      displayName: "Files Count",
      render: (r) =>
        r && r?.file_count ? <Text>{r?.file_count}</Text> : "N/A",
    },
    {
      name: "actions",
      displayName: "Actions",
      render: (r) =>
        r &&
        r?.id && (
          <OptionMenu
            options={[
              {
                icon: <FiTrash2 />,
                name: "delete",
                displayName: "Delete",
                onClick: () => {},
              },
            ]}
          />
        ),
    },
  ]);
<!-- How to define Row drop handler -->
const handleDropRow = (draggedId, targetIndex) => {
    const presentID = tableRows?.some((data) => data?.id === draggedId);
    if (presentID) {
      // Implement the logic and API call to update the database.
      // Example :- In this code, I'm only updating the local state without making an API call.
      //  setTableRows((prev) => {
      //   const draggedIndex = prev.findIndex((item) => item.id === draggedId);
      //   const updatedItems = [...prev];
      //   const [draggedItem] = updatedItems.splice(draggedIndex, 1);
      //   updatedItems.splice(targetIndex, 0, draggedItem);
      //   return updatedItems;
      // });
    }
  };
  <!-- How to define Column drop handler -->
const handleDropCol = (draggedColId, draggedColIndex, targetColIndex) => {
    const presentID = columns?.some((data) => data?.name === draggedColId);
    if (presentID) {
      // Implement the logic and API call to update the database.
    }
  };

<!-- How to use component -->
// Without MUI
  <TableDragAndDrop
      rows={tableRows}
      columns={columns}
      msg={"No results found"}
      cellHeight={"0.1rem"}
      setTableRows={setTableRows}
      setColumns={setColumns}
      handleDropCol={handleDropCol}
      handleDropRow={handleDropRow}
    />

OR
// With MUI
  <ThemeProvider theme={theme}>
      <CssBaseline />
      <Paper>
        <TableDragAndDrop
          rows={tableRows}
          columns={columns}
          msg={"No results found"}
          cellHeight={"0.1rem"}
          setTableRows={setTableRows}
          setColumns={setColumns}
          handleDropCol={handleDropCol}
          handleDropRow={handleDropRow}
        />
      </Paper>
    </ThemeProvider>

License

This project is licensed under the MIT License.

Author

• Mohammad Nadeem
  • LinkedIn: (https://in.linkedin.com/in/mohammad-nadeem-044418136)