Open Drawer UI with DataTable action Menu

[anstiwar]

Hi All.

I'm very new to the web UI world, and I'm struggling with shadcn Drawer UI.

I have a DataTable and for each row, I have created an action DropdownMenu. Now I want to open the Drawer UI when the user clicks on an item from the Dropdown Menu, I'm not sure how to implement this. My Drawer UI component is ready and it's working when I'm using it outside the DropdownMenu using DrawerTrigger option.
<DrawerTrigger asChild> <button>Open Drawer</button> </DrawerTrigger>

[jbudus]

Did you solve this? I'm trying to do exactly the same thing.

[jbudus]

I'm trying to do something like this....invoking the drawer with onClick from a row item: function openDrawer(rowData: any, open: boolean) {
console.log("Opening drawer with row data:", rowData);
return (



Are you absolutely sure?
This action cannot be undone.



Cancel




);
}

export const columns: ColumnDef[] = [
{
id: "actions",
cell: ({ row }) => {
return (
<Button
variant="link"
className="h-5 w-5 p-0"
onClick={() => openDrawer(row.original, false)} // Passing the entire row data
>


);
},
},

[pablotanner]

I took a look at it and managed to get it working, however it's a very nasty implementation. I'm sure there's better ways of making it work, but this doesn't require any changes in the Drawer component itself (e.g. making it possible to pass in the component yourself and adding the OnClick there).

This is how I defined the column:

    {
        id: "drawerDropdown",
        header: "Drawer Dropdown",
        cell: ({ row}) => {

            return (
                <DropdownWithDrawer data={row.original} />
            )
        },
    }

And here's the DropdownWithDrawer component where I had to use a MutationObserver:

const DropdownWithDrawer = ({data}) => {
    // State for the dropdown
    const [dropdownIsOpen, setDropdownIsOpen] = useState(false)

    // State for the drawer
    const [drawerIsOpen, setDrawerIsOpen] = useState(false)

    useEffect(() => {
        // It wouldn't work (couldn't find overlay element) by just using useEffect so I had to use a MutationObserver
        const observer = new MutationObserver((mutationsList, observer) => {
            // Look through all mutations that just occurred
            for(const mutation of mutationsList) {
                // If the addedNodes property has one or more nodes
                if(mutation.addedNodes.length) {
                    const overlay = document.querySelector("[vaul-overlay]");
                    if (overlay) {
                        overlay.addEventListener("click", () => {
                            setDrawerIsOpen(false);
                        });
                        // Once we have added the event listener, we can stop observing
                        observer.disconnect();
                        return;
                    }
                }
            }
        });

        // Start observing the document with the configured parameters
        observer.observe(document, { childList: true, subtree: true });

        return () => {
            observer.disconnect();
        }
    }, [setDrawerIsOpen, drawerIsOpen, dropdownIsOpen]);

    // Here's the actual dropdown/drawer stuff
    return (
        <>
            {/* Dropdown with Drawer Trigger button*/}
            <DropdownMenu open={dropdownIsOpen} onOpenChange={() => setDropdownIsOpen(!dropdownIsOpen)}>
                <DropdownMenuTrigger onClick={() => setDropdownIsOpen(true)}>
                    <BsThreeDots className={"w-5 h-5"} />
                </DropdownMenuTrigger>
                <DropdownMenuContent>
                    <DropdownMenuGroup>

                        <DropdownMenuItem onClick={() => setDrawerIsOpen(true)}>
                            Open Drawer
                        </DropdownMenuItem>

                        <DropdownMenuItem>
                            Second Item
                        </DropdownMenuItem>

                    </DropdownMenuGroup>
                </DropdownMenuContent>
            </DropdownMenu>

            {/* Drawer is stored here */}
            <Drawer open={drawerIsOpen} onClose={() => setDrawerIsOpen(false)}>
                <DrawerContent>
                    This is the content
                </DrawerContent>
            </Drawer>
        </>
    )
}

[jbudus]

Many thanks @anstiwar ....almost there. Interesting that it doesn't respect the direction which is available with Vaul.
<Drawer
direction="right"
open={drawerIsOpen}
onClose={() => setDrawerIsOpen(false)}
>

This is the content {data.common.name}

[jbudus]

I should clarify, direction is respected....but I want it positioned on the right not bottom