pass component or html element to header/cell on svelte-table

[sharmapukar217]

I want to render some html instead of plain text on header and cell with svelte but i could'nt find any way. Is there any solution available

[phartenfeller]

I found the answer in this issue: #3971

There is a renderComponent function you can import from @tanstack/svelte-table.

Just pass the desired Svelte component and an object with the props:

const defaultColumns: ColumnDef<Invoice>[] = [
  // ...
  {
    header: 'Mail Receipt',
    cell: (info) => renderComponent(SendMailBtn, { id: info.row.id })
  }
]

The SendMailBtn is just a Svelte component:

<script lang="ts">
  export let id: number;

  function sendEmail() {
    console.log(id);
    /* do your magic here */
  }
</script>

<button class="button" on:click={sendEmail}>📧</button>

[sharmapukar217]

Oh i already figured that out. I was thinking the react way of inline component but unfortunately it is not supported in svelte. BTW that is working so no issue at all :-)