Vue-tables-2: add checkbox to header

[kife-design]

Is there a possibility to add a component to a header label?

I have a table, and the first column is a checkbox, so you can select a set of rows and perform an action to them. I would like to add a "select all" checkbox in the header but i dont see how i can do this. Can anyone help me with this?

[jayarc]

I've been experimenting with ways to do this with templates. So far I have an implementation that shows the checkboxes but unfortuanately does not correctly move them on sorting.

[matfish2]

I've added a possibility to pass a function to render dynamic HTML. E.g:

headings:{
   title: function(h) {
     return <h6><input type="checkbox"/>Title</h6>
   }
}

Note that I'm using JSX, not HTML. Of course you can also write the node using plain JavaScript.

[dpacmittal]

How do I handle events on clicking the heading checkbox?

[freeman-g]

@dpacmittal

Here's how I'm handling events.

I have the template v-modeled to a selected property:

         <v-client-table ref="myGrid" :data="tableData" :columns="myColumns">
            <template slot="selected" scope="props">
              <div>
                <input v-model="props.row.selected" type="checkbox">
              </div>
            </template>
          </v-client-table>

Here's the heading element:

          headings: {
            selected: function (h) {
              return h('input', {
                attrs: {
                  type: 'checkbox',
                  id: 'selectAllCheckbox'
                },
                on: {
                  click: (e) => {
                    this.selectAll(e.srcElement.checked)
                  }
                },
                ref: 'selectAllCheckbox'
              })
            },

I have a selectAll method that sets or unsets the underlying property when the heading is clicked:

      selectAll(checked) {
        let length = tableData.length
        for (let i = 0; i < length; i++) {
          if (checked) {
            tableData[i].selected = true
          } else {
            tableData[i].selected = false
          }
        }
      },

[jeff-pang]

following up on the @freeman-g 's example. an alternative to the render function selected is to replace it using scope-slot like this

<!-- checkbox for each row-->
<template slot="selected" slot-scope="props">
            <input type='checkbox' id='checkbox' v-model='props.row.isChecked'>
</template>
<!-- checkbox for each header (prefix column name with h__-->
<template slot="h__selected" slot-scope="props">
            <input type='checkbox' id='checkbox' @click='selectAll()'>
</template>

define a variable to toggle check/uncheck states. in my example i use isSelected

selectAll() {
     let length = this.tableData.length
     this.isRead=!this.isSelected;

     for (let i = 0; i < length; i++) {
         this.tableData[i].isChecked=this.isSelected;
     }
}

[singhabahu]

@jeff-pang @freeman-g @matfish2 I've been trying to add a checkbox for the table header but below code didn't work. However code to add checkbox to each row works fine.

<template slot="h__selected" slot-scope="props">
     <input type='checkbox' id='checkbox' @click='selectAll()'>
</template>

any idea where I made the mistake?

Here's my code

{
      tableColumns: [
        "check",
        "Name",
        "WindowId",
        "Enabled",
        "Duration",
        "Description"
      ],
      tableData: [],
      tableOptions: {
        headings: {
          Name: "Name",
          WindowId: "Window ID",
          Enabled: "Status",
          Duration: "Duration",
          Description: "Description"
        },
        sortable: ["Name", "WindowId", "Enabled", "Duration", "Description"],
        filterable: ["Name", "WindowId", "Enabled", "Duration", "Description"]
}

This is how I render my table

<template slot="h__check" slot-scope="props">
     <input type='checkbox' id='checkbox' @click='selectAllAtOnce()'>
</template>

[JonathanLouw]

@singhabahu I know its been a while but maybe this will help someone else, if you leave out the slot-scope attribute it should work:

<template slot="h__check">
     <input type='checkbox' id='checkbox' @click='selectAllAtOnce()'>
</template>

[singhabahu]

@JonathanLouw thanks for the input. will look into this when I get a free time.

[ChetnaGupta]

How can we add checkboxes to each row ? Apparently below code doesnt work for me
<template slot="selected" slot-scope="props"> <input type='checkbox' id='checkbox' v-model='props.row.isChecked'> </template>

[songoo]

JonathanLouw - Tnx much that one helped , seems 'h__' slot still do not like slot-scope="props" .

[hansa0712004212]

Thanks everyone.
Well I was able to add checkbox in header row as Select/Deselect All option for rows.

Btw, my problem is,
I want to use select all on filtered results only.
Or I want to select Row checkboxes when select HeaderRow checkbox for filtered/currently visible results on table only.

[andikajayaw]

Thanks everyone.
Well I was able to add checkbox in header row as Select/Deselect All option for rows.

Btw, my problem is,
I want to use select all on filtered results only.
Or I want to select Row checkboxes when select HeaderRow checkbox for filtered/currently visible results on table only.

Can I see your code for Header checkbox to select all/deselect all the rows? Thank you.

[yasoza]

After banging my head on the wall for 4 hours, I finally found this thread. slot-scope dont work with h__ slots.

              <template
                  v-for="column in columns"
                  :slot="`h__${column}`"
                >
                  <div
                    :key="column"
                    v-html="options.headings[column]"
                    @click="clickhandler($event,column)"
                  />
                </template>

[hoai]

Hi,
My solution is working. maybe this is help other.
Please see it.
https://gist.github.com/hoai/dc37116f6a17a45232647dcfe8090e51