Next.js Discord

Discord Forum

render shadcn Sheet in table

Unanswered
American Chinchilla posted this in #help-forum
Open in Discord
American ChinchillaOP
what i mean by that is i have a table that has some buttons, when i click on each it should show the Sheet component but with different contents how to do so cause if i put my Sheet inside there i cant see the SheetContent being shown only the background brightness changes

31 Replies

American ChinchillaOP
a broad example could be: 
<table>
  <tbody>
    {[1, 2, 3].map(item) => <tr> {item} (show sheet content (different for each item in list))</tr>}
  </tbody>
</table>
Sun bear
I would go like:

const [open, setOpen] = useState(false)
const [selectedRow, setSelectedRow] = useState(null)

<table>
{map... 
<tr>
<td onClick={() => {
setOpen(true);
 setSelectedRow(row)}}>...</td>
<tr>
</table>

<CustomSheetComponent open={open} setOpen={setOpen} row={selectedRow} />
Of course you can also add probs like actionType to show the different conent. Then you can handle the rest in the custom Sheet component
when i tried to see in devtools where it is it showed to be outside the page?
@American Chinchilla okay i tried that but i still only see grayed out screen when i try to open it and the actial content does not show up
Sun bear
What do you mean with greyed out screen?

The shadcn sheet is sliding in and is an overlay right? So you should see at least an empty overlay?
@Sun bear What do you mean with greyed out screen? The shadcn sheet is sliding in and is an overlay right? So you should see at least an empty overlay?
American ChinchillaOP
i mean i only see the overlay that grays out the screen but the right sidebar does not appear
@American Chinchilla i mean i only see the overlay that grays out the screen but the right sidebar does not appear
Sun bear
Did you doublecheck with shadcns docs if you implemented it correctly.

Including title, content, etc
American ChinchillaOP
let me double check
omg im such a dummy
bruh
well thanks for solving my problem
the problem was that i installed it manually, got rid of variants (i only want right side) copy pasted styles for right side version but did not copy the default styles
what do i mark as an answer now 😂
@American Chinchilla what do i mark as an answer now 😂
Sun bear
Haha the answer is often easy like "did you doublecheck the docs" 😅
@Sun bear Haha the answer is often easy like "did you doublecheck the docs" 😅
American ChinchillaOP
did you work more with radix cause i got one more thing i cant get around with
American ChinchillaOP
<Sheet>
  <PopoverClose asChild>
    <SheetTrigger asChild>
      <TooltipOption text="Zobacz szczegóły">
        <EyeOpenIcon className="size-5" />
      </TooltipOption>
    </SheetTrigger>
  </PopoverClose>
  <SheetContent>
    <SheetTitle>TITLE</SheetTitle>
    <div className="size-10 bg-red-500"></div>
  </SheetContent>
</Sheet>
i have something like this, basically im trying to make one button close the Popover and open the Sheet
Sun bear
In shadcn you have to options.

1. Uncontrolled

Then you do it like

<SheetClose>
<Button> i will close the sheet</Button>
</SheetClose>


2. Controlled

const [open, setOpen] = useState(false)

<Sheet open={open} onOpenChange={setOpen}>
<Button onClick={() = setOpen(true)}>open...


Sorry based on my memory syntax can be slightly different
American ChinchillaOP
well yeah i know about the Trigger and Close components, problem is i want one Button to do both Close Popover and Open a Sheet
like here 
  <PopoverClose asChild>
    <SheetTrigger asChild>
      <TooltipOption text="Zobacz szczegóły">
        <EyeOpenIcon className="size-5" />
      </TooltipOption>
    </SheetTrigger>
  </PopoverClose>
but this dont work
TooltipOption renders a button i should mention
Sun bear
Maybe change both to controlled components and create a funcrion that set both states to false
@Sun bear Maybe change both to controlled components and create a funcrion that set both states to false
American ChinchillaOP
https://www.radix-ui.com/primitives/docs/guides/composition#composing-multiple-primitives

i found this in docs wonder if im doing something wrong or if this just doesnt work on both closing and triggering
Sun bear
You could remove the tooltip for testing. Sometimes i was facing problems when its used as trigger
American ChinchillaOP
actually i got it working
looks like the Sheet cannot be direct parent
i moved it up a bit and works
thanks a lot tho
Sun bear
Youre welcome happy that you fixed it
American ChinchillaOP
:joehandshake: