Render custom component with FlexRender and Svelte 5

[moalamri]

Hi,
Previously it was possible to render a custom cell using flexRender function, but now all I can see in TanStack Table, FlexRender is a component that requires both content and context which are provided by cell.column.columnDef.cell and cell.getContext().

When I try to use a component in those two params it fails with an error about component anchor.
Even if I use cell prop as a returned component it also fails.

How to achieve that?

[KevinVandy]

Are you following the v9 examples on GitHub?

[moalamri]

Hi @KevinVandy
Thank you for answering. I do follow the example on alpha branch, I don't see any example of rendering a custom cell component.

[moalamri]

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 :)

[c-kirkeby]

Have you found a way to transform the value before it gets passed as a cell? For example if we need to do cell: (info) => new Date(info.getValue() as string).toLocaleString() it gets a runtime error because it's not a Cell type any more.

[moalamri]

cell is a property of info you should destruct it or user it as following:

Date(info.cell.getValue()).toLocaleString()