1. API Reference
  2. Render

API Reference


<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.


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


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

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.

  const pageY = writable(0);

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

Render#of: ComponentRenderConfig

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

  import Profile from './Profile.svelte';
  const profile = createRender(Profile, {
    name: 'Alan Turing'

<Render of={profile} />
Alan Turing

Alan Turing