Deleting the selected row on data table Vuetify

vuetify data-table click:row
vuetify datatable
vuetify data-table example
vue datatable
v-data-table header
vuetify data-table filter
vuetify data-table set selected row
vuetify data-table checkbox

I am using a data-table in vuetify. I am using v-checkbox. I want to delete the selected item from v-checkbox using a button click. I have delete button at the bottom of the data table. So when a user clicks at the delete button the selected row in the data table should be deleted. Any ideas how to do it?

<script>
  export default {
    data () {
      return {
        props:[],
        selected: [],
        headers: [
          {
            text: 'Name',
            align: 'left',
            sortable: true,
            value: 'name'
          },
          { text: 'Organisation', value: 'organisation' },
          { text: 'Supplier', value: 'supplier' },
          { text: 'Created By', value: 'createdBy' },
          { text: 'Updated By', value: 'updatedBy' },
       
        ],
        projects: [
          {
            name: 'test',
            organisation: 'test',
            supplier: 'test',
            createdBy: 'test',
            updatedBy: 'test'
          },
          {
            name: 'Ice cream sandwich',
            calories: 237,
            fat: 9.0,
            carbs: 37,
            protein: 4.3,
            iron: '1%'
          },
          {
            name: 'Eclair',
            calories: 262,
            fat: 16.0,
            carbs: 23,
            protein: 6.0,
            iron: '7%'
          },
          {
            name: 'Cupcake',
            calories: 305,
            fat: 3.7,
            carbs: 67,
            protein: 4.3,
            iron: '8%'
          },
          {
            name: 'Gingerbread',
            calories: 356,
            fat: 16.0,
            carbs: 49,
            protein: 3.9,
            iron: '16%'
          },
          {
            name: 'Jelly bean',
            calories: 375,
            fat: 0.0,
            carbs: 94,
            protein: 0.0,
            iron: '0%'
          },
          {
            name: 'Lollipop',
            calories: 392,
            fat: 0.2,
            carbs: 98,
            protein: 0,
            iron: '2%'
          },
          {
            name: 'Honeycomb',
            calories: 408,
            fat: 3.2,
            carbs: 87,
            protein: 6.5,
            iron: '45%'
          },
          {
            name: 'Donut',
            calories: 452,
            fat: 25.0,
            carbs: 51,
            protein: 4.9,
            iron: '22%'
          },
          {
            name: 'KitKat',
            calories: 518,
            fat: 26.0,
            carbs: 65,
            protein: 7,
            iron: '6%'
          }
        ]
      }
    },

    methods: {
        deleteProject
        {
            // delete funtion here
        },

        liveProject()
        {
            alert("live");
        },

        closeProject()
        {
            alert("close");
        },
    }
  }
</script>
<template>
<div>

    <v-toolbar flat color="white">
      <v-toolbar-title>Manage Projects</v-toolbar-title>   
      {{ props }}
    </v-toolbar>
    
  <v-data-table
    v-model="props"
    :headers="headers"
    :items="projects"
    item-key="name"
    select-all
    class="elevation-1"
  >
    <template slot="items" slot-scope="props">
      <td>
        <v-checkbox
          v-model="props.selected"
          primary
          hide-details
        ></v-checkbox>
      </td>
      <td>{{ props.item.name }}</td>
      <td class="text-xs-left">{{ props.item.organisation }}</td>
      <td class="text-xs-left">{{ props.item.supplier }}</td>
      <td class="text-xs-left">{{ props.item.createdBy }}</td>
      <td class="text-xs-left">{{ props.item.updatedBy }}</td>
     
    </template>
  </v-data-table>

   <div class="text-xs-center pt-2">
      <v-btn color="primary" @click="deleteProject">Delete</v-btn>
      <v-btn color="primary" @click="liveProject">Make Live</v-btn>
       <v-btn color="primary" @click="closeProject">Close</v-btn>
       
       
    </div>
</div>

</template>

Here is the code for deleting selected rows from your data table.

Check the example below.

Codepen link to your solution

