SandboxedOnClick

A container that prevents the click event from bubbling out of it.

Each table row will trigger a window.alert() when clicked. The icon button is wrapped in SandboxedOnClick and navigates you to the ngrok docs.

A list of your recent invoices.
Invoice	Status	Method	Amount
INV001	Paid	Credit Card	$250.00
INV002	Pending	PayPal	$150.00
INV003	Unpaid	Bank Transfer	$350.00
INV004	Paid	Credit Card	$450.00
INV005	Paid	PayPal	$550.00
INV006	Pending	Bank Transfer	$200.00
INV007	Unpaid	Credit Card	$300.00
Total			$2,500.00

import { IconButton } from "@ngrok/mantle/button";
import { SandboxedOnClick } from "@ngrok/mantle/sandboxed-on-click";
import {
	Table,
	TableBody,
	TableCaption,
	TableCell,
	TableFoot,
	TableHead,
	TableHeader,
	TableRoot,
	TableRow,
} from "@ngrok/mantle/table";
import { Book } from "@phosphor-icons/react/Book";

<TableRoot>
	<Table>
		<TableCaption>A list of your recent invoices.</TableCaption>
		<TableHead>
			<TableRow>
				<TableHeader className="w-[100px]">Invoice</TableHeader>
				<TableHeader>Status</TableHeader>
				<TableHeader>Method</TableHeader>
				<TableHeader className="text-right">Amount</TableHeader>
				<TableHeader className="text-right">Actions</TableHeader>
			</TableRow>
		</TableHead>
		<TableBody>
			{invoices.map((invoice) => (
				<TableRow
					key={invoice.invoice}
					className="cursor-pointer"
					onClick={() => {
						window.alert(`Clicked on ${invoice.invoice}!`);
					}}
				>
					<TableCell className="font-medium">
						{invoice.invoice}
					</TableCell>
					<TableCell>{invoice.paymentStatus}</TableCell>
					<TableCell>{invoice.paymentMethod}</TableCell>
					<TableCell className="text-right">
						{invoice.totalAmount}
					</TableCell>
					<TableCell className="text-right">
						<SandboxedOnClick allowClickEventDefault>
							<IconButton
								label="See ngrok docs"
								icon={<Book />}
								asChild
							>
								<a href="https://ngrok.com/docs" target="_blank" />
							</IconButton>
						</SandboxedOnClick>
					</TableCell>
				</TableRow>
			))}
		</TableBody>
		<TableFoot>
			<TableRow>
				<TableCell colSpan={3}>Total</TableCell>
				<TableCell className="text-right">$2,500.00</TableCell>
				<TableCell />
			</TableRow>
		</TableFoot>
	</Table>
</TableRoot>

API Reference

SandboxedOnClick

A container that prevents the click event from bubbling out of it. Good to use when you want to provide some action buttons inside of a table row or list item that navigates on click.

Good to use when you want to provide some action buttons inside of a table row or list item that navigates on click.

All props from div, plus:

Prop Type Default Description

Prop	Type	Default	Description
allowClickEventDefault	boolean	false	Only call `event.preventDefault()` in the `onClick` handler if the user has not set `allowClickEventDefault` to`true`. This allows the user to control whether or not the default behavior of the click event should be allowed. This is useful for links or buttons that should navigate or perform some action on click.
asChild	boolean	false	Use the `asChild` prop to compose the `SandboxedOnClick` functionality onto alternative element types or your own React components.

allowClickEventDefault

boolean

false

Only call event.preventDefault() in the onClick handler if the user has not set allowClickEventDefault totrue.

This allows the user to control whether or not the default behavior of the click event should be allowed.

This is useful for links or buttons that should navigate or perform some action on click.

asChild

boolean

false

Use the asChild prop to compose the SandboxedOnClick functionality onto alternative element types or your own React components.