rubanraj54 / vue-bootstrap4-table

Advanced table based on Vue 2 and Bootstrap 4 ⚡️
MIT License
219 stars 57 forks source link

Feature Request: pass custom action buttons via slots #46

Closed nullday closed 5 years ago

nullday commented 5 years ago

Currently you have support of custom action buttons via a property in component. This is a nice feature and I use it a lot. But it's pretty limited when you need to customize it more deeper. For example, if I want to disable specific action button after the click or make it disable based on some condition. Or show some buttons based on user permissions.

Ideal solution would be ability to pass whole action buttons block via named slot. This way I will have ability to fully control all the buttons and implement my own custom logic in it.

I was trying to add my custom buttons block above the table, but then it looks not that perfect if global search is enabled.

rubanraj54 commented 5 years ago

Hi @nullday

Thanks for the valuable suggestion.

I've wrapped the existing custom action button group inside a new slot vbt-action-buttons. Now you can use your own button group instead of the default one.

I've already made the changes in the develop branch and you can use this feature from next release.

Example

<vue-bootstrap4-table :rows="rows" :columns="columns" :config="config">

    <template slot="vbt-action-buttons">
        <div class="btn-group float-right" role="group" aria-label="Basic example">
            <button type="button" class="btn btn-secondary" @click="test">Test</button>
            <button type="button" class="btn btn-secondary">Download</button>
            <button type="button" class="btn btn-secondary">Delete</button>
        </div>
    </template>

</vue-bootstrap4-table>

Note: use float-right class in the button group for good look.

Cheers, Ruby.