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	Actions
INV001	Paid	Credit Card	$250.00	See ngrok docs
INV002	Pending	PayPal	$150.00	See ngrok docs
INV003	Unpaid	Bank Transfer	$350.00	See ngrok docs
INV004	Paid	Credit Card	$450.00	See ngrok docs
INV005	Paid	PayPal	$550.00	See ngrok docs
INV006	Pending	Bank Transfer	$200.00	See ngrok docs
INV007	Unpaid	Credit Card	$300.00	See ngrok docs
Total			$2,500.00

import { IconButton } from "@ngrok/mantle/button";
import { SandboxedOnClick } from "@ngrok/mantle/sandboxed-on-click";
import { Table } from "@ngrok/mantle/table";
import { BookIcon } from "@phosphor-icons/react/Book";

<Table.Root>
	<Table.Element>
		<Table.Caption>A list of your recent invoices.</Table.Caption>
		<Table.Head>
			<Table.Row>
				<Table.Header className="w-25">Invoice</Table.Header>
				<Table.Header>Status</Table.Header>
				<Table.Header>Method</Table.Header>
				<Table.Header className="text-right">Amount</Table.Header>
				<Table.Header className="text-right">Actions</Table.Header>
			</Table.Row>
		</Table.Head>
		<Table.Body>
			{invoices.map((invoice) => (
				<Table.Row
					key={invoice.invoice}
					className="cursor-pointer"
					onClick={() => {
						window.alert(`Clicked on ${invoice.invoice}!`);
					}}
				>
					<Table.Cell className="font-medium">{invoice.invoice}</Table.Cell>
					<Table.Cell>{invoice.paymentStatus}</Table.Cell>
					<Table.Cell>{invoice.paymentMethod}</Table.Cell>
					<Table.Cell className="text-right">{invoice.totalAmount}</Table.Cell>
					<Table.Cell className="text-right">
						<SandboxedOnClick allowClickEventDefault>
							<IconButton label="See ngrok docs" icon={<BookIcon />} asChild>
								<a href="https://ngrok.com/docs" target="_blank" rel="noopener noreferrer" />
							</IconButton>
						</SandboxedOnClick>
					</Table.Cell>
				</Table.Row>
			))}
		</Table.Body>
		<Table.Foot>
			<Table.Row>
				<Table.Cell colSpan={3}>Total</Table.Cell>
				<Table.Cell className="text-right">$2,500.00</Table.Cell>
				<Table.Cell />
			</Table.Row>
		</Table.Foot>
	</Table.Element>
</Table.Root>;

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.

All props from div, plus:

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.

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	Actions
INV001	Paid	Credit Card	$250.00	See ngrok docs
INV002	Pending	PayPal	$150.00	See ngrok docs
INV003	Unpaid	Bank Transfer	$350.00	See ngrok docs
INV004	Paid	Credit Card	$450.00	See ngrok docs
INV005	Paid	PayPal	$550.00	See ngrok docs
INV006	Pending	Bank Transfer	$200.00	See ngrok docs
INV007	Unpaid	Credit Card	$300.00	See ngrok docs
Total			$2,500.00

import { IconButton } from "@ngrok/mantle/button";
import { SandboxedOnClick } from "@ngrok/mantle/sandboxed-on-click";
import { Table } from "@ngrok/mantle/table";
import { BookIcon } from "@phosphor-icons/react/Book";

<Table.Root>
	<Table.Element>
		<Table.Caption>A list of your recent invoices.</Table.Caption>
		<Table.Head>
			<Table.Row>
				<Table.Header className="w-25">Invoice</Table.Header>
				<Table.Header>Status</Table.Header>
				<Table.Header>Method</Table.Header>
				<Table.Header className="text-right">Amount</Table.Header>
				<Table.Header className="text-right">Actions</Table.Header>
			</Table.Row>
		</Table.Head>
		<Table.Body>
			{invoices.map((invoice) => (
				<Table.Row
					key={invoice.invoice}
					className="cursor-pointer"
					onClick={() => {
						window.alert(`Clicked on ${invoice.invoice}!`);
					}}
				>
					<Table.Cell className="font-medium">{invoice.invoice}</Table.Cell>
					<Table.Cell>{invoice.paymentStatus}</Table.Cell>
					<Table.Cell>{invoice.paymentMethod}</Table.Cell>
					<Table.Cell className="text-right">{invoice.totalAmount}</Table.Cell>
					<Table.Cell className="text-right">
						<SandboxedOnClick allowClickEventDefault>
							<IconButton label="See ngrok docs" icon={<BookIcon />} asChild>
								<a href="https://ngrok.com/docs" target="_blank" rel="noopener noreferrer" />
							</IconButton>
						</SandboxedOnClick>
					</Table.Cell>
				</Table.Row>
			))}
		</Table.Body>
		<Table.Foot>
			<Table.Row>
				<Table.Cell colSpan={3}>Total</Table.Cell>
				<Table.Cell className="text-right">$2,500.00</Table.Cell>
				<Table.Cell />
			</Table.Row>
		</Table.Foot>
	</Table.Element>
</Table.Root>;

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.

All props from div, plus:

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.