Skip to content

Render custom component with FlexRender and Svelte 5 #5713

Answered by moalamri
moalamri asked this question in Q&A
Discussion options

You must be logged in to vote

I found it, thank you so much.

import { renderComponent } from "@tanstack/svelte-table";
import TextCell from './TextCell.svelte'

const column = {
    accessorKey: 'id',
    cell: ({ cell }) => renderComponent(TextCell, { cell })
}

Inside TextCell

<script lang="ts">
	import type { Cell } from '@tanstack/svelte-table';

	const { cell }: { cell: Cell<any, any> } = $props();
</script>

<div class:text-slate-300={!cell.getValue()}>
	{cell.getValue() || '--'}
</div>

I would appreciate if you add an example for that as it took me a while to figure it out :)

Replies: 1 comment 4 replies

Comment options

You must be logged in to vote
4 replies
@moalamri
Comment options

@moalamri
Comment options

Answer selected by moalamri
@c-kirkeby
Comment options

@moalamri
Comment options

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Category
Q&A
Labels
None yet
3 participants