"vue js table denamique"
Bootstrap 3.0.0 Snippet by VHTrung

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html><html class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/Pizzi/pen/GMOQXy?depth=everything&order=popularity&page=5&q=vue+js&show_forks=false" /> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/css/foundation.min.css'><link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Work+Sans:300,400,500,600,700'> <style class="cp-pen-styles">/*@import url('https://fonts.googleapis.com/css?family=Work+Sans:300,400,500,600,700');*/ *{ /* Fonts*/ --work: 'Work Sans', sans-serif; /* Colors*/ --h2o: #7bd4cc; --honey: #bea42e; --army: #7b895b; --green: #037367; --sangria: #00281f; --white: #fff; /* Transition */ --transition-short: all .5s ease-in-out; /* padding */ --padding-standard:1rem; } html,body{ min-height:100%; height:100%;} button{ cursor:pointer; } body{ font-family: var(--work); /* IE10+ */ background-image: -ms-linear-gradient(bottom, #7BD4CC 0%, #037367 100%); /* Mozilla Firefox */ background-image: -moz-linear-gradient(bottom, #7BD4CC 0%, #037367 100%); /* Opera */ background-image: -o-linear-gradient(bottom, #7BD4CC 0%, #037367 100%); /* Webkit (Safari/Chrome 10) */ background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #7BD4CC), color-stop(100, #037367)); /* Webkit (Chrome 11+) */ background-image: -webkit-linear-gradient(bottom, #7BD4CC 0%, #037367 100%); /* W3C Markup */ background-image: linear-gradient(to top, #7BD4CC 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); } #chart_datas{ position: relative; } #chartpanel{ background-color:#fafafa; max-width:50rem; max-width: 50rem; height: auto; border-radius:7px;} .hideshow{ color: var(--white); font-size: .8rem;} .inputHide{ 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;} .addRowBtn{width:auto; position: absolute; left: 2rem; font-size: 2rem; background-color: var(--honey); padding: .1rem .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);} .addRowBtn:hover{ opacity:.8; } .addRowBtn .fa{color:var(--white); margin-top: 7px; } .single-cel{overflow: hidden; display: block; position: relative;} .edit_mode{ 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%} .edit_mode:hover{ color:#666;} .edit_panel{padding-left:1rem !important; padding-right:1rem; padding-top:.5rem !important;} .edit_panel button{color:var(--sangria);} .edit_panel button:hover{ opacity:.5;} .left_panel{ overflow:hidden; position:relative; border-radius:7px; -webkit-box-shadow: 0px 0px 20px 0px rgba(50, 50, 50, 0.57); -moz-box-shadow: 0px 0px 20px 0px rgba(50, 50, 50, 0.57); box-shadow: 0px 0px 20px 0px rgba(50, 50, 50, 0.57);} .left_panel header{ overflow:hidden; position:relative; color:var(--white);} .menu_top_icon, .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:1rem; } .right_nav .fa-link{ margin-left:1rem;} .right_nav{float:right;} #chart_datas{ padding-top:1rem; margin-top: 1.5rem;} .input_wrp .cell{padding:0px;} #chart_datas 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, #chart_datas{ padding-left: 1rem; padding-right: 1rem } #chart_table{padding-left:1rem; padding-right:1rem;} #chart_table .column{ padding:3px;} #chart_table .row{ margin-left:0px; margin-right:0px;} #chart_table .top_titles div{ text-align:center; color: var(--green); text-transform: uppercase; font-size: 75%;} #chart_table div.table_cell input{ border: 0px; background-color: rgba(0,0,0,.05); text-align: center; color: var(--army); font-weight: 500;} #chart_table div.table_cell input[type="text"]:disabled { background: rgba(0,0,0,.02); } .right_panel{padding-left:0px; padding-right:0px; min-height:10.8rem; border-radius:3px;} .right_panel header{background-color:var(--green); min-height:3rem; display:block; width:100%; border-left: 2px solid rgba(0,0,0,.2); }</style></head><body> <div id="chartpanel" class="row" data-equalizer> <div class="column small-12 left_panel" > <header data-equalizer-watch> <i class="fa fa-bars menu_top_icon" aria-hidden="true"></i> <div class="right_nav"> <i class="fa fa-heart" aria-hidden="true"></i> <i class="fa fa-link" aria-hidden="true"></i> <i class="fa fa-user-circle" aria-hidden="true"></i> </div> <charttitle> </charttitle> </header> <div id="chart_table"> <form id="chart_datas" > <div class="grid-container"> <div class="grid-x grid-padding-x input_wrp"> <div class="small-1 cell column"> <label> <input type="text" placeholder="id"> </label> </div> <div class="small-2 cell column"> <label> <input type="text" placeholder="value" v-model="value" id="value" name="value"> </label> </div> <div class="small-6 cell column"> <label> <input type="text" placeholder="Label" v-model="label" id="label" name="label"> </label> </div> <div class="small-3 cell column"> <label> <input type="text" placeholder="Icon" v-model="icon" id="icon" name="icon"> </label> </div> </div> <div class="addRowBtn" v-on:click.prevent="addRow" value=""><i class="fa fa-plus" aria-hidden="true"></i></div> </div> </form> <charttable v-bind:proplabels="labels"> </charttable> </div> </div> <!-- end left panel --> <!--<div class="column small-12 medium-4 right_panel"> <header data-equalizer-watch> <chartsubtitle> </chartsubtitle> </header> </div> --> </div> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.1/js/foundation.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js'></script><script src='https://use.fontawesome.com/24fc242ce0.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/tween.js/16.3.5/Tween.min.js'></script> <script > Vue.component('charttitle',{ data() { return { message: 'TABLE TITLE', collapsed: true } }, template:` <div id ="chart_title"> <label> <input v-model="message" placeholder="Insert the chart title" v-bind:class="[ {'is-collapsed' : collapsed }, 'inputHide' ]" type="text"> </label> <h2>{{ message }} <button class="hideshow" v-on:click=" collapsed = !collapsed"><i class="fa fa-pencil" aria-hidden="true"></i></button></h2> </div> ` }) /* Second header */ Vue.component('chartsubtitle',{ data() { return { message: 'Data reports', collapsed: true } }, template:` <div id ="chart_subtitle"> <label> <input v-model="message" placeholder="Insert the chart title" v-bind:class="[ {'is-collapsed' : collapsed }, 'inputHide' ]" type="text"> </label> <h2>{{ message }} <button class="hideshow" v-on:click=" collapsed = !collapsed"><i class="fa fa-pencil" aria-hidden="true"></i></button></h2> </div> ` }) Vue.component('charttable',{ props:['proplabels'], data() { return{ disabled: true } }, methods:{ deleteEvent: function(index) { this.proplabels.splice(index, 1); } }, template: ` <div id="chart_table"> <div class="top_titles"> <div class="small-12 medium-1 column"> id </div> <div class="small-12 medium-2 column"> Value </div> <div class="small-12 medium-6 column"> Label </div> <div class="small-12 medium-2 column"> icon </div> <div class="small-12 medium-1 column"> <i class="fa fa-trash" aria-hidden="true"></i> </div> </div> <div v-for="(val, index)al in proplabels" class="row table_cell"> <div class="small-12 medium-1 column"> <input type="text" v-model="val.id" disabled></input> </div> <div class="small-12 medium-2 column single-cel"> <input type="text" v-model="val.percentual" v-bind:disabled="disabled"> </input> </div> <div class="small-12 medium-6 column single-cel"> <input type="text" v-model="val.label" v-bind:disabled="disabled"> </input> </div> <div class="small-12 medium-2 column single-cel"> <input type="text" v-model="val.icon" v-bind:disabled="disabled"> </input> </div> <div class="small-12 medium-1 column edit_panel"> <button @click="deleteEvent(index)"> <i class="fa fa-times" aria-hidden="true"></i> </button> <span class="edit_mode" @click="disabled = !disabled"> <i class="fa fa-pencil-square-o" aria-hidden="true"></i> </span> </div> </div> </div> ` }) new Vue({ el: '#chartpanel', data: { value: '', label: '', icon:'', labels: [ { id:0, percentual: 87, label:'Mandorle', icon:'fa-user-circle-o' } ], nextBarId: 1 }, computed: { }, methods: { addRow: function (event) { lastId = this.labels.length; var newRow={ id: this.nextBarId++, percentual: this.value, label: this.label , icon: this.icon }; this.labels.push( newRow ); } } }); //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: