Docs
CodeRabbit
Cloudflare
Railway
SerpAPI
AG Grid
Netlify
Clerk
OpenRouter
WorkOS
Sentry
Unkey
Prisma
Electric
CodeRabbit
Cloudflare
Railway
SerpAPI
AG Grid
Netlify
Clerk
OpenRouter
WorkOS
Sentry
Unkey
Prisma
Electric
Table API Reference
Column API Reference
Row API Reference
Cell API Reference
Header API Reference
Features API Reference
Static Functions API Reference
Table API Reference

renderComponent

Function: renderComponent()

ts
function renderComponent<TComponent, TProps>(component, props?): RenderComponentConfig<TComponent>;
function renderComponent<TComponent, TProps>(component, props?): RenderComponentConfig<TComponent>;

Defined in: packages/svelte-table/src/render-component.ts:71

Wraps a Svelte component so it can be returned from a column definition renderer such as cell, header, or footer.

This is only to be used with Svelte Components - use renderSnippet for Svelte Snippets.

Type Parameters

TComponent

TComponent extends Component<any, { }, string>

TProps

TProps extends any

Parameters

component

TComponent

A Svelte component

props?

TProps

The props to pass to component

Returns

RenderComponentConfig<TComponent>

A RenderComponentConfig object that helps svelte-table know how to render the header/cell component.

Example

ts
// +page.svelte
const defaultColumns = [
  columnHelper.accessor('name', {
    header: header => renderComponent(SortHeader, { label: 'Name', header }),
  }),
  columnHelper.accessor('state', {
    header: header => renderComponent(SortHeader, { label: 'State', header }),
  }),
]
// +page.svelte
const defaultColumns = [
  columnHelper.accessor('name', {
    header: header => renderComponent(SortHeader, { label: 'Name', header }),
  }),
  columnHelper.accessor('state', {
    header: header => renderComponent(SortHeader, { label: 'State', header }),
  }),
]

See

https://tanstack.com/table/latest/docs/guide/column-defs