Answers for "checkbox dataTable vuetify"

0

vuetify datatable header checkbox select all

<!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/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/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>
Posted by: Guest on August-17-2021
0

vuetify datatable header checkbox select all

<!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/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/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>
Posted by: Guest on August-17-2021

Browse Popular Code Answers by Language