Template=>

    <div id="app">
  <v-app id="inspire">
    <v-data-table
      v-model="selected"
      :headers="headers"
      :items="desserts"
      item-key="name"
      select-all
      class="elevation-1"
    >
      <template slot="items" slot-scope="props">
        <td>
          <v-checkbox
            v-model="props.selected"
            primary
            hide-details
          ></v-checkbox>
        </td>
        <td>{{ props.item.name }}</td>
        <td class="text-xs-right">{{ props.item.calories }}</td>
        <td class="text-xs-right">{{ props.item.fat }}</td>
        <td class="text-xs-right">{{ props.item.carbs }}</td>
        <td class="text-xs-right">{{ props.item.protein }}</td>
        <td class="text-xs-right">{{ props.item.iron }}</td>
      </template>
    </v-data-table>
    <div>
      <v-btn color="primary" @click="deleteItem">Delete</v-btn>
    </div>
  </v-app>
</div>

Script =>

  new Vue({
  el: '#app',
  data () {
    return {
      selected: [],
      headers: [
        {
          text: 'Dessert (100g serving)',
          align: 'left',
          sortable: false,
          value: 'name'
        },
        { text: 'Calories', value: 'calories' },
        { text: 'Fat (g)', value: 'fat' },
        { text: 'Carbs (g)', value: 'carbs' },
        { text: 'Protein (g)', value: 'protein' },
        { text: 'Iron (%)', value: 'iron' }
      ],
      desserts: [
        {
          name: 'Frozen Yogurt',
          calories: 159,
          fat: 6.0,
          carbs: 24,
          protein: 4.0,
          iron: '1%'
        },
        {
          name: 'Ice cream sandwich',
          calories: 237,
          fat: 9.0,
          carbs: 37,
          protein: 4.3,
          iron: '1%'
        },
        {
          name: 'Eclair',
          calories: 262,
          fat: 16.0,
          carbs: 23,
          protein: 6.0,
          iron: '7%'
        },
        {
          name: 'Cupcake',
          calories: 305,
          fat: 3.7,
          carbs: 67,
          protein: 4.3,
          iron: '8%'
        },
        {
          name: 'Gingerbread',
          calories: 356,
          fat: 16.0,
          carbs: 49,
          protein: 3.9,
          iron: '16%'
        },
        {
          name: 'Jelly bean',
          calories: 375,
          fat: 0.0,
          carbs: 94,
          protein: 0.0,
          iron: '0%'
        },
        {
          name: 'Lollipop',
          calories: 392,
          fat: 0.2,
          carbs: 98,
          protein: 0,
          iron: '2%'
        },
        {
          name: 'Honeycomb',
          calories: 408,
          fat: 3.2,
          carbs: 87,
          protein: 6.5,
          iron: '45%'
        },
        {
          name: 'Donut',
          calories: 452,
          fat: 25.0,
          carbs: 51,
          protein: 4.9,
          iron: '22%'
        },
        {
          name: 'KitKat',
          calories: 518,
          fat: 26.0,
          carbs: 65,
          protein: 7,
          iron: '6%'
        }
      ]
    }
  },
  methods: {
   deleteItem () {
   if(confirm('Are you sure you want to delete this item?')){
  for(var i = 0; i <this.selected.length; i++){
      const index = this.desserts.indexOf(this.selected[i]);
      this.desserts.splice(index, 1);
  }
    }
   }
}
})

