Passing slot from parent to children

[gabrieloliverio]

Hello! First of all, I'd like to thank and congratulate you for developing such a great component! It's by far the best I tried, among all the similar components listed in Awesome-Vue.

I created a data-table component, which uses vuetable-2, with pagination, pagination info and style settings. Instead of using vuetable-2 inside by components, I use this common component, but I've got to customize the actions slot, with custom buttons and etc.

What I want to to do is passing a named slot actions from a given component listing, for example, to my data-table component which passes to vuetable-2. Is that anyway possible? I'm reading the scoped slots documentation and searched a lot but failed miserably. I'm kind of newbie in Vue.js also, so, I'm sorry if my doubt sound too silly.

I's be something like this, in listing:

       <data-table ref="myTable"
            :api-url="apiUrl"
            :fields="fields"
            :append-params="foo">
            <template slot="actions" scope="props">
                <div class="custom-actions">
                    <button class="btn btn-primary" @click="onAction('edit-item', props.rowData, props.rowIndex)"><span class="glyphicon glyphicon-edit"></span> Edit</button>
                    <button class="btn btn-danger" @click="onAction('delete-item', props.rowData, props.rowIndex)"><span class="glyphicon glyphicon-trash"></span> Delete</button>
                </div>
            </template>
        </data-table>

I don't know what I do in data-table, to pass the slot to vuetable-2.

Thanks you for your attention.

[ratiw]

@gabrieloliverio Thanks.

As for your question in passing the actions slot into Vuetable, as far as my knowledge and understanding of Vue, I don't think it is possible. It might be possible if you use __component instead though as you can register the component globally and make your data-table component to make use of it by default.

I know that the need to do this is due to the fact the UI for the data table seems to be the same on different parts of your web app. So, naturally, you would want to make a component that wraps Vuetable and reuse it in different places instead of having to redeclare everything again and again.

I have been thinking about this problem and have an idea to explore to solve this problem, but so far still very busy with an important work that I cannot find enough time to work on it. Sorry about that.

[cristijora]

Please see this fiddle. You have to register the slot under the fields __slot:custom-actions where custom-action is the slot name.

[gabrieloliverio]

@ratiw Thanks for your quick answer!

Indeed I'm using __component to achieve the desired behavior. Today I found a thread in the Vue.js forum, of a guy trying to do the same as me[1], using vuetable-2 inclusive! According to a comment, it seems to be possible, passing the slot using the render function, but I was not able to accomplish, unfortunately.

Talking about features, do you plan to implement a kind of client side table? That way, it would be possible to bind an array of objects to the table, the same way the DataTables[2] and vue-tables-2 [3] do.

[1] https://forum.vuejs.org/t/passthrough-scoped-slot-to-children-possible/5789/2 [2] https://datatables.net/ [3] https://github.com/matfish2/vue-tables-2#client-side

Thanks!

[ratiw]

@gabrieloliverio Using render function to pass down the scoped slot is pretty advance to me. But thanks for pointing to the forum anyway.

I did actually implemented a limited functionality of the so-called client side table and it's already in the develop branch. The "limited functionality" means you can pass existing data array to Vuetable, bu you will lose the ability to have the server side related functions like sorting, filtering.

Vuetable was created to work with the data from the server side from the very beginning. The only reason for adding the ability to use data on the client side for me is to use Vuetable to interact with data items displayed in the business forms (e.g. Invoice, Quotation, etc.)

[gabrieloliverio]

@ratiw Thanks for your attention! I'll keep trying to use the render function... it's very advanced for me too.

[cristijora]

@gabrieloliverio Look at the comment above and the fiddle. Isn't that what you need?