Render

<Render/> provides more control and complexity when rendering Svelte components. It is used in conjunction with createRender to define custom components for headers, footers, and data cells.

Usage

<Render/> takes a single prop of with RenderConfig type.

`RenderConfig`

RenderConfig can either be:

a string or number for static content
a getter () => string | number for dynamic content
a ComponentRenderConfig returned from createRender for Svelte component content
a SnippetRenderConfig returned from createSnippetRender for Svelte 5 snippet content

`ComponentRenderConfig` can either be static or dynamic depending on its prop type. See also createRender.

v7 does not accept Svelte stores anywhere in a RenderConfig. Where 6.x took a readable store, pass a getter that reads rune state.

`Render#of: string | number`

Renders a simple text node.

<Render of="Hello, world" />

<Render of="Hello, world" />

`Render#of: () => string | number`

Renders a reactive text node. <Render> calls the getter inside its template, so any rune state the getter reads is tracked.

<script>
    let scrollY = $state(0)
</script>

<svelte:window bind:scrollY />
<Render of={() => scrollY} />

<script>
    let scrollY = $state(0)
</script>

<svelte:window bind:scrollY />
<Render of={() => scrollY} />

The same shape is what a label returns for a dynamic header:

table.group({
    header: (_, { rows }) => () => `Name (${rows().length} users)`,
    columns: [...]
})

table.group({
    header: (_, { rows }) => () => `Name (${rows().length} users)`,
    columns: [...]
})

`Render#of: ComponentRenderConfig`

Renders a Svelte component with props. ComponentRenderConfig is created with createRender.

<script>
    import Profile from './Profile.svelte'
    const profile = createRender(Profile, {
        name: 'Alan Turing'
    })
</script>

<Render of={profile} />

<script>
    import Profile from './Profile.svelte'
    const profile = createRender(Profile, {
        name: 'Alan Turing'
    })
</script>

<Render of={profile} />

`Render#of: SnippetRenderConfig`

Renders a Svelte 5 snippet with a single argument. SnippetRenderConfig is created with createSnippetRender.

<script>
    const greeting = createSnippetRender(hello, 'Alan Turing')
</script>

{#snippet hello(name)}
    <strong>Hello, {name}</strong>
{/snippet}

<Render of={greeting} />

<script>
    const greeting = createSnippetRender(hello, 'Alan Turing')
</script>

{#snippet hello(name)}
    <strong>Hello, {name}</strong>
{/snippet}

<Render of={greeting} />