1. API Reference
  2. Render

API Reference

Render

<Render/> provides more control and complexity when rendering Svelte components. It is used in conjuction 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
NOTE

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


Render#of: string | number

Renders a simple text node.

<Render of="Hello, world" />
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} />
0

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

Alan Turing