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.
import { IconButton } from "@ngrok/mantle/button";
import { SandboxedOnClick } from "@ngrok/mantle/sandboxed-on-click";
import {
Table,
Table.Body,
Table.Caption,
Table.Cell,
Table.Foot,
Table.Head,
Table.Header,
Table.Root,
Table.Row,
} 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-[100px]">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" />
</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.
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: