Vue-tables-2: Create checkbox in header and in rows as a component for mass actions

[nuneramu]

Can you give a proper functional example with a jsfiddle, I tried a lot it is very difficult to implement.
I want to implement like the one in https://jsfiddle.net/thanhmabo/atxj3786/
If everything works as expected then i want to create a component which can be used globally.

Example: single file component
Grid.vue

<template>
    <v-client-table :data="users" :columns="columns" :options="options"></v-client-table>
</template>
<script>
    export default {
        computed: {
            selectAll: {
                get: function () {
                    return this.users ? this.selected.length === this.users.length : false
                },
                set: function (value) {
                    var selected = []
                    if (value) {
                        this.users.forEach(function (user) {
                            selected.push(user.id)
                        })
                    }
                    this.selected = selected
                }
            }
        },
        methods: {
            deleteMe: function (selected) {
            }
        },
        data () {
            return {
                users: [
                    { 'id': '1', 'name': 'Shad Jast', 'email': '[email protected]' },
                    { 'id': '2', 'name': 'Duane Metz', 'email': '[email protected]' },
                    { 'id': '3', 'name': 'Myah Kris', 'email': '[email protected]' },
                    { 'id': '4', 'name': 'Dr. Kamron Wunsch', 'email': '[email protected]' }
                ],
                selected: [],
                columns: ['select', 'name'],
                options: {
                    // see the options API
                    filterByColumn: true,
                    headings: {
                        select: function (h) {
//                          return <input type="checkbox" v-model={this.selectAll}/>
                            return <div class="checkbox" style="display: inline-block; margin-top: 0; margin-bottom: 0;">
                                <label>
                                    <input type="checkbox" class="checkbox style-0" v-model={this.selectAll}/>
                                    <span></span>
                                </label>
                            </div>
                        }
                    },
                    templates: {
                        select: function (h, row) {
                            return (
                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox" class="checkbox style-0" v-model={this.selected} value={row.id}/>
                                        <span></span>
                                    </label>
                                </div>
                            )
                        },
                        delete: function (row) {
                            return `<a href='javascript:void(0);' @click='$parent.deleteMe(${row.id})'><i class='fa fa-erase'></i></a>`
                        },
                        username: function (h, row) {
                            return <a href={'#/auth/sip_user_edit/' + row.id}><i class='fa fa-edit'></i> {row.username}</a>
                        }
                    }
                }
            }
        }
    }
</script>

[matfish2]

I've recently implemented exactly this functionality. Here are the essentials:

<template>
    <v-server-table ref="table"
    url='/my-url' 
    :columns="columns">

    <div slot="filter__id">
        <input type="checkbox" 
        class="form-control check-all" 
        v-model='allMarked' 
        @change="toggleAll()">
    </div>  

    <template slot="id" scope="props">
        <input type="checkbox" 
        @change="unmarkAll()" 
        class="form-control" 
        :value="props.row.id" 
        v-model="markedRows">
    </template>

</v-server-table>
</template>

<script>
export default {

    data() {
        return {
                    columns:['id','columnA','columnB'],
            allMarked:false,
            markedRows:[]
        }
    }
    methods:{
        unmarkAll() {
            this.allMarked = false;
        },
        toggleAll() {
            this.markedRows = this.allMarked?this.$refs.table.data.map(row=>row.id):[];         
        }
    }
}
</script>

[vesper8]

I got your example to work @matfish2 and it looks nice

I had to enable filterByColumns and also make filterable:true but I guess that's a given

My one gripe with this approach is that it adds a row underneath the column headers. I really would have wanted a solution for replacing the column header itself with a checkbox and not adding one under it... is the only way to achieve this to use custom templates @matfish2 ?

[asiamov]

So I had a go at it, maybe it's useful for somebody coming across this:

<template slot="id" slot-scope="props">
      <input 
           type="checkbox"
           class="form-control"
           :value="props.row.id"
           v-model="markedRows">
</template>
...
(options)
options: {
  headings: {
    id: function (h) {
       var self = this;
       return h('input', {
                        attrs: {
                           type: 'checkbox'
                        },
                        domProps: {
                            value: self.value
                         },
                         'class': 'form-control check-all',
                          on: {
                            change: self.toggleAll,
                            input: function (event) {
                               self.value = event.target.value
                               self.$emit('input', event.target.value)
                            }
                         }
       });
    }
  }
}

(methods)
toggleAll() {
   this.markedRows = this.allMarked ? [] : this.$refs.table.data.map(row => row.id);
   this.allMarked = !this.allMarked;
 }

edit:
Actually one doesn't need the

 input: function (event) {
                               self.value = event.target.value
                               self.$emit('input', event.target.value)
                            }

part when toggling "allMarked" manually

[Sakthi002]

header checkbox not unchecking sir,,,plz help me

[qadirfarooq]

Hi,
it never worked, i am still struggling. i need to initially set the value of checkboxes to a values from Axios get method. after that in the header i want checkbox which should select/deselect all checkboxes. please add a running example in JS fiddle if possible.
Thanks.

[THCMAGO]

Gracias XD
Lo andaba buscando.

[matfish2]

added to private repo for subscribed users as selectableRows option
https://matanya.gitbook.io/vue-tables-2/selectable-rows