How to delete Specific row in a datatable?, In that kind of needs, I usually use a data rowToDelete deleteItem (item) { this. snackbar = true; this.text = "Are you sure?" this.timeout = 2000� Hi everyone. I’m using Vuetify to create a neat data table with a selection feature but I can’t get my head around a way to delete selected rows !

deleteProject(item_name){
    this.projects.splice(this.projects.findIndex(e=> e.name == item_name),1)
}

// JS splice method for remove items from an array.
// JS findIndex method for find the index of the element which you want to delete. 

Data table component — Vuetify.js, It includes sorting, searching, pagination and selection. The standard data- table will by default render your data as simple rows. the hide-default-header and hide-default-footer props to remove the default header and footer respectively. The v-data-table component also supports expandable rows using the expand slot. By default expanding a row closes all remaining rows. By default expanding a row closes all remaining rows. You can use the prop expand on v-data-table to prevent expanded rows from closing when clicking on another row.

I had a similar issue yesterday but with jquery. Now with vuejs, it is actually simpler I guess with model binding so that all the selected rows will be pushed to a data property. Then on clicking delete, loop through all the selected id's or keys and remove them from your store or by calling a backend api or your data property like you've done here E.g.

data: () => ({
    selected: [],
    projects: {/*...content in here */},
});

methods: {

   delete() {
       this.selected.forEach(function(project) { // project here is just the index of the selected in the projects array
           projects.splice(project, 1);
      });

      this.selected = []; // don't forget to empty selected
   }
}

[solved] Deleting a row on a scoped slot table component (with Vuetify), Hi everyone I'm using Vuetify to create a neat data table with a selection feature but I can't get my head around a way to delete selected rows ! The show-select prop will render a checkbox in the default header to toggle all rows, and a checkbox for each default row. You can customize these with the slots header.column.data-table-select and item.column.data-table-select respectively.

If the Data table is bound to a store's array of objects :


We can also use map to get the index of the object in a store array and remove it using:

Mutation

REMOVE_OBJECT_FROM_ARRAY: (state, payload) => { let i = state.someArrayofObjects.map(item => item.id).indexOf(payload.id); state.someArrayofObjects.splice(i, 1); }

Here, the id is the id passed with the payload to the MUTATION, we can also pass only the id as the whole payload. In that case, we can do something like:

REMOVE_OBJECT_FROM_ARRAY: (state, payload) => { let i = state.someArrayofObjects.map(item => item.id).indexOf(payload); state.someArrayofObjects.splice(i, 1); }

[Bug Report] V-Data-Table: When deleting all the rows off of the last , Environment Vuetify Version: 2.0.18 Last working version: 1.5.17 Vue Version: 2.6.10 Browsers: Chrome 76.0.3809.132 OS: Mac OS 10.14.6� Option to select one row at a time in a data table, radio-button style. Selecting a new row will clear the previous selection. Improvements. No existing workaround. Bugs or Edge Cases it Helps Avoid. Allows the user to provide extra functionality in custom components based on a guaranteed single-row selection in the data table; a preview pane

[Bug Report] Data-Table > Selected items clear when using server , Versions and Environment Vuetify: 1.5.1 Last working version: 1.5.0 Vue: This data table allows a user to select certain rows, paginate and then just filter the items you want to remove from the selected array before you� Currently the data-table stores its state within the data itself, which I find highly problematic. Storing view state in data models. Pros Not sure. Cons. You have to map selected state to every data item. That gets complicated if your data is reactive. And even more complicated if your data is immutable, e.g. from a data store like Vuex.

Vuetify DataTable + Select Row, <v-data-table. 16. v-model="selected". 17. :headers="headers". 18. :items="items" . 19. :search="search". 20. 21. > 22. <template slot="items" slot-scope="props">. The element Data table (VDataTable) does not support more than a simple filtering. This is that it only allows you to add a text field that filters rows whenever a cell partially match the word you are looking for. In this post we are going to explain how to change the behavior to make it supports multiple filters.

How do you preselect rows in the v-data-table component? : vuetifyjs, users to scan. It includes sorting, searching, pagination and selection. The standard data-table will by default render your data as simple rows. template '$ vuetify.icons.expand'. description Remove default header and footer. You can� Say I have a list of rows in a grid/list/table, where the user can select multiple rows and delete them together. In which case, selecting/focusing which row after deletion gives the most intuitive

Comments
  • What do you get for the props.selected? project names?
  • Yes Project name as well as other information in the row
  • What if rather than a confirm box we need to put a dialog. Where do we add it?
  • You can replace this if(confirm('Are you sure you want to delete this item?')) with any kind of alert or dialog you want.
  • Do we just to add v-dialog instead of a v-btn?
  • I have added a basic dialog for you.You can modify it as you want. codepen.io/anon/pen/pYzZPZ?editors=1010
  • this works fine but the dialog box is not closing by itself once we delete an item.
  • This is not removing the selected row. This is removing other row.
  • What do you mean by other row?
  • I mean its not deleting the selected row that i select from the checkbox