Vue JS Dynamic Add and Remove Table Rows

Vue JS Dynamic Add and Remove Table Rows

In this Post We Will Explain About is Vue JS Dynamic Add and Remove Table Rows With Example and Demo.Welcome on Live24u.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to Vue JS Dynamic editable table Example

In this post we will show you Best way to implement vue.js create table row dynamically, hear for add and delete rows dynamically with textboxes using vue JS with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.




Getting Started for Vue JS Dynamic editable table

We have used CDN(libes) for vue js so you must need Your internet Data connection for them to work on dynamically add remove rows in html table using vue js.

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>

index.html

This is the main HTML view of our Simple Web Application. In here, we have init Base declared all our simple my this Example(vue.js create table row dynamically) dependencies and the HTML Elements that we have created.

<h2>vue.js - vueJS hide element in dynamic table row</h2>
<div id="livecardBox" class="live24u row" data-equalizer>
  
  <div class="live_tbl_colm gstlivesm-12 left_panel" >
    <header data-equalizer-watch>
      <i class="live24u fa fa-bars lst_menu_top" aria-hidden="true"></i>
      <div class="live24u right_nav">
        <i class="live24u fa fa-heart" aria-hidden="true"></i>
        <i class="live24u fa fa-link" aria-hidden="true"></i>
        <i class="live24u fa fa-user-circle" aria-hidden="true"></i>
      </div>
      <cardtitle> </cardtitle>
    </header>
  
  
  <div id="card_Box_tbl">
    <form id="card_box_data"  >
      <div class="live24u grid-container">
        <div class="grid-x grid-padding-x input_wrp">
          <div class="gstlivesm-1 cell live_tbl_colm">
            <label>
              <input type="text" placeholder="User id">
            </label>
          </div>
          <div class="gstlivesm-2 cell live_tbl_colm">
            <label>
              <input type="text" placeholder="value" v-model="value" id="value" name="value">
            </label>
          </div>
          <div class="gstlivesm-6 cell live_tbl_colm">
            <label>
              <input type="text" placeholder="Label" v-model="label" id="label" name="label">
            </label>
          </div>
          <div class="gstlivesm-3 cell live_tbl_colm">
            <label>
              <input type="text" placeholder="Icon" v-model="icon" id="icon" name="icon">
            </label>
          </div>
        </div>
        
         <div class="insertTblRowBtn" v-on:click.prevent="add_cardRow" value=""><i class="fa fa-plus" aria-hidden="true"></i></div>
      </div>  

    </form>
    
    <cardtable v-bind:proplabels="labels"> </cardtable>
  </div>
  </div> <!-- end left card -->
  <!--<div class="live_tbl_colm gstlivesm-12 lcd-live-sec-4 card_box_right">
    <header data-equalizer-watch>
<cardsubtitle> </cardsubtitle>
    </header>
  </div> -->
</div>

index.js

This contains our simple custom index.js files Add Like as javascript, vuejs scripts

Also Read :   Sorting and Searching using Vuejs - Vuejs table sort pagination

//How to generate a dynamic table using vue.js
Vue.component('cardtitle',{
  data() {
    return { 
      liveGenMsg: 'TABLE TITLE',
      collapsed: true
    }
  },
  template:`
<div id ="card_title">
    <label>
    <input v-model="liveGenMsg" placeholder="Put the Card title" v-bind:class="[ {'is-collapsed' : collapsed }, 'frmInputHd' ]" type="text">
    </label>
    <h2>{{ liveGenMsg }} <button class="hideshow" v-on:click=" collapsed = !collapsed"><i class="fa fa-pencil" aria-hidden="true"></i></button></h2>
  </div>
`
})

/* Second header */
//vueJS Dynamicly Add Form Fields with Input Boxes 
Vue.component('chartsubtitle',{
  data() {
    return { 
      liveGenMsg: 'Data reports',
      collapsed: true
    }
  },
  template:`
<div id ="card_subtitle">
    <label>
    <input v-model="liveGenMsg" placeholder="Put the Card title" v-bind:class="[ {'is-collapsed' : collapsed }, 'frmInputHd' ]" type="text">
    </label>
    <h2>{{ liveGenMsg }} <button class="hideshow" v-on:click=" collapsed = !collapsed"><i class="fa fa-pencil" aria-hidden="true"></i></button></h2>
  </div>
`
})

