-
I'm fairly new to Svelte so please excuse my lack of Svelte expertise (mostly experienced with React). I'm trying to define a column which contains an anchor tag with a <script lang="ts">
import type { HTMLAnchorAttributes } from "svelte/elements";
type $$Props = HTMLAnchorAttributes;
let className: $$Props["class"] = undefined;
let href: $$Props["href"] = undefined;
export { className as class };
</script>
<!-- I had to explicitly define the {href} to make my linter happy -->
<a class={className} {href} {...$$restProps}>
<slot />
</a> My column definition looks like this, but slot is just being put on the element as a custom property so that's not quite right. I'd prefer not to do an on:click table.column({
accessor: "name",
header: "Name",
cell: ({ row, column, value }) =>
createRender(DataTableLink, {
href: `/items/${row.id}`,
slot: value,
}),
}), I would prefer not to do a component with an |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 2 replies
-
I figured it out - you can chain a slot method off the render: table.column({
accessor: "name",
header: "Name",
cell: ({ row, value }) =>
createRender(DataTableLink, {
href: `/items/${row.id}`,
}).slot(value ?? ""),
}), If anybody knows how to achieve it without the custom component, that would be awesome, but this solves my problem for now. |
Beta Was this translation helpful? Give feedback.
I figured it out - you can chain a slot method off the render:
If anybody knows how to achieve it without the custom component, that would be awesome, but this solves my problem for now.