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:

1. a string or number for static content
2. a Readable<string> or Readable<number> for dynamic content
3. a ComponentRenderConfig returned from createRender for Svelte component content

Render#of: string | number

Renders a simple text node.

<Render of="Hello, world" />

<Render of="Hello, world" />

Render#of: Readable<string | number>

Renders a simple reactive text node.

<script>
    const pageY = writable(0)
</script>

<svelte:window bind:scrollY={$pageY} />
<Render of={pageY} />

<script>
    const pageY = writable(0)
</script>

<svelte:window bind:scrollY={$pageY} />
<Render of={pageY} />

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} />