Passing a DOM node primitive to a column definition

[c-kirkeby]

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 href value. I tried to do something similar to the EditableCell example here but there doesn't seem to be a simple way to just pass an anchor tag, so I created a wrapper around an anchor tag that looks like this:

<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 on:click event since I want it to show as a link. Any help would be greatly appreciated! I'll try to set up a minimal reproduction when I can if that helps.

[c-kirkeby]

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.

[bryanmylee]

Glad you got it! Unfortunately because we don't have in-JavaScript templates in Svelte, there's not much we can do without the custom component.

[c-kirkeby]

I appreciate your response! I thought that might be the case so not much I can do about that. Svelte is still awesome and your library is excellent.