title: Vuetify Data Table Crud operations typescript class component example?
body: <p>I want to implement a simple CRUD datatable based on the vuetify example but in typescript.
  Vuetify example: <a href="https://vuetifyjs.com/en/components/data-tables" rel="nofollow noreferrer">https://vuetifyjs.com/en/components/data-tables</a>
  In the code below I managed to show some static data in the table. Therefore, i have a commented section and an uncommented working section in the template and script code below. The commented section needs to be translated to enable the CRUD functionality. The uncommented section only depicts the basic table with static data. Any help highly appreciated.</p>
  
  <pre><code>&lt;template&gt;
    &lt;div class="person-list"&gt;
      &lt;!-- vuetify crud data need guidance for typescript --&gt;
      &lt;!--
      &lt;div&gt;
        &lt;v-toolbar flat color="white"&gt;
          &lt;v-toolbar-title&gt;My CRUD&lt;/v-toolbar-title&gt;
          &lt;v-divider class="mx-2" inset vertical&gt;&lt;/v-divider&gt;
          &lt;v-spacer&gt;&lt;/v-spacer&gt;
          &lt;v-dialog v-model="dialog" max-width="500px"&gt;
            &lt;template v-slot:activator="{ on }"&gt;
              &lt;v-btn color="primary" dark class="mb-2" v-on="on"&gt;New Item&lt;/v-btn&gt;
            &lt;/template&gt;
            &lt;v-card&gt;
              &lt;v-card-title&gt;
                &lt;span class="headline"&gt;{{ formTitle }}&lt;/span&gt;
              &lt;/v-card-title&gt;
  
              &lt;v-card-text&gt;
                &lt;v-container grid-list-md&gt;
                  &lt;v-layout wrap&gt;
                    &lt;v-flex xs12 sm6 md4&gt;
                      &lt;v-text-field v-model="editedItem.name" label="Dessert name"&gt;&lt;/v-text-field&gt;
                    &lt;/v-flex&gt;
                    &lt;v-flex xs12 sm6 md4&gt;
                      &lt;v-text-field v-model="editedItem.calories" label="Calories"&gt;&lt;/v-text-field&gt;
                    &lt;/v-flex&gt;
                    &lt;v-flex xs12 sm6 md4&gt;
                      &lt;v-text-field v-model="editedItem.fat" label="Fat (g)"&gt;&lt;/v-text-field&gt;
                    &lt;/v-flex&gt;
                    &lt;v-flex xs12 sm6 md4&gt;
                      &lt;v-text-field v-model="editedItem.carbs" label="Carbs (g)"&gt;&lt;/v-text-field&gt;
                    &lt;/v-flex&gt;
                    &lt;v-flex xs12 sm6 md4&gt;
                      &lt;v-text-field v-model="editedItem.protein" label="Protein (g)"&gt;&lt;/v-text-field&gt;
                    &lt;/v-flex&gt;
                  &lt;/v-layout&gt;
                &lt;/v-container&gt;
              &lt;/v-card-text&gt;
  
              &lt;v-card-actions&gt;
                &lt;v-spacer&gt;&lt;/v-spacer&gt;
                &lt;v-btn color="blue darken-1" flat @click="close"&gt;Cancel&lt;/v-btn&gt;
                &lt;v-btn color="blue darken-1" flat @click="save"&gt;Save&lt;/v-btn&gt;
              &lt;/v-card-actions&gt;
            &lt;/v-card&gt;
          &lt;/v-dialog&gt;
        &lt;/v-toolbar&gt;
        &lt;v-data-table :headers="headers" :items="desserts" class="elevation-1"&gt;
          &lt;template v-slot:items="props"&gt;
            &lt;td&gt;{{ props.item.name }}&lt;/td&gt;
            &lt;td class="text-xs-right"&gt;{{ props.item.calories }}&lt;/td&gt;
            &lt;td class="text-xs-right"&gt;{{ props.item.fat }}&lt;/td&gt;
            &lt;td class="text-xs-right"&gt;{{ props.item.carbs }}&lt;/td&gt;
            &lt;td class="text-xs-right"&gt;{{ props.item.protein }}&lt;/td&gt;
            &lt;td class="justify-center layout px-0"&gt;
              &lt;v-icon small class="mr-2" @click="editItem(props.item)"&gt;edit&lt;/v-icon&gt;
              &lt;v-icon small @click="deleteItem(props.item)"&gt;delete&lt;/v-icon&gt;
            &lt;/td&gt;
          &lt;/template&gt;
          &lt;template v-slot:no-data&gt;
            &lt;v-btn color="primary" @click="initialize"&gt;Reset&lt;/v-btn&gt;
          &lt;/template&gt;
        &lt;/v-data-table&gt;
      &lt;/div&gt;
      --&gt;
      &lt;!-- simple working table --&gt;
      &lt;div&gt;
        &lt;v-content&gt;
          &lt;v-data-table v-bind:headers="headers" :items="items" class="elevation-1"&gt;
            &lt;template slot="items" slot-scope="props"&gt;
              &lt;td&gt;{{ props.item.name }}&lt;/td&gt;
              &lt;td class="text-xs-right"&gt;{{ props.item.calories }}&lt;/td&gt;
              &lt;td class="text-xs-right"&gt;{{ props.item.fat }}&lt;/td&gt;
              &lt;td class="text-xs-right"&gt;{{ props.item.carbs }}&lt;/td&gt;
              &lt;td class="text-xs-right"&gt;{{ props.item.protein }}&lt;/td&gt;
              &lt;td class="text-xs-right"&gt;{{ props.item.sodium }}&lt;/td&gt;
              &lt;td class="text-xs-right"&gt;{{ props.item.calcium }}&lt;/td&gt;
              &lt;td class="text-xs-right"&gt;{{ props.item.iron }}&lt;/td&gt;
            &lt;/template&gt;
          &lt;/v-data-table&gt;
        &lt;/v-content&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script lang="ts"&gt;
  // https://stackoverflow.com/questions/48715457/vuetifys-data-table-vue-typed-missing-props-value
  // https://vuetifyjs.com/en/components/data-tables
  import { Component, Vue } from "vue-property-decorator";
  
  
  @Component
  export default class PersonList extends Vue {
    public persons: Person[] = [];
  
    dialog = false;
    desserts = [];
    editedIndex = -1;
  
    editedItem = [
      {
        name: "",
        calories: 0,
        fat: 0,
        carbs: 0,
        protein: 0
      }
    ];
  
    defaultItem = [
      {
        name: "",
        calories: 0,
        fat: 0,
        carbs: 0,
        protein: 0
      }
    ];
  
    get search() {
      return "";
    }
  
    get pagination() {
      return {};
    }
  
    /*
  
  
  computed: {
        formTitle () {
          return this.editedIndex === -1 ? 'New Item' : 'Edit Item'
        }
      },
  
      watch: {
        dialog (val) {
          val || this.close()
        }
      },
  
      created () {
        this.initialize()
      },
  
  
    editItem(item) {
      this.editedIndex = this.desserts.indexOf(item);
      this.editedItem = Object.assign({}, item);
      this.dialog = true;
    }
  
    deleteItem(item) {
      const index = this.desserts.indexOf(item);
      confirm("Are you sure you want to delete this item?") &amp;&amp;
        this.desserts.splice(index, 1);
    }
  
    close() {
      this.dialog = false;
      setTimeout(() =&gt; {
        this.editedItem = Object.assign({}, this.defaultItem);
        this.editedIndex = -1;
      }, 300);
    }
  
    save() {
      if (this.editedIndex &gt; -1) {
        Object.assign(this.desserts[this.editedIndex], this.editedItem);
      } else {
        this.desserts.push(this.editedItem);
      }
      this.close();
    }
    */
  
    get headers() {
      return [
        {
          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: "Sodium (mg)", value: "sodium" },
        { text: "Calcium (%)", value: "calcium" },
        { text: "Iron (%)", value: "iron" }
      ];
    }
  
    get items() {
      return [
        {
          value: false,
          name: "Frozen Yogurt",
          calories: 159,
          fat: 6.0,
          carbs: 24,
          protein: 4.0,
          sodium: 87,
          calcium: "14%",
          iron: "1%"
        },
        {
          value: false,
          name: "Ice cream sandwich",
          calories: 237,
          fat: 9.0,
          carbs: 37,
          protein: 4.3,
          sodium: 129,
          calcium: "8%",
          iron: "1%"
        }
      ];
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>Thanks</p>