//Vue.js: Adding & removing rows vue script
Vue.component('cardtable',{
  props:['proplabels'],
  data() {
    return{
    disabled: true
    }
  },
  methods:{
    removeCard: function(index) {
      this.proplabels.splice(index, 1);
    }
},
  template:
    `
<div id="card_Box_tbl live24u">
        <div class="top_titles">
            <div class="gstlivesm-12 lcd-live-sec-1 live_tbl_colm"> id </div>
            <div class="gstlivesm-12 lcd-live-sec-2 live_tbl_colm"> Value </div>
            <div class="gstlivesm-12 lcd-live-sec-6 live_tbl_colm"> Label </div>
            <div class="gstlivesm-12 lcd-live-sec-2 live_tbl_colm"> icon </div>
            <div class="gstlivesm-12 lcd-live-sec-1 live_tbl_colm">
                <i class="fa fa-trash" aria-hidden="true"></i>
            </div>
        </div>
    <div v-for="(val, index)al in proplabels" class="row vue_tabl_cell">
        <div class="gstlivesm-12 lcd-live-sec-1 live_tbl_colm">
            <input type="text" v-model="val.id" disabled></input>
        </div>
        <div  class="gstlivesm-12 lcd-live-sec-2 live_tbl_colm single-cel">
            <input type="text" v-model="val.percentual" v-bind:disabled="disabled">
            </input>
        </div>
        <div class="gstlivesm-12 lcd-live-sec-6 live_tbl_colm single-cel">
            <input type="text" v-model="val.label" v-bind:disabled="disabled"> </input>
        </div>
        <div class="gstlivesm-12 lcd-live-sec-2 live_tbl_colm single-cel">
            <input type="text" v-model="val.icon" v-bind:disabled="disabled"> </input>
        </div>
        <div class="gstlivesm-12 lcd-live-sec-1 live_tbl_colm edit_panel">
            <button @click="removeCard(index)">
                <i class="fa fa-times" aria-hidden="true"></i>
            </button>
<span class="model_edit" @click="disabled = !disabled">
                <i class="fa fa-pencil-square-o" aria-hidden="true"></i>
            </span>
        </div>
    </div>


</div>

`
})

//vue js dynamic table init
new Vue({
        el: '#livecardBox',
        data: {
            value: '',
            label: '',
            icon:'',
          labels: [ { id:0, percentual: 87, label:'Mandorle', icon:'fa-user-circle-o' } ],
          nextBarId: 1
        },
        computed: {
            
        },
        methods: {
            add_cardRow: function (event) {
              lastId =  this.labels.length;
              var newRow={
                id: this.nextBarId++, 
                percentual: this.value, 
                label: this.label , 
                icon: this.icon
              };
              this.labels.push( newRow );
            }
          
        }
    });

style.css

Last step, we have add the Following CSS styles for our simple Vue.js dynamic add and remove and our Custom styling.

Also Read :   Top 10 Search Engine Optimization SEOTechniques

//VueJs custom CSS for dynamic table rows in vuejs
button{ cursor:pointer; }

