How can I modify style of Vue stacked b-table? - vue.js

I used stacked b-table in bootstrap-vue.
<b-modal :id="infoModal.id" :title="infoModal.title" hide-footer #hide="resetInfoModal;">
<pre>
<b-table stacked sticky-header head-variant="light" :items="infoModal.content" :fields="reviewFields"></b-table>
</pre>
<template>
<div class="overflow-auto">
<b-pagination-nav :link-gen="linkGen" :number-of-pages="10" use-router></b-pagination-nav>
</div>
</template>
</b-modal>
this is result:
First, I want to move the marked baseline to the left.
Second, content in the table exceeds the outline (red line) of the table. I want the content to be scrollable within a fixed column of the table.
How can I get these effects?

You could set style on each columns
reviewFields: [
{ key: 'key0', label: 'label0', class: 'css-class' },
{ key: 'key1', label: 'label1', class: 'css-class' },
{ key: 'key2', label: 'label2', class: 'css-class' },
{ key: 'key3', label: 'label3', class: 'css-class' },
{ key: 'key4', label: 'label4', class: 'css-class' },
]

Related

How to do cell editing in vue-good-table?

I am trying to create a table where the data can be edited directly in the cells. However, I don't understand how to do this.
I am using Vue.js, Vuexy and vue-good-table 2.21.1. The data is contained in the mediaPlanData variable and is reactive. The table is successfully populating with data and can be modified. However, when I change the data in the cells, this variable does not change. I did not find in the documentation vue-good-table how to do this. Please tell me how can I achieve the desired result?
<vue-good-table
:columns="columns"
:rows="mediaPlanData"
:select-options="{
enabled: true,
selectOnCheckboxOnly: true, // only select when checkbox is clicked instead of the row
selectionInfoClass: 'custom-class',
selectionText: 'rows selected',
clearSelectionText: 'clear',
disableSelectInfo: true, // disable the select info panel on top
selectAllByGroup: true, // when used in combination with a grouped table, add a checkbox in the header row to check/uncheck the entire group
}"
#on-selected-rows-change="onRowClick"
>
<template slot="table-row" slot-scope="props">
<span>
<b-form-input v-model="props.row[props.column.field]"
type="text"
></b-form-input>
</span>
</template>
</vue-good-table>
data() {
return {
pageLength: 10,
columns: [
{
label: 'Channel Code',
field: 'channelCode',
},
{
label: 'Product',
field: 'product',
}
],
mediaPlanData: [] //[ {"channelCode": "P230", "product": "Test"}, {"channelCode": "P230", "product": "Test4"}, {"channelCode": "P230", "product": "Test45"}, {"channelCode": "Р230", "product": "Test2"}]
}
}
methods: {
onRowClick(params) {
console.log('onRowClick' + JSON.stringify(params))
this.$toast({
component: ToastificationContent,
props: {
title: `Hello user! You have clicked on row ${params.selectedRows.product}`,
icon: 'UserIcon',
variant: 'success',
},
})
}
}
I have solved this problem.
Added to b-form-input
#change="changeCell(props.row[props.column.field], props.column.field, props.row.originalIndex)"
And adden method
changeCell(changedData, column, row) {
this.mediaPlanData[row][column] = changedData
},

How to combine an Expandable Table with an Expansion Panel in Vuetify?

