optimistic-gold

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

optimistic-goldOP•12mo 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.

quickest-silver•11mo 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?

stormy-gold•11mo ago

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

quickest-silver•11mo 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'});
}

quickest-silver•11mo ago

This returns me a very strange error

stormy-gold•11mo ago

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

quickest-silver•11mo ago

Yes, exactly

stormy-gold•11mo ago

hmm

quickest-silver•11mo ago

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

stormy-gold•11mo ago

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

quickest-silver•11mo ago

so maybe you introduced some newer feature (?)

stormy-gold•11mo ago

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

quickest-silver•11mo 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

stormy-gold•11mo ago

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

quickest-silver•11mo ago

yes, exactly

stormy-gold•11mo 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?

quickest-silver•11mo 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???)

quickest-silver•11mo ago

stormy-gold•11mo ago

hmm

quickest-silver•11mo ago

wait what just one sec

stormy-gold•11mo 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

quickest-silver•11mo ago

Yes, indeed now it compiles and the string appears

stormy-gold•11mo ago

ok cool

quickest-silver•11mo ago

This is very strange 😄

stormy-gold•11mo ago

you in construction?

quickest-silver•11mo ago

yea, more or less

stormy-gold•11mo ago

cool me too

quickest-silver•11mo ago

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

stormy-gold•11mo ago

keep it up, construction needs innovators ok so

quickest-silver•11mo 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

stormy-gold•11mo ago

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

quickest-silver•11mo ago

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

stormy-gold•11mo ago

yeah but also something is just off about the typescript

quickest-silver•11mo ago

yeah that I figured it as well 😄

stormy-gold•11mo ago

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

quickest-silver•11mo ago

yeah

stormy-gold•11mo 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

quickest-silver•11mo ago

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

stormy-gold•11mo 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

quickest-silver•11mo ago

good idea

stormy-gold•11mo ago

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

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

quickest-silver•11mo 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

stormy-gold•11mo ago

so this is mine in vscode

stormy-gold•11mo ago

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

quickest-silver•11mo ago

lol

stormy-gold•11mo ago

would you see if vscode gives you the same problem?

quickest-silver•11mo ago

oh boy let me try

stormy-gold•11mo ago

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

quickest-silver•11mo ago

yeah, might be

stormy-gold•11mo ago

is this a sveltekit project?

quickest-silver•11mo ago

yes autogenerated

stormy-gold•11mo ago

hmm ok did you modify the tsconfig?

quickest-silver•11mo ago

vsc looks happy ^-^

stormy-gold•11mo ago

huh

quickest-silver•11mo ago

so... big issue for nothing 🗿

stormy-gold•11mo ago

well we learned somethinf

quickest-silver•11mo 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)

stormy-gold•11mo 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

optimistic-goldOP•11mo 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

stormy-gold•11mo 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

quickest-silver•11mo 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

stormy-gold•11mo 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.

quickest-silver•11mo 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?

stormy-gold•11mo 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

quickest-silver•11mo ago

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

optimistic-goldOP•11mo 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

stormy-gold•11mo 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?