bootstrap vue table field label value is not showing.
fields: [
{ key: "selected", sortable: false, test: true },
{ key: 'id', label: "Number", sortable: true },
{ key: "employee", label: "Driver", sortable: false },
{ key: "vehicle", sortable: false },
{ key: "type", sortable: false },
{ key: "city", sortable: false },
{ key: "total_bilties", sortable: false },
{ key: "quantity", sortable: false },
{ key: "fare", sortable: false },
{ key: "labour", sortable: false },
{ key: "adv", sortable: false },
{ key: this.$t("action"), sortable: false }
],
output
it's not showing the Number in ID & Driver in the employee column.
It should work as per the official documentation, I just created a sample demo for the reference. Please have a look and try to find the root cause of the issue.
new Vue({
el: '#app',
data: {
items: [
{ id: 1, employee: 'Alpha', vehicle: 'Vehicle A' },
{ id: 2, employee: 'Beta', vehicle: 'Vehicle B' },
{ id: 3, employee: 'Gamma', vehicle: 'Vehicle C' },
{ id: 4, employee: 'Omega', vehicle: 'Vehicle D' }
],
fields: [
{ key: 'id', label: 'Number', sortable: true },
{ key: 'employee', label: 'Driver', sortable: false },
{ key: 'vehicle', sortable: false }
]
}
})
<!-- Load Vue -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.min.css" />
<!-- Load the following for BootstrapVueIcons support -->
<script src="https://unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.min.js"></script>
<div id="app">
<b-table :items="items" :fields="fields">
</b-table>
</div>
Related
I have an asp .net web forms app with Vue 2.7.14 and Vuetify 2.6.13.
I have a table and I want to implement v-slot:item.fieldName to style certain cells but it doesn't work.
<v-data-table :footer-props="{ 'items-per-page-options': [10, 50, 100, 500, 1000] }" :items-per-page="10" :headers="headers" :items="supplierList" :loading="loadingGrid" :loading-text="$t('gral_loading')" :options.sync="options" :server-items-length="totalItems">
<template v-slot:item.businessName="{item}">
Hola
</template>
</v-data-table
headers: [
{ text: this.$t('supplier_code'), value: 'code' },
{ text: this.$t('supplier_businessName'), value: 'businessName' },
{ text: this.$t('supplier_alias'), value: 'alias' },
{ text: this.$t('supplier_isDirect'), value: 'isDirect' },
{ text: this.$t('supplier_isAppendFile'), value: 'isAppendFile' },
{ text: this.$t('supplier_isSendEDINotification'), value: 'isSendEDINotification' },
{ text: this.$t('supplier_cat_PlantId'), value: 'plantName' },
{ text: this.$t('supplier_cat_AnalystId'), value: 'analystProcess' },
{ text: this.$t('supplier_cat_supplierTypeId'), value: 'supplierTypeName' },
{ text: this.$t('supplier_isActive'), value: 'isActive' },
{
text: this.$t('gral_acciones'),
value: 'action',
sortable: false
},
],
This is the array data items :
supplierList: [{
"supplierTypeId": 1,
"name": "Transportista",
"description": "Transportista",
"isScrap": false,
"isSystem": false,
"isActive": true,
"isDelete": false,
"creationDate": "0001-01-01T00:00:00",
"lastUpdate": "0001-01-01T00:00:00",
"createdBy": 1,
"lastUpdateBy": 0,
"systemId": null,
"sessionData": null,
"item": null,
"page": null,
"size": null,
"sortBy": null,
"ascending": null,
"alertNotification": null
}]
After spending some time and play around with the v-data-table demo, I found that as long as the headers value is in lowercase the issue doesn't appear.
Working Demo :
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
headers: [{ text: 'Code', value: 'code' },
{ text: 'Business Name', value: 'businessname' },
{ text: 'Alias', value: 'alias' },
{ text: 'Is Direct', value: 'isDirect' },
{ text: 'Is Append File', value: 'isAppendFile' },
{ text: 'Notification', value: 'isSendEDINotification' },
{ text: 'Plant Name', value: 'plantName' },
{ text: 'Analyst Process', value: 'analystProcess' },
{ text: 'Supplier Type Name', value: 'supplierTypeName' },
{ text: 'Is Active', value: 'isActive' },
{ text: 'Action', value: 'action' }],
supplierList: [{
"supplierTypeId": 1,
"name": "Transportista",
"description": "Transportista",
"isScrap": false,
"isSystem": false,
"isActive": true,
"isDelete": false,
"creationDate": "0001-01-01T00:00:00",
"lastUpdate": "0001-01-01T00:00:00",
"createdBy": 1,
"lastUpdateBy": 0,
"systemId": null,
"sessionData": null,
"item": null,
"page": null,
"size": null,
"sortBy": null,
"ascending": null,
"alertNotification": null
}],
}
}
})
<script src="https://unpkg.com/vue#2.x/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify#2.6.14/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vuetify#2.6.14/dist/vuetify.min.css"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"/>
<div id="app">
<v-app id="inspire">
<v-data-table
:headers="headers"
:items="supplierList"
:items-per-page="5">
<template v-slot:item.businessname="{item}">
<span>Hola</span>
</template>
</v-data-table>
</v-app>
</div>
I have a table:
<b-table striped hover :items="coursesArray" :fields="fields"></b-table>
The data comes from
coursesArray: [
{
id: "1",
name: "foo",
teacherEmails: [{ 0: "sample1" }, { 1: "sample2" }, { 2: "sample3" }],
teacherIds: ["A1", "A2", "A3"],
},
],
And fields are:
fields: [
{ key: "id", label: "Course ID" },
{ key: "name", label: "Course Name" },
{
key: "teacherEmails",
label: "Teacher Email",
formatter: "teacherEmailTCellFormat",
},
{ key: "teacherIds", label: "Teacher ID" },
],
And this is how it's rendered without the formatter.
So, I added a custom formatter in fields to remove the brackets and curly braces.
The first problem I'm having is that looping over the value to return all the items in teacherEmails does not work.
teacherEmailTCellFormat(value) {
console.log(value)
value.forEach(item => {
return each[0]
}
}
The second problem, that I don't understand why it's happening, is that if I log the value passed to the formatter, it's clear the formatter function is called twice.
Any help or clearance will be appreciated.
You need to return an array, you can do this using Array#map:
new Vue({
el:"#app",
data: () => ({
fields: [
{ key: "id", label: "Course ID" },
{ key: "name", label: "Course Name" },
{ key: "teacherEmails", label: "Teacher Email", formatter: "teacherEmailTCellFormat" },
{ key: "teacherIds", label: "Teacher ID" },
],
coursesArray: [
{
id: "1",
name: "foo",
teacherEmails: [{ 0: "sample1" }, { 1: "sample2" }, { 2: "sample3" }],
teacherIds: ["A1", "A2", "A3"],
}
]
}),
methods: {
teacherEmailTCellFormat(value) {
return value.map((item, i) => item[i]);
}
}
});
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css"/>
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<script src="https://unpkg.com/babel-polyfill#latest/dist/polyfill.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.js"></script>
<div id="app">
<b-table striped hover :items="coursesArray" :fields="fields"></b-table>
</div>
Note: I assumed the key represents the index of the item in the array, but you can change the mapping as you want. The main issue was returning the array.
I'm trying to hit all the data from API using axios in Nuxt, but it seems only shows 10 data each page, so if there's actually 15 data which I expect to hit, it has to show 2 page (page 1 with 10 data, page 2 with the remaining 5 data). I had no idea why does it only want to show every 10 data
per page.
How to show the remaining data in next page? Here's what I've been doing so far
<script>
// eslint-disable-next-line no-unused-vars
import { getAllProvinces } from '~/api/delivery'
export default {
data() {
return {
filter: null,
filterOn: [],
perPage: 10,
currentPage: 1,
rows: 0,
items: [],
fields: [
{
key: 'id',
sortable: true,
label: 'ID',
class: 'truncate',
},
{
key: 'uploadReference',
sortable: true,
label: 'Upload Reference',
class: 'truncate',
},
{
key: 'requestId',
sortable: true,
label: 'Request ID',
class: 'truncate',
},
{
key: 'storeCode',
sortable: true,
label: 'Store Code',
class: 'truncate',
},
{
key: 'branchCode',
sortable: true,
label: 'Branch Code',
class: 'truncate',
},
{
key: 'b2bId',
sortable: true,
label: 'B2B ID',
class: 'truncate',
},
{
key: 'request',
sortable: true,
label: 'Request',
class: 'truncate',
},
{
key: 'response',
sortable: true,
label: 'Response',
class: 'truncate',
},
{
key: 'createDate',
sortable: true,
label: 'Create Date',
class: 'truncate',
},
{
key: 'errorClassification',
sortable: true,
label: 'Error Classification',
class: 'truncate',
},
],
}
},
watch: {
currentPage: {
handler(value) {
this.getAllStock()
},
},
},
created() {
this.getAllStock()
},
methods: {
getAllStock() {
this.$axios
.get(
'axioslink' +
this.currentPage +
'&status=1'
)
.then((res) => {
// eslint-disable-next-line no-console
console.log(res.data)
this.items = res.data.stocks
this.allStock = res.data
this.rows = res.data.totalDocuments
// eslint-disable-next-line no-console
})
this.rows = this.items.length
},
onFiltered(filteredItems) {
this.rows = filteredItems.length
this.currentPage = 1
},
},
}
</script>
<div class="text-center">
<b-table
id="my-table"
:per-page="perPage"
:current-page="currentPage"
striped
small
hover
dark
responsive
show-empty
:items="items"
:fields="fields"
:filter="filter"
:filter-included-fields="filterOn"
#filtered="onFiltered"
>
<template v-slot:cell()="data">
<span v-b-tooltip.hover :title="data.value">{{
data.value
}}</span>
</template>
</b-table>
</div>
</template>
<div class="overflow-auto">
<b-card-footer class="py-4 d-flex justify-content-end">
<b-pagination
:total-rows="rows"
:per-page="perPage"
aria-controls="my-table"
#change="currentPage = $event"
></b-pagination>
</b-card-footer>
</div>
Thanks and have a great day
new Vue({
el: "#menu",
data: () => ({
filter: null,
filterOn: [],
perPage: 10,
currentPage: 1,
rows: 0,
items: [],
fields: [{
key: 'id',
sortable: true,
label: 'ID',
class: 'truncate',
},
{
key: 'uploadReference',
sortable: true,
label: 'Upload Reference',
class: 'truncate',
},
{
key: 'requestId',
sortable: true,
label: 'Request ID',
class: 'truncate',
},
{
key: 'storeCode',
sortable: true,
label: 'Store Code',
class: 'truncate',
},
{
key: 'branchCode',
sortable: true,
label: 'Branch Code',
class: 'truncate',
},
{
key: 'b2bId',
sortable: true,
label: 'B2B ID',
class: 'truncate',
},
{
key: 'request',
sortable: true,
label: 'Request',
class: 'truncate',
},
{
key: 'response',
sortable: true,
label: 'Response',
class: 'truncate',
},
{
key: 'createDate',
sortable: true,
label: 'Create Date',
class: 'truncate',
},
{
key: 'errorClassification',
sortable: true,
label: 'Error Classification',
class: 'truncate',
},
],
}),
methods: {
getAllStock() {
this.items = [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }, { id: 6 }, { id: 7 }, { id: 8 }, { id: 8 }, { id: 10 }, { id: 11 }, { id: 12 }, ]
// this.allStock = res.data
this.rows = this.items.length
},
onFiltered(filteredItems) {
this.rows = filteredItems.length
this.currentPage = 1
},
},
created() {
this.getAllStock()
},
});
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-vue/2.18.1/bootstrap-vue.min.css" />
<script src="https://unpkg.com/vue#2.6.12/dist/vue.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-vue/2.18.1/bootstrap-vue.min.js"></script>
<div id="menu">
<b-table id="my-table" :per-page="perPage" :current-page="currentPage" striped small hover dark responsive show-empty :items="items" :fields="fields" :filter="filter" :filter-included-fields="filterOn" #filtered="onFiltered">
</b-table>
<b-pagination v-model="currentPage" :total-rows="rows" :per-page="perPage" aria-controls="my-table"></b-pagination>
</div>
I am currently trying to show/hide dynamically with a bootstrap-vue table (https://bootstrap-vue.js.org/docs/components/table).
So far, I only managed to hide the header but the cells won't disappear, which is a problem because the cells are not in front of the good headers (the numbers should be under days and 'ingredient' should be under item.
Here what's 'worked':
fields: [
{key: "day", label: "Day",sortable: true, thStyle:"display:none"},
{key: "item", label: "Item",sortable: true}
]
I was wondering if it was possible to maybe do that outside of vueJS, and change the properties of the column with CSS directly..
Thanks for the help !
Louis
You could add an additional property to your fields. For example visible and create a computed property that filters out all fields with visible: false.
That way you can simply toggle this property to show/hide your columns.
window.onload = () => {
new Vue({
el: '#app',
computed: {
visibleFields() {
return this.fields.filter(field => field.visible)
}
},
data() {
return {
items: [
{ id: 1, first: 'Mike', last: 'Kristensen', age: 16 },
{ id: 2, first: 'Peter', last: 'Madsen', age: 52 },
{ id: 3, first: 'Mads', last: 'Mikkelsen', age: 76 },
{ id: 4, first: 'Mikkel', last: 'Hansen', age: 34 },
],
fields: [
{ key: 'id', label: 'ID', visible: true },
{ key: 'first', label: 'First Name', visible: true },
{ key: 'last', label: 'Last Name', visible: true },
{ key: 'age', label: 'Age', visible: true },
]
}
}
})
}
<link href="https://unpkg.com/bootstrap#4.4.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/bootstrap-vue#2.2.2/dist/bootstrap-vue.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue#2.2.2/dist/bootstrap-vue.min.js"></script>
<div id='app'>
<b-checkbox
:disabled="visibleFields.length == 1 && field.visible"
v-for="field in fields"
:key="field.key"
v-model="field.visible"
inline
>
{{ field.label }}
</b-checkbox>
<br /><br />
<b-table :items="items" :fields="visibleFields" bordered>
</b-table>
</div>
Iam using "vue-form-generator" plugin for dynamic loading of form fields. Among the fields, I am using "radio-button" for the "gender" field. Options are displayed in one below the other but I want the option should be displayed in the "inline" style
How to align the radio button option in the same row(inline)?
Here is my code: addMember.vue
<template>
<div class="panel-body">
<vue-form-generator :schema="schema" :model="model" :options="formOptions"></vue-form-generator>
<input type="submit" value="Submit">
</div>
</template>
<script>
import Vue from 'vue'
import VueFormGenerator from "vue-form-generator";
import "vue-form-generator/dist/vfg.css";
Vue.use(VueFormGenerator);
export default {
data: () => ({
model: {
building: "",
unitCategory: "",
unit: "",
fullName: "",
gender: "",
},
schema: {
groups: [{
fields: [{
type: "select",
inputType: "text",
label: "Building",
model: "building",
required: true,
styleClasses:'col-md-6',
values: [
{ id: "", name: 'Select Building' },
{ id: 'A', name: 'Block-A'},
{ id: 'B', name: 'Block-B'},
],
selectOptions: {
hideNoneSelectedText: true,
}
}]
},{
fields: [{
type: "select",
inputType: "text",
label: "Unit Category",
model: "unitCategory",
required: true,
styleClasses:'col-md-3',
values: [
{ id: "", name: 'Select Unit Category' },
],
selectOptions: {
hideNoneSelectedText: true,
}
},{
type: "select",
inputType: "text",
label: "Unit",
model: "unit",
required: true,
styleClasses:'col-md-3',
values: [
{ id: "", name: 'Select Unit' },
],
selectOptions: {
hideNoneSelectedText: true,
}
}]
},{
fields: [{
type: "input",
inputType: "text",
label: "Full Name",
model: "fullName",
placeholder: "Enter Full Name",
required: true,
styleClasses:'col-md-3'
},
{
type: "radios",
label: "Gender",
model: "gender",
values: [
"Male",
"Female",
"Other"
],
styleClasses:'col-md-3'
}]
}]
},
formOptions: {
validateAfterLoad: true,
validateAfterChanged: true
}
}),
}
</script>
You can add custom css to your radio input
{
type: "radios",
label: "Gender",
model: "gender",
values: [
"Male",
"Female",
"Other"
],
styleClasses:'col-md-3 display-inline'
}
and in your css
.display-inline label {
display: inline !important;
}
var vm = new Vue({
el: "#app",
components: {
"vue-form-generator": VueFormGenerator.component
},
data() {
return {
model: {
},
schema: {
fields: [{
type: "radios",
label: "Select your gender",
model: "friend",
values: [
"Male",
"Female",
"Others"
],
styleClasses: "display-inline"
}]
},
formOptions: {
validateAfterLoad: true,
validateAfterChanged: true
}
};
}
});
.display-inline label {
display: inline !important;
}
<link href="https://cdn.jsdelivr.net/npm/vue-form-generator#2.2.2/dist/vfg.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/vue-form-generator#2.2.2/dist/vfg.min.js"></script>
<script src="https://unpkg.com/vue#2.2.1/dist/vue.min.js"></script>
<h1 class="text-center">Demo of vue-form-generator</h1>
<div class="container" id="app">
<div class="panel panel-default">
<div class="panel-heading">Form</div>
<div class="panel-body">
<vue-form-generator :schema="schema" :model="model" :options="formOptions"></vue-form-generator>
</div>
</div>
</div>