CODEWITHSUNDEEP
svelte
Chris Talman
Chris Talman

Reputation: 1169

Can a component be passed through other components?

I recently set out to try to build a standard <Table> component which I could use throughout my app. The idea is that all tables in the app can share common functionality in a maintainable manner. To this end, I thought it would be useful for the <Table> component to itself consist of components for each part of it, and for some of these components to be provided to each <Table> component for each unique use case.

<Table> might look as follows.

<table>
    <tbody>
        <tr>
            {{#each columns as column}}
                <th>{{column.name}}</th>
            {{/each}}
        </tr>
        {{#each items as item}}
            <Row item="{{item}}" columns="{{columns}}" Column="Column"></Row>
        {{/each}}
    </tbody>
</table>

<Row> might look as follows.

<tr>
    {{#each columns as column}}
        <Column item="{{item}}" column="{{column}}"></Column>
    {{/each}}
</tr>

<Column> might look as follows.

<td>{{item[column.key]}}</td>

The idea would be that, for each time a <Table> is used, a custom <Column> would be provided. This would be useful, because each table has different data, and so the columns need to be handled differently in each case. However, I have had trouble working out a way to essentially pass a component through other components. Is this possible in Svelte?

As an aside, I noticed that something like this seemed to be discussed on GitHub recently. While I am certainly aware that it is possible to instantiate a component within a component using a new constructor, this approach would not be hooked into the Svelte lifecycle, which is important.

Upvotes: 0

Views: 131

Answers (1)

Rich Harris
Rich Harris

Reputation: 29585

There isn't currently a concise way to do this (it's possible, but you would have to do the mounting/unmounting logic in oncreate and ondestroy, and add observers inside oncreate to keep everything up to date), but it's something we'll probably implement very soon — follow #640 for updates.

Upvotes: 2

Related Questions