equal-aqua

Render arbitrary HTML for specific column

Sometimes I need to apply specific styles for certain columns like monospace font, and add additional markups like <a> to create links. Is there a way to do that without relying on rendering Svelte components? Nesting components that's only a span with a class is not really fun and it's hard to deeply nest components with this style. Directly returning HTML in cell doesn't work (obviously).

68 Replies

equal-aquaOP•15mo ago

Actually I found a workaround using snippets in Svelte 5: I can create a lightweight snippet wrapper:

<script lang="ts">

  import type { Snippet } from "svelte"

  let {snippet, value}: {snippet: Snippet<[{value: any}]>, value: any} = $props()

</script>

{@render snippet(value)}

<script lang="ts">

  import type { Snippet } from "svelte"

  let {snippet, value}: {snippet: Snippet<[{value: any}]>, value: any} = $props()

</script>

{@render snippet(value)}

then render the desired content with it:

cell: info => renderComponent(SnippetWrapper, {snippet: column, value: info.getValue()}),

cell: info => renderComponent(SnippetWrapper, {snippet: column, value: info.getValue()}),

{#snippet column(value)}
  <!-- Any content here -->
{/snippet}

{#snippet column(value)}
  <!-- Any content here -->
{/snippet}

Not sure if there is a Svelte 4 equivalent though.

rare-sapphire•14mo ago

Hey @はるか , what version of the library are you using? With the latest alpha release I'm not able to use your example to pass propst to the snippet unfortunately 😦 Sorry @Walker for the ping, by any chance do you have any suggestion for a better solution?

optimistic-gold•14mo ago

can you share code, or a repl reproducing your problem?

rare-sapphire•14mo ago

Sure, one sec I'm using the solution posted in this topic; I had to declare an alias because it looks like I can't use directly the string type in the snippet declaration. Anyway, the snippet is just a simple test for now. I'm trying to pass a string to it to render it.

type stringa = string;

{#snippet tableCheckbox(text: stringa)}
    {text}
{/snippet}

type stringa = string;

{#snippet tableCheckbox(text: stringa)}
    {text}
{/snippet}

I'm defining the table header column (yes in the future the snippet will contain a Checkbox from bits-ui) like this:

id: 'select-col',
header: ({ table }: { table: Table<Rtu> }) => {
    let status = isChecked(table.getIsAllRowsSelected(), table.getIsSomeRowsSelected());
    return renderComponent(SnippetWrapper, {snippet: tableCheckbox, text: 'abc'});
}

id: 'select-col',
header: ({ table }: { table: Table<Rtu> }) => {
    let status = isChecked(table.getIsAllRowsSelected(), table.getIsSomeRowsSelected());
    return renderComponent(SnippetWrapper, {snippet: tableCheckbox, text: 'abc'});
}

rare-sapphire•14mo ago

This returns me a very strange error

optimistic-gold•14mo ago

hmmm i didn't really design renderComponent with snippets in mind you define the snippet in the markup, yeah?

rare-sapphire•14mo ago

Yes, exactly

optimistic-gold•14mo ago

hmm

rare-sapphire•14mo ago

Consider that I'm not using the latest version of the alpha from the repo

optimistic-gold•14mo ago

is it common to use snippets from the markup within the script tag?

rare-sapphire•14mo ago

so maybe you introduced some newer feature (?)

optimistic-gold•14mo ago

i haven't introduced new features, i just try to fix stuff when kevin asks and keep examples updated

rare-sapphire•14mo ago

ow, that's a hard question. right now I haven't used them a lot, but usually I've declared them to make markup a bit cleaner to read. however, sometimes I found myself accepting snippets as props

optimistic-gold•14mo ago

something is off here hmm you have a file called snippet-wrapper.svelte or something like that?

rare-sapphire•14mo ago

yes, exactly

optimistic-gold•14mo ago

would you remove the type on the text param for the snippet, and lmk what the typechecker says after? also - is it rendering, but just not passing type check? or is it failing to render?

rare-sapphire•14mo ago

Ok, removing it errors out because of the missing any, however I can't use it as it seems that for some reason it isn't a valid keyword (wtf???)

rare-sapphire•14mo ago

optimistic-gold•14mo ago

hmm

rare-sapphire•14mo ago

wait what just one sec

optimistic-gold•14mo ago

ngl something seems off about your component file, potentially. just bc of the type issue but i'm still interested to know if the component is rendering in spite of the type issues. The code should still try to compile and render even if TS is mad

rare-sapphire•14mo ago

Yes, indeed now it compiles and the string appears

optimistic-gold•14mo ago

ok cool

rare-sapphire•14mo ago

This is very strange 😄

optimistic-gold•14mo ago

you in construction?

rare-sapphire•14mo ago

yea, more or less

optimistic-gold•14mo ago

cool me too

rare-sapphire•14mo ago

just for fun actually I'm a CS student, but I love automation stuff

optimistic-gold•14mo ago

keep it up, construction needs innovators ok so

rare-sapphire•14mo ago

cool, thanks ❤️ The only issue is that if I try to pass something that isn't a predefined string like

cell: ({row}: {row: Rtu}) => {
    return renderComponent(SnippetWrapper, {snippet: tableCheckbox, value: row.name});
}

cell: ({row}: {row: Rtu}) => {
    return renderComponent(SnippetWrapper, {snippet: tableCheckbox, value: row.name});
}

then it renders nothing

optimistic-gold•14mo ago

would you try changing the snippet param from text to value? hmm that probably won't do anything

rare-sapphire•14mo ago

doesn't change Ok this is a mistake on my part, I don't know the correct type passed for the cell renderer

optimistic-gold•14mo ago

yeah but also something is just off about the typescript

rare-sapphire•14mo ago

yeah that I figured it as well 😄

optimistic-gold•14mo ago

any and string should not be giving you issues in the markup

rare-sapphire•14mo ago

yeah

optimistic-gold•14mo ago

can you show me the opening <script> tag pls? of the component that renderes your table or has this tableCheckbox snipppet if you have 2 script tags, send both

rare-sapphire•14mo ago

Both the table renderer and the snippet are in the same file

optimistic-gold•14mo ago

ok try this - make a blank svelte file in your project, and define a snippet w/in it. give it a param and see if you can assign its type to any or string

rare-sapphire•14mo ago

good idea

optimistic-gold•14mo ago

{#snippet test(v: string)}
...

{#snippet test(v: string)}
...

rare-sapphire•14mo ago

Yeah the IDE says I can't, but it looks like I'm just able to compile without any issue and it displays fine Even with the tableCheckbox snippet in the other file Yup this is an IDE bug

optimistic-gold•14mo ago

so this is mine in vscode

optimistic-gold•14mo ago

it's just mad that i defined it but didn't use intellij's svelte support is kind of mid for some reason

rare-sapphire•14mo ago

lol

optimistic-gold•14mo ago

would you see if vscode gives you the same problem?

rare-sapphire•14mo ago

oh boy let me try

optimistic-gold•14mo ago

it may also technically be an issue with your ts config, maybe?

rare-sapphire•14mo ago

yeah, might be

optimistic-gold•14mo ago

is this a sveltekit project?

rare-sapphire•14mo ago

yes autogenerated

optimistic-gold•14mo ago

hmm ok did you modify the tsconfig?

rare-sapphire•14mo ago

vsc looks happy ^-^

optimistic-gold•14mo ago

huh

rare-sapphire•14mo ago

so... big issue for nothing 🗿

optimistic-gold•14mo ago

well we learned somethinf

rare-sapphire•14mo ago

never trust intellij Can I help in some way to thank for the support? (Still, being able to use Components or Snippets would be cool without the wrapper)

optimistic-gold•14mo ago

part of me wonders if you technically can i'm pretty sure all svelte components are snippets now, under the hood i'll need to test the theory later i don't think so. if you pray though, i would appreciate your prayers for my job search. grace and peace to you

equal-aquaOP•14mo ago

I found myself abusing the snippet hard after I migrated to svelte 5, so I'm not actually sure if this is an anti-pattern, however this is the best way to be flexible right now I think

optimistic-gold•14mo ago

Have you seen this? https://svelte-5-preview.vercel.app/docs/imports#svelte-createrawsnippet

Imports • Docs • Svelte 5 preview

Imports • Svelte 5 preview documentation

rare-sapphire•14mo ago

I think this should be "almost" the default syntax. Having the possibility of using full-fledged nested components would be very cool, especially for logic and the such

optimistic-gold•14mo ago

I hear ya. It's good to see that creating snippets in markup and using them in script is possible, but it feels odd to me personally. Information doesn't usually flow in that direction.

rare-sapphire•14mo ago

absolutely; if I've understood you're referring the flow direction of the Svelte components, which go from the script tag to describe functionality and into the html?

optimistic-gold•14mo ago

yep it's more of a personal preference though, i'm not sure that there's a rulebook anywhere that says you can't do it

rare-sapphire•14mo ago

yeah, however I like more what you're saying; keeping order is a priority for me as well

equal-aquaOP•14mo ago

somehow I didn't see the continued discussion, but yeah I understand why this exists, but as a very old-school person I'd like to avoid defining snippets in JS - I'd gladly use whatever magic Svelte has to offer so I can just write markups and scripts separately

optimistic-gold•14mo ago

FYI - I threw this together over the last week or so: https://svelte5-and-tanstack-table-v8.vercel.app/ It's a reference on using Svelte 5 w/ Table v8 - should give you some stability while v9 is under development.

Gaming

Programming

Render arbitrary HTML for specific column

Did you find this page helpful?