Breaking News: Grepper is joining You.com. Read the official announcement!

vuetify datatable header checkbox select all

Ahmed answered on August 17, 2021 Popularity 6/10 Helpfulness 2/10

answer vuetify datatable header checkbox select all

vuetify datatable header checkbox select all

Comment

<!DOCTYPE html>
<html>

<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@3.x/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>

<body>
  <div id="app">
    <v-app>
      <v-content>
        <v-container>
          <h2>Data Table</h2>

          <v-data-table v-model="selectedTasks" :headers="headers" :items="tasks" item-key="id" show-select>

            <template v-slot:body="{ items }">
            <tbody>
                <tr v-for="item in items" :key="item.id">
                    <td>
                        <v-checkbox v-model="selectedTasks" :value="item" style="margin:0px;padding:0px"
                            hide-details />
                    </td>
                    <td>{{ item.text }}</td>
                    <td>
                        <v-btn text icon x-small>
                            Edit
                        </v-btn>
                    </td>
                </tr>
            </tbody>
            </template>
          </v-data-table>
        </v-container>
      </v-content>
    </v-app>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
  <script>
    new Vue({
      el: '#app',
      vuetify: new Vuetify(),

      data() {
        return {
          headers: [{
              text: 'task',
              value: 'text'
            },
            {
              text: 'actions'
            }
          ],
          selectedTasks: []
        }
      },
      computed: {
        tasks() {
          return [{
              id: 1,
              text: 'Collect packets'
            },
            {
              id: 2,
              text: 'Buy bread'
            }
          ]
        }
      }
    })
  </script>
</body>

</html>

Popularity 6/10 Helpfulness 2/10 Language html

Source: Grepper

Tags: checkbox header html select vuetify-datatable

Link to this answer
Share Copy Link

Contributed on Aug 17 2021

Ahmed

0 Answers Avg Quality 2/10

vuetify datatable header checkbox select all

Contents

More Related Answers

vuetify datatable header checkbox select all

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.