body{ font-family: var(--work); /*Live24u.com IE10+ */ 
background-image: -ms-linear-gradient(bottom, #3d3d3d 0%, #037367 100%);

/*Live24u.com Mozilla Firefox */ 
background-image: -moz-linear-gradient(bottom, #3d3d3d 0%, #037367 100%);

/*Live24u.com Opera */ 
background-image: -o-linear-gradient(bottom, #3d3d3d 0%, #037367 100%);

/*Live24u.com Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #3d3d3d), color-stop(100, #037367));

/*Live24u.com Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(bottom, #3d3d3d 0%, #037367 100%);

/*Live24u.com W3C Markup */ 
background-image: linear-gradient(to top, #3d3d3d 0%, #037367 100%); display: flex; align-items: center; align-content: center;
}
h2, p, input, h1, h3{ font-family:  var(--work); }

.left_panel{ padding-left:0px; padding-right:0px;}
.left_panel header{ background-color: var(--h2o); padding:var(--padding-standard); }

#card_box_data{ position: relative; }
#livecardBox{ background-color:#3f3f3f; max-width:50rem; max-width: 50rem; height: auto; border-radius:8px;}


.hideshow{ color: var(--white); font-size: .8rem;}
.frmInputHd{ oapcity:1;  -webkit-transition: var(--transition-short);  -moz-transition: var(--transition-short);  -o-transition: var(--transition-short); transition: var(--transition-short);}
.is-collapsed{ opacity:0;}

.insertTblRowBtn{width:auto; position: absolute; left: 2rem;     font-size: 2rem;    background-color: var(--honey);    padding: .2rem .9rem; border-radius: 2rem; margin-top: -4rem; z-index: 999999999999999; -webkit-box-shadow: 0px 3px 1px 0px rgba(0,0,0,0.45);
-moz-box-shadow: 0px 3px 1px 0px rgba(0,0,0,0.45);
box-shadow: 0px 3px 1px 0px rgba(0,0,0,0.45); cursor: pointer; opacity:1; -webkit-transition: var(--transition-short);  -moz-transition: var(--transition-short);  -o-transition: var(--transition-short); transition: var(--transition-short);}
.insertTblRowBtn:hover{ opacity:.8; }
.insertTblRowBtn .fa{color:var(--white); margin-top: 8px; }

.single-cel{overflow: hidden; display: block; position: relative;}
.model_edit{ cursor:pointer; color:var(--h20); position:absolute; right:1.3rem; -webkit-transition: var(--transition-short);  -moz-transition: var(--transition-short);  -o-transition: var(--transition-short); transition: var(--transition-short); margin-right:2%}
.model_edit:hover{ color:#666;}
.edit_panel{padding-left:2rem !important; padding-right:2rem; padding-top:.5rem !important;}
.edit_panel button{color:var(--sangria);}
.edit_panel button:hover{ opacity:.5;}

.left_panel{ overflow:hidden; position:relative; border-radius:8px; -webkit-box-shadow: 0px 0px 20px 0px rgba(48, 48, 48, 0.57);
-moz-box-shadow:    0px 0px 20px 0px rgba(48, 48, 48, 0.57);
box-shadow:         0px 0px 20px 0px rgba(48, 48, 48, 0.57);}
.left_panel header{ overflow:hidden; position:relative; color:var(--white);}
.lst_menu_top, .right_nav .fa-heart, .right_nav .fa-link{ font-size:1.3rem; color:var(--sangria);}
.right_nav .fa-user-circle{ font-size:1.3rem; margin-left:2rem; }
.right_nav .fa-link{ margin-left:2rem;}
.right_nav{float:right;}

#card_box_data{ padding-top:2rem; margin-top: 1.5rem;}
.input_wrp .cell{padding:0px;}
#card_box_data input{    border-top: 0px; border-left: 0px; border-right: 0px; box-shadow: none; background-color: rgba(255,255,255,.30); border-color: var(--h2o);}

#cart_table, #card_box_data{ padding-left: 2rem; padding-right: 2rem }
#card_Box_tbl{padding-left:2rem; padding-right:2rem;}
#card_Box_tbl .live_tbl_colm{ padding:3px;}
#card_Box_tbl .row{ margin-left:0px; margin-right:0px;}
#card_Box_tbl .top_titles div{ text-align:center; color: var(--green); text-transform: uppercase; font-size: 75%;}
#card_Box_tbl div.vue_tabl_cell input{ border: 0px; background-color: rgba(0,0,0,.05); text-align: center; color: var(--army); font-weight: 500;}

#card_Box_tbl div.vue_tabl_cell input[type="text"]:disabled { background: rgba(0,0,0,.02); }

.card_box_right{padding-left:0px; padding-right:0px; min-height:10.8rem; border-radius:3px;}

.card_box_right header{background-color:var(--green); min-height:3rem; display:block; width:100%; border-left: 2px solid rgba(0,0,0,.2); }

Vue JS Dynamic editable table

Also Read :   window-Screen height and width Property using Jquery

You are Most welcome in my youtube Channel Please subscribe my channel. and give me FeedBack.
More Details……
Angularjs Example





Example

I hope you have Got What is Dynamically Add and Remove rows in a Table Using vue js And how it works.I would Like to have FeedBack From My Blog(live24u.com) readers.Your Valuable FeedBack,Any Question,or any Comments about This Article(live24u.com) Are Most Always Welcome.