Hi guys,
I'm trying to create an editable table using Uibuilder and Bootstrap.
I've added a sample sqlite table from nodered using axios.get. I needed to make the table editable by adding links to the cells, showing forms to edit the table contents and create new row using the add new button. I'm also attaching my code. Thanks
Can anyone please guide me with this?
Thank you
<template>
<b-container id="app_container" class="mt-5">
<div class="container mt-5">
<!--margin-top:3%;margin-left:0%;margin-right:5%;-->
<div class="col-md-25">
<button class="btn btn-primary float-right">Add New Expense </button>
</div>
<h4 style="margin-top:2%;margin-bottom:2%;margin-right:5%;">Expenses Table</h4>
<b-row style="align-self:start;">
<b-col>
<div id="content">
<b-table id="control"
class="table"
bordered
hover
condensed
:items="items"
small
sort-by="Expenses_ID"
thead-class="navy text-white">
<tbody>
{% for items in items %}
<tr>
<th scope="row">{{ items.Expense_Id }}</th>
<td href="#">{{ items.Expense_Name }}</td>
<td href="#">{{ items.Expense_Amount }}</td>
<td href="#">{{ items.Expense_DateTime }}</td>
<td>
<button type="button" class="btn btn-outline-primary"
data-s-toggle="modal" data-target="#Modal-MoreInfo">
More Info
</button>
</td>
</tr>
{% endfor %}
</tbody>
</b-table>
</div>
</b-col>
</b-row>
</div>
</b-container>
</template>
<!-- Disabled since it doesn't work for SO snippets.-->
<style scoped>
.navy, .table thead th, thead, th{
background-color:#13294b !important;
}
</style>
<script>
module.exports = {
data() {
return {
items: [],
fields:[]
};
},
mounted(){
this.retrieveData();
},
computed: {
rows() {
return this.items.length
}
},
methods: {
retrieveData(){
axios.get('/tuts/expenses')
.then((resp) => {
//console.log(resp.data)
this.items = resp.data;
//this.currentPage = this.resp.data.length;
})
.catch(errors => { console.error(errors); });;
}
},
}
</script>
index.html
<!doctype html>
<html lang="en"><head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Node-RED UI Builder - Blank template">
<link type="text/css" rel="stylesheet" href="../uibuilder/vendor/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="../uibuilder/vendor/bootstrap-vue/dist/bootstrap-vue.css" />
<link type="text/css" rel="stylesheet" href="./index.css" media="all">
</head><body>
<div id="app">
<myheader>
</myheader>
<b-container fluid>
<router-view></router-view>
</b-container>
</div>
<script src="../uibuilder/vendor/socket.io/socket.io.js"></script>
<script src="../uibuilder/vendor/vue/dist/vue.js"></script>
<script src="../uibuilder/vendor/bootstrap-vue/dist/bootstrap-vue.js"></script>
<script src="../uibuilder/vendor/bootstrap-vue/dist/bootstrap-vue-icons.js"></script>
<script src="../uibuilder/vendor/http-vue-loader/src/httpVueLoader.js"></script>
<script src="../uibuilder/vendor/vuex/dist/vuex.js"></script>
<script src="../uibuilder/vendor/vue-router/dist/vue-router.js"></script>
<script src="../uibuilder/vendor/axios/dist/axios.js"></script>
<script src="./uibuilderfe.min.js"></script>
<script src="./index.js" type="module"></script>
</body></html>
