Install

npm install react-table-drag-and-drop-vh

Usage

User can define rows like this, but id is manadatory

const [tableRows, setTableRows] = useState([ { name: "Design count Making", id: "2f251f31-4d52-4c6d-b383-3e35b2257beb", description: "", created_by: "Mohammad", created_on: "2024-05-24T07:42:53.319375", file_count: 1, }, { name: "LC_finacle_brd", id: "149e7dd4-a537-452e-9346-ab19194ea96d", description: "", created_by: "Nadeem", created_on: "2024-05-14T10:31:54.717724", file_count: 1, }, { name: "BRD", id: "1", description: "", created_by: "Genuis", created_on: "2024-05-14T10:31:54.717724", file_count: 1, }, { name: "Coverage", id: "2", description: "", created_by: "Master", created_on: "2024-05-14T10:31:54.717724", file_count: 1, }, ]);

User can define columns like this, but name is manadatory

const [columns, setColumns] = useState([ { name: "name", displayName: "Name", render: (r) => r && r?.name ? ( <Box display={"flex"} flexDirection={"row"} alignItems={"center"}> <IconButton icon={} size="small" /> {r?.name} ) : ( "N/A" ), }, { name: "created_by", displayName: "Created By", render: (r) => r && r?.created_by ? {r?.created_by} : "N/A", }, { name: "message", displayName: "Message", render: (r) => (r && r?.created_on ? Hello word : "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: () => {},
          },
        ]}
      />
    ),
},

]);

User can use this package like this

<TableDragAndDrop rows={tableRows} columns={columns} msg={"No results found"} setTableRows={setTableRows} setColumns={setColumns} />