I'd like to combine two separate Vuetify functionalities into one:
https://vuetifyjs.com/en/components/data-tables --> Expandable Rows Table (but ideally with more than one data row upon expansion)
https://vuetifyjs.com/en/components/expansion-panels --> External Control Expansion Panel
Ultimately, the goal is to have a table that looks like this (Grouping Table with expand/collapse all one): https://codepen.io/lzhoucs/pen/aadaJx
The issue with this table is that despite fitting the code into my project, certain functionalities don't work -- such as clicking to open and close a table. I believe this is due to this being a different version of Vue than what I'm using, which is the most up to date, as I spotted some old styles.
I've tried a bunch of things, but my most successful attempt is creating a table within a table. Here is the code for that:
<template>
<v-container>
<v-data-table
:headers="headers"
:items="projects"
:expanded="expanded"
item-key="name"
show-expand
class="elevation-1"
#click:row="clicked"
>
<template v-slot:expanded-item="{ headers }">
<td :colspan="headers.length">
<v-data-table
:headers="peopleHeaders"
:items="people"
item-key='name'
hide-default-footer
class='elevation-1'>
<template slot="item" slot-scope="props">
<tr>
<td>{{props.item.name}}</td>
<td>{{props.item.major}}</td>
<td>{{props.item.preference}}</td>
<td>
<v-btn color='success'>Accept</v-btn>
<v-btn color='error'>Reject</v-btn>
</td>
</tr>
</template>
</v-data-table>
</td>
</template>
</v-data-table>
</v-container>
</template>
<script>
export default {
data() {
return {
expanded: [],
headers: [
{
text: 'Name',
align: 'left',
sortable: true,
value: 'name',
},
{ text: 'Status', value: 'Status' },
],
projects: [
{
name: '#this is the project they applied to',
Status: 'Status: Pending',
},
],
peopleHeaders: [
{
text: 'Name',
align: 'left',
sortable: true,
value: 'name',
},
{
text: 'Major',
align: 'left',
sortable: true,
value: 'major',
},
{
text: 'Preference',
align: 'left',
sortable: true,
value: 'preference',
},
],
people: [
{
name: 'BORB',
major: 'SWE',
preference: 'idk',
},
],
};
},
methods: {
clicked(value) {
this.expanded.push(value);
},
},
};
</script>
Any advice for how to combine the two features to achieve the table desired would be greatly appreciated.

Adding img attribute to options in b-select component

I would like to add HTML img attribute to the b-form-select component of boostrap-vue inside to load img with each option?
<template>
<div>
<b-form-select v-model="selected" :options="options"></b-form-select>
<div class="mt-3">Selected: <strong>{{ selected }}</strong></div>
</div>
</template>
<script>
export default {
data() {
return {
selected: null,
options: [
{ value: null, text: 'Please select some item' },
{ value: 'a', text: 'This is First option' },
{ value: 'b', text: 'Default Selected Option' },
{ value: 'c', text: 'This is another option' },
{ value: 'd', text: 'This one is disabled', disabled: true }
]
}
}
}
</script>
It seems bootstrap-vue and bootstrap have different implementations on select components. And bootstrap-vue doesn't support thumbnails and it uses native select and options elements which makes impossible to set background image. Instead you can emulate dropdown component like select as below :
Template
<template>
<div class="hello">
<div class="back"></div>
<b-dropdown :text="selected ? selected.text : 'Please select some item'">
<b-dropdown-item
:disabled="option.disabled"
#click="select(option)"
v-for="option in options"
:key="option.value"
>
<div>
<img :src="option.src">
{{option.text}}
</div>
</b-dropdown-item>>
</b-dropdown>
</div>
</template>
Component
export default {
name: "HelloWorld",
props: {
msg: String
},
data() {
return {
selected: null,
options: [
{
value: null,
text: "Please select some item",
src: "https://mdn.mozillademos.org/files/7693/catfront.png"
},
{
value: "a",
text: "This is First option",
src: "https://mdn.mozillademos.org/files/7693/catfront.png"
},
{
value: "b",
text: "Default Selected Option",
src: "https://mdn.mozillademos.org/files/7693/catfront.png"
},
{
value: "c",
text: "This is another option",
src: "https://mdn.mozillademos.org/files/7693/catfront.png"
},
{
value: "d",
text: "This one is disabled",
disabled: true,
src: "https://mdn.mozillademos.org/files/7693/catfront.png"
}
]
};
},
methods: {
select(option) {
console.log(option);
this.selected = option;
}
}
};
Sandbox
Just like Bootstraps's custom select component BootstrapVue's <b-form-select> is based on <select>, which by HTML5 standards does not support complex HTML content in <option> elements.
If you need complex content (i.e. images, etc) in the options, you would need to create a custom component (probably based on <b-dropdpwn>) that allows you to use custom HTML5 in the "options" (dropdown items) and emulate the native select features.

Loop inside modal Bootstrap Vue js

