How to make entire Row in Table clickabe?

[martinjo]

It feels as I'm missing something very fundamental, but I can't seem to get the on:click event working on my table rows.

Why doesn't my on:click handler on Row fire? 😕

<Table.Root>
<Table.Caption>A list of your recent invoices.</Table.Caption>
<Table.Header>
<Table.Row on:click={onClickHandler}>
<Table.Head class="w-[100px]">Invoice</Table.Head>
<Table.Head>Status</Table.Head>
<Table.Head>Method</Table.Head>
<Table.Head class="text-right">Amount</Table.Head>
</Table.Row>
</Table.Header>
<Table.Body>
<Table.Row>
<Table.Cell class="font-medium">INV001</Table.Cell>
<Table.Cell>Paid</Table.Cell>
<Table.Cell>Credit Card</Table.Cell>
<Table.Cell class="text-right">$250.00</Table.Cell>
</Table.Row>
</Table.Body>
</Table.Root>

[pitzzahh]

It works. You added the on:click onto the header row. Also check if there on:click on table-row.svelte component file.
Here is a sample:

<script lang="ts">
	import { cn } from "$lib/utils";
	import type { HTMLAttributes } from "svelte/elements";

	type $$Props = HTMLAttributes<HTMLTableRowElement> & {
		"data-state"?: unknown;
	};

	let className: $$Props["class"] = undefined;
	export { className as class };
</script>

<tr
	class={cn(
		"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
		className
	)}
	{...$$restProps}
	on:click // check if you have this. When I installed this component it does not have it and I added it. It now works
>
	<slot />
</tr>

<script>
	import Hero from '$lib/components/Hero.svelte';
	import { onMount } from 'svelte';
	import * as Table from '$lib/components/ui/table';
	import { Button } from '$lib/components/ui/button';
	/**
	 * @type {any[]}
	 */
	let users = [];
	onMount(() => {
		fetch('https://dummyjson.com/users?limit=100')
			.then((res) => res.json())
			.then((json) => {
				users = json.users;
				console.log('Fetched');
				console.log(users);
			});
	});
</script>

<Hero />
<Table.Root>
	<Table.Caption>A list of your recent invoices.</Table.Caption>
	<Table.Header>
		<Table.Row>
			<Table.Head class="w-[100px]">First Name</Table.Head>
			<Table.Head>Last Name</Table.Head>
			<Table.Head>Maiden Name</Table.Head>
			<Table.Head class="text-right">Age</Table.Head>
		</Table.Row>
	</Table.Header>
	<Table.Body>
		{#each users as user, i (i)}
			<Table.Row on:click={() => console.log('Clicked row')}>
				<Table.Cell class="font-medium">{user.firstName}</Table.Cell>
				<Table.Cell>{user.lastName}</Table.Cell>
				<Table.Cell>{user.maidenName}</Table.Cell>
				<Table.Cell class="text-right">{user.age}</Table.Cell>
				<Button class="self-end">Delete</Button>
			</Table.Row>
		{/each}
	</Table.Body>
</Table.Root>

[martinjo]

Thanks! I got this working :). Somewhat related, is there a simple way to make a table row show a context menu when right clicked using the shadcn-svelte components. When I try my table columns no longer align. I guess what I’m asking for is an example of how to make the complete row (or rather all rows) in a table acts as triggers for a contextmenu…

Any suggestions or pointers to other examples I can look at?

[pitzzahh]

I do not know if that is possible. Maybe use Data Table?