web

---

web / components/ui/data-table/render-helpers / renderComponent

Function: renderComponent()

renderComponent<T, Props>(component, props): RenderComponentConfig<T>

Defined in: components/ui/data-table/render-helpers.ts:77

A helper function to help create cells from Svelte components through ColumnDef's cell and header properties.

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

Type Parameters

T

T extends Component<any, { }, string>

Props

Props extends any

Parameters

component

T

A Svelte component

props

Props

The props to pass to component

Returns

RenderComponentConfig<T>

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

Example

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