Table with Dropdowns without Replication

[codinkai]

Hello all,

I am trying to create a page containing a table. Every row of the table shall be assignable to a user. In my current solution, I create a dropdown component (https://flowbite-svelte.com/components/dropdown) for every row.

Instead of creating a lot of Dropdown components with the same content, I would like to use only one dropdown and position it below the clicked element.

<Dropdown
  id="userDropdown"
  open={dropdownOpen}
>...</Dropdown>

function clickCallback(event) {
  // open dropdown
  dropdownOpen = true;
  
  // position dropdown
  let dropdown = document.getElementById("userDropdown");
  dropdown.style.position = "absolute";
  dropdown.style.left = "10px";
  dropdown.style.top = "10px";
}

I can position a normal div to everywhere on the page, but I cannot position the Dropdown component.

Has anyone faced a similar problem and can help with this task?

[shinokada]

Can you try to add class for your position to frameClass prop?
Doc

<Dropdown frameClass="your-tailwind-css-here" .....

[codinkai]

Thank you for your quick response. I have tried it like this, but the dropdown stays below the table.
<Dropdown class="py-2" frameClass="absolute top-10" open="true">

Additionally, how would I position the dropdown using the frameClass to position top: 123px and left: 345px?

Maybe, I should just create a dropdown in every row and hope for the Svelte-compiler to handle the replication of the Dropdowns...