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">
                             Product All
                        </label>
                    </div>
                    <div class="form-check form-check-inline">
                        <label class="form-check-label">
                             Klarmarkerade
                        </label>
                    </div>
                    <div class="form-check form-check-inline">
                        <label class="form-check-label">
                             Ej klarmarkerade
                        </label>
                    </div>
                </div>             
                <table class="table table-striped table-hover">
                    <tbody>
                        <tr class="todoitem">
                            <td>
                                <span>{{ item.title }}</span>
                                
                            </td>
                            <td class="text-right"><button class="btn btn-warning badge badge-pill">Remove Status</button></td>
                            <td><button title="Remove" class="btn btn-danger badge badge-pill">X</button></td>
                        </tr>
                    
                </table>

                <p>No Found Of The Data</p>
            </div>
            <div class="col-5 offset-1">
                <h2>Add Client</h2>
                
            </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