CODEWITHSUNDEEP
svelte
Karol F
Karol F

Reputation: 1566

How to make tagless slot template in Svelte like Vue

I'm falling love with svelte and I'm trying to do reusable "data table" like component. I want to define headers and rows templates by the client code, so I added headers and row slots in my Table.svelte component. I don't want to expose <tr>'s tags to client's code for reason of handling some click's events for entire row and so on. So, client's slot should only provide row template of <td>'s tags.

In Vue I can use "empty" tag <template> which render no tag at all.

How to achieve that in svelte like vue does?

Table.svelte

<script>
    import {onMount} from "svelte";

    let rows = [];
    let selected = null;

    onMount(() => {
        setTimeout(() => {
            rows = [
                {number: "01/30/2019"},
                {number: "01/30/2019"},
            ];
        }, 1000)
    });

    const handleSelect = i => () => {
        if (selected === i) {
            selected = null;
        } else {
            selected = i;
        }
    };
</script

<table>
    <thead>
            <tr>
                <slot name="headers"/>
            </tr>
    </thead>
    <tbody>
    {#each rows as row, i}
    <tr on:click={handleSelect(i)} class:is-selected="{selected === i}">
        <slot name="row" {row}  />
    </tr>
    {/each}
    </tbody>
</table>

App.svelte

<script>
    import Table from './Table.svelte'
</script>

<Table>
    <template slot="headers">
        <th>Number</th>
    </template>
    <template slot="row" let:row>
        <td>{row.number}</td>
    </template>
</Table>

This is link to REPL https://svelte.dev/repl/92b3a93855124da7b2d991f38353f744?version=3.12.1

Upvotes: 1

Views: 570

Answers (1)

MuhsinFatih
MuhsinFatih

Reputation: 2231

@JohnnyFun's answer in comments worked for me. Adding here with sample code as answer:

Replace templates with th and td:

<Table resource="invoices">
    <th slot="headers">Number</th>
    <td slot="row" let:row>
        {row.number}
    </td>
</Table>

Upvotes: 1

Related Questions