VueJs Smart Table with Add Edit Delete Records – Dynamic Table

VueJs Smart Table with Add Edit Delete Records – Dynamic Table

I have a Simple button add row data and a text box. when I click double click to input a certain simple number in a text box HTML elements I want to add row the number of rows base on the all the content number in the text box.

Smart table or inline editor using vue.js – Add row , Delete Rows, Remove Rows sorting columns, and filter by string, all of the child rows,create a customs columns, custom row simple data.Different ways of inline editing in table

Include Libs

vue.min.js
bootstrap.min.css 

index.html

<div id="liveApp" class="container">

        <div class="row">
            <div class="col-6">
                <h2>Live Web Application</h2>
                <div class="form-group">
                    <div class="form-check form-check-inline">
                        <label class="form-check-label">
                            <input v-model="filterAttribute" value="all" type="radio" checked class="form-check-input"> Product All
                        </label>
                    </div>
                    <div class="form-check form-check-inline">
                        <label class="form-check-label">
                            <input v-model="filterAttribute" value="completed" type="radio" class="form-check-input"> Klarmarkerade
                        </label>
                    </div>
                    <div class="form-check form-check-inline">
                        <label class="form-check-label">
                            <input v-model="filterAttribute" value="notcompleted" type="radio" class="form-check-input"> Ej klarmarkerade
                        </label>
                    </div>
                </div>             
                <table v-if="DynemicFilter.length" class="table table-striped table-hover">
                    <tbody name="todoitem" is="transition-group">
                        <tr
                            v-for="(item, index) in DynemicFilter"
                            :key="item"
                            :class="item.isCompleted ? 'table-success' : 'table-info'"
                            :title="item.isCompleted ? 'here message new display!' : 'Message Display here..'"
                            class="todoitem">
                            <td>
                                <span @dblclick="updateItem(item)">{{ item.title }}</span>
                                <input type="text" class="form-control"
                                    v-model="item.title"
                                    v-model.trim="item.title"
                                    @blur="saveItem(item)"
                                    @keyup.enter="saveItem(item)"
                                    @keyup.esc="dismisItem(item)">
                            </td>
                            <td class="text-right"><button @click="StatusCustom(item)" class="btn btn-warning badge badge-pill">Remove Status</button></td>
                            <td><button @click="DeleteItem(index)" title="Remove" class="btn btn-danger badge badge-pill">X</button></td>
                        </tr>
                    </transition-group>
                </table>

                <p v-else>No Found Of The Data</p>
            </div>
            <div class="col-5 offset-1">
                <h2>Add Client</h2>
                <input @keyup.enter="createItem" v-model="newItem" v-model.trim="newItem" autofocus type="text" class="form-control" placeholder="Finns det något att göra?">
            </div>
        </div>

    </div>

app.js

var filters = {
    ItemDisplay: {
        all: function(items) {
            return items;
        },
        completed: function(items) {
            return items.filter(function(item) { return item.isCompleted; });
        },
        notcompleted: function(items) {
            return items.filter(function(item) { return !item.isCompleted; });
        }
    }
};

var todoliveApp = new Vue({
    el: '#liveApp',
    data: {
        newItem: '',
        editedItem: null,
        livedataItems: [
            {
                title: 'råna en pensionär',
                isCompleted: false
            },
            {
                title: 'drick bärz',
                isCompleted: true
            },
            {
                title: 'beställ 107 pizzor och hämta ej',
                isCompleted: false
            }
        ],
        filterAttribute: 'all'
    },
    methods: {
        createItem: function() {
            var newItemValue = this.newItem;
            if(!newItemValue) { return }
            this.livedataItems.push({
                title: newItemValue,
                isCompleted: false
            });
            this.newItem = '';
        },
        updateItem: function(item) {
            this.beforeEditCache = item.title;
            this.editedItem = item;
        },
        saveItem: function(item) {
            if(!this.editedItem) { return }
            this.editedItem = null;
            if(!item.title) {
                this.dismisItem(item);
            }
        },
        dismisItem: function(item) {
            item.title = this.beforeEditCache;
        },
        DeleteItem: function(itemIndex) {
            this.livedataItems.splice(itemIndex,1);
        },
        StatusCustom: function(item) {
            Vue.set(item, 'isCompleted', !item.isCompleted);
        }        
    },
    computed: {
        DynemicFilter: function() {
            return filters.ItemDisplay[this.filterAttribute](this.livedataItems);
        }
    }
})

Example

Example