I have a detail about an object inside my object fetched from the API. I would like to add a loop inside of the modal to show the details when I click.
data: function() {
return {
fields: [
{ key: 'customerOrderDelay', label: this.$t('metricsTable.column-name34'), sortable: true, class: 'text-center' },
{ key: 'supplierOrders', label: "suppllier order", sortable: true, class: 'text-center' },
{ key: 'actions', label: 'Actions' }
]
}
}
SupplierOrders is an object and I want to print the details with a loop inside the modal:
<b-modal :id="infoModal.id" :title="infoModal.item.orderAmount" ok-only #hide="resetInfoModal">
<!-- <pre>{{ infoModal.content }}</pre> -->
<div v-for="foo in infoModal.item.supplierOrders" ><md-card md-with-hover>
<md-ripple>
<md-card-header>
<div class="md-title">{{foo.supplierOrderNumber}}</div>
<div class="md-subhead">{{foo.supplierName}}</div>
</md-card-header>
<md-card-content>
{{foo.sectionName}}
</md-card-content>
<md-card-actions>
</md-card-actions>
</md-ripple>
</md-card>
the table :
<b-table
:tbody-tr-class="rowClass"
:busy="isBusy"
responsive="true"
:sticky-header="stickyHeader"
small
:items="totalOrders"
:fields="fields"
:per-page="300"
:filterIncludedFields="filterOn"
:sort-by="sortBy"
#sort-changed="sortTable"
>
It seems that I cannot access the object inside the object used by bootstrap-vue's table: Does anyone know how to override it?

VUEJS Display nested object in <b-table> VUE-BOOTSTRAP

I have an array of objects (users) gotten by an api request. Its structure is something like this:
api response: (5) [{…}, {…}, {…}, {…}, {…}]
Inside this array, the objects are like this:
0: {
user_address_string: ('Street 1')
id: (3)
avatar: (img')
...
user: {
id: 1
first_name: 'Lucas'
last_name: 'Smith'
}
},
1: {...},
2: {...},
....
]
It is just a sample just to show you the structure.
As you can see, among its properties there's another object named user{}.
I need to display only the properties contained in this object.
I would like to keep the structure of the table I was using before I got this new api (which didn't have objects as properties).
<b-table
responsive
v-if="users && users.length > 0"
:fields="fields"
:items="users"
>
The template should be something like this:
<template slot-scope="data">
{{ data.item.user }}
</template>
data.item should be the single user in the users array of objects, and with .user I should be able to access the properties of its object property user. (Going further data.item.user.first_name, etc, to access the single properties in it). What am I missing?
Nothing is rendered on the screen.
No errors in the console though.
In the script I have:
users: [],
fields: [
{ key: 'id', label: 'ID'},
{ key: 'name', label: 'Name' }
]
So, how should I write the template for displaying the nested object’s properties?
Also, the directive v-if="users && users.length > 0" in the b-table should still work, right? It is still an array, but of objects this time. Please correct me if I am wrong.
Thank you
You can specify nested field keys in dotted notation:
export default {
data() {
return {
users: [],
fields: [
{ key: 'id', label: 'ID'},
{ key: 'user.first_name', label: 'First Name' },
{ key: 'user.last_name', label: 'Last Name' }
]
}
}
As #Troy Morehouse suggested, I just needed to redefine the fields definition as
{ key: 'user.first_name', label: 'First name' }
**UPDATE after #artworkjpm comment:
The HTML code should be something like this:
<b-table
v-if="users && users.length > 0 && !isLoading"
id="table-transition-userList"
:key="users.id"
responsive
:tbody-tr-class="userStatus"
:tbody-transition-props="transProps"
:fields="fields"
:items="users"
>
<template
v-slot:cell(fullName)="data"
>
{{ data.item.user.first_name }} {{ data.item.user.last_name }}
</template>
<template
v-slot:cell(buttons)="data"
>
<b-button
v-b-tooltip.hover
title="See plan"
class="btn-plan p2"
variant="primary"
:disabled="!data.item.user.is_active"
#click.prevent="seePlan(data.item), selectUser(data.item)"
>
<span class="svg-container">
<svg-icon icon-class="route" />
</span>
</b-button>
</template>
</b-table>
**Minor change in fields, but the concept is the same:
fields: [
{ key: 'fullName', label: 'User' },
{ key: 'buttons', label: 'Operations' }
],
Hope it helps.
xx
Whereever you get your data, you can extract the property you want and save locally in this case it would look something like this:
data()
return {
users: []
}
methods: {
async getUsersFromApi(){
const { data: {users }} = await axios.get(...)
users.map(user => {
this.users.push(user.user)
}
An easy way to do it is by using a formatter in fields definition:
data() {
return {
fields: [
{
key: "avg_score",
label: this.$t("avgScore"),
sortable: true,
sortByFormatted: true,
formatter: (value, key, item) => item.stats.avg_score?.text
},
],
items: [...your item list]
}
}
And in the template:
<b-table :items="items" :fields="fields"></b-table>
The formatter will print the specified key or value automatically.