Replies: 5 comments
-
Did you want a good way to do this? I'm in the same situation and want to have a single sheet component to be reused by each action menu. |
Beta Was this translation helpful? Give feedback.
-
Any luck on solving this....I need the same behavior or even simply to open a sheet from a cell on a table |
Beta Was this translation helpful? Give feedback.
-
I have the same issue. But the solution for me was to remove the onClick method from TableRow and created an onClick method and pass it to each TableCell. It's not beautiful, but work! There is an example:
|
Beta Was this translation helpful? Give feedback.
-
In order to mantain the the original behavior (mouse/keyboard navigation and close dropdown on select), the best solution I found was to change default const DropdownMenuItem = React.forwardRef<
React.ElementRef<typeof DropdownMenuPrimitive.Item>,
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
inset?: boolean;
}
>(({ className, inset, ...props }, ref) => (
<DropdownMenuPrimitive.Item
ref={ref}
className={cn(
"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
inset && "pl-8",
className,
)}
onPointerDown={(event) => {
event.stopPropagation();
if (props.onPointerDown) {
props.onPointerDown(event);
}
if (props.onSelect) {
props.onSelect(event as unknown as Event);
document.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape" }));
}
}}
onKeyDown={(event) => {
// Only required if parent is also triggered by keyboard
event.stopPropagation();
if ([" ", "Enter"].includes(event.key) && props.onSelect) {
event.preventDefault();
props.onSelect(event as unknown as Event);
document.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape" }));
}
}}
{...props}
/>
));
DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName; This is probably worth a Radix issue. |
Beta Was this translation helpful? Give feedback.
-
I Solved this by adding a <DropdownMenu>
<DropdownMenuTrigger asChild>
<Button onClick={(e) => e.stopPropagation()}>
...
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem onClick={(e) => e.stopPropagation()}></DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu> |
Beta Was this translation helpful? Give feedback.
-
Using the data table example as a basis, I've added a context menu with a number of options to each row like so:
This works well. As a convenience, I would also like to be able to click on any part of the corresponding row (as long as the cell does not contain a click under the cursor) to also trigger the 'edit' menu item (which opens a sheet).
My context menu comes from a React Table column defined as such:
This is the relevant part of the context menu that loads the sheet (which has the trigger I want to fire):
The FeedSheet component in turn has the SheetTrigger that I also want to fire from a row click:
So I need a
TableRow
click handler to somehow fire the correspondingSheetTrigger
for the row it's in. Given the way cells are rendered dynamically based on the column definition, I don't know how to pass through anything usable at the row level that ends up being able to modify thesheetOpen
state.Perhaps I can add a click handler to the parent when my SheetComponent is rendered somehow?
Or somehow pass
setSheetOpen
for a cell to the row somehow? There doesn't seem to be any row specific meta data.The other thing I considered was refactoring the whole thing so that there is only a single Sheet at the table component level that can be controlled from the row and reused by the action menu.
What would be the must succinct way to do this?
Beta Was this translation helpful? Give feedback.
All reactions