Render children in renderComponent

[rogerfar]

I don't believe there is a good way to pass children to renderComponent, for example:

		{
			header: 'Name',
			sortBy: 'name',
			initialSort: 'asc',
			accessorKey: 'name',
			cell: ({ row }) => renderComponent(Button, { href: `/customers/${row.original.customerId}`, variant: 'link' })
		},

The Button component requires a child snippet for the caption of the button.

[walker-tx]

Hi @rogerfar - thank you for the feedback. Would you share a button or REPL of the button code, so I can understand what it's expecting?

[rogerfar]

Hi @walker-tx ! Sorry yes, I should've included that:
https://github.com/rogerfar/svelte5-tanstack-table-reference
https://stackblitz.com/~/github.com/rogerfar/svelte5-tanstack-table-reference
In the rendering-components example I added a Button component reference.

The button needs to render children, but I'm not sure how to pass those in. Probably easiest would be to give renderComponent a 3rd argument for children?

[walker-tx]

Got it - thank you for these. When I think about how I would address this need in my own project, I think I would elect to make a wrapper component:

<!-- button.svelte -->

<script lang="ts">
    const { children } = $props();
</script>

<button>
    {@render children?.()}
</button>

<!-- customer-table-button.svelte -->

<script lang="ts">
  import Button from './button.svelte';

  const { customerId, text }: { customerId: string, text: string } = $props();
</script>

<Button variant="link" href="/customers/${row.original.customerId}">
  {text}
</Button>

<!-- +page.svelte -->

<script lang="ts">
import CustomerTableButton from './customer-table-button.svelte';

// ...
  {
      header: 'Name',
      sortBy: 'name',
      initialSort: 'asc',
      accessorKey: 'name',
      cell: ({ row, cell }) => renderComponent(
        Button, 
        { 
          customerId: row.original.customerId, 
          text: cell.getRow() 
        }
      )
    },
// ...
</script>

// ... table markup ...

I can see why one might want to avoid this because it necessitates creating a single-use file for the wrapper component. But, aside from that con, I'm struggling to think of other benefits to allowing children to be passed via the renderComponent function.

To be clear - I think this is a viable ergonomic improvement that you're requesting. I suppose I also just want to understand the pain points this would be solving for developers downstream in order to offer the best approach.

Interested to hear what you think!

[rogerfar]

After doing a few tables my main usecases are links / buttons that come from standard component libraries. To make a wrapper around a button component just to abstract children to a prop is a bit of overhead.

Just wondering how we would pass named children though.

[walker-tx]

@rogerfar after some research, it's apparent this is a long-running discussion. Some folks on that discussion provide methods of passing snippets in the way that you require:

renderComponent(Button, { children: ($$anchor: Node) => customSnippet($$anchor, () => cell.getValue())

But this throws TypeScript errors, and it's honestly a bit too messy for me to know how to incorporate into the library. You can do this in your own project though.

I've posted a comment on the Svelte issue linked. Hopefully they'll be able to provide a solution before long.

[walker-tx]

Hey @rogerfar - 8 months on, wanted to share that I haven't forgotten about this. The issue I linked above is still very much active and unresolved. Thank you again for the feedback.