How to customize ngx datatable. I am not able to find, where I have to change the code to get rid of this total number of records and to replace it with a drop down to show items per page. My pagination are missing some icons too.
Use the custom footer template ( refer the link below ). so it overrides the default footer.
https://github.com/swimlane/ngx-datatable/blob/master/demo/basic/footer.component.ts
Examples
If you want to just get rid of the footer, simply use:
<ngx-datatable-footer></ngx-datatable-footer>
If you want to customise it:
<ngx-datatable-footer>
<ng-template
ngx-datatable-footer-template
let-rowCount="rowCount"
let-pageSize="pageSize"
let-selectedCount="selectedCount"
let-curPage="curPage"
let-offset="offset"
>
<div style="padding: 5px 10px">
<div><strong>Summary</strong>: Gender: Female</div>
<hr style="width:100%" />
<div>
Rows: {{ rowCount }} | Size: {{ pageSize }} | Current:
{{ curPage }} | Offset: {{ offset }}
</div>
</div>
</ng-template>
</ngx-datatable-footer>
But if You want change only "total" or "no items found" then overwrite messages property:
//Static messages in the table you can override for localization.
{
// Message to show when array is presented
// but contains no values
emptyMessage: 'No data to display',
// Footer total message
totalMessage: 'total'
}
https://swimlane.gitbooks.io/ngx-datatable/api/table/inputs.html
Related
I have this data which is returning me the labels and every I need to create a component.
The component is already built when I pass the values. Now I want to create it as a for loop so that I can keep on adding entries, and it will create components as needed.
This is what I've tried:
data() {
return {
options: [{
heading: 'Welcome to the Card',
subheading: 'Manage your Profile here'
},
{
heading: 'Pay your bills',
subheading: 'Manage your bills and payments here'
}
]
}
}
I am trying to loop it over like this
<div v-for="(value, key) in options">
<componentName {{key}} = {{value}}/>
</div>
Previously, the above code was like this:
<componentName :heading='Welcome to the Card' :subheading='Manage your Profile here'/>
Which works well but to add more I have to recreate this <componentName which I want to avoid. I want to keep one entry and feed it with array of objects
I'm using Vue2. What am I doing wrong here?
You're very close. Given your data, the template would need to look like:
<div v-for="(option, index) in options" :key="index">
<h3>{{ option.heading }}</h3>
<p>{{ option.subheading}}</p>
</div>
Or, if you've got a custom component, which takes heading and subheading as props:
<componentName
v-for="(option, index) in options"
:key="index"
:heading="option.heading"
:subheading="option.subheading"
/>
If you can share a bit more of your code, I can create a runnable snippet, if that would be helpful.
I have a paragraph in my app, in which the user can translate it at the click of a button. I interpolate the text seen via my props (props.row.text) and my data (this.data.translatedText).
The data property is empty/null until the button is cliked, which therefore causes me to receive the error "data is null" in my Console. I attempt to fix this with the code below, however, this throws me error but does not display the interpolated text after the button click.
Does anyone have a suggestion for how best to structure this, so that the {{ props.row.text }} is replaced by {{ this.data.translatedText }} after the button is clicked?
Component.vue
<span id="translationButton">
<translation-button #click="calltranslatedText()" #changeTitle="ChangeT" />
</span>
<div class="ticket-text-container">{{ props.row.text }}</div>
<div class="ticket-text-container" v-if="calltranslatedText()">{{ this.data.translatedText }}</div>
methods: {
ChangeT(title)
{
this.translatedText = title
},
calltranslatedText() {
return true
},
Firstly don't use this and data in the template just indicate a prop name you defined in data function.
Secondly, you can just use translatedText in v-if to show div with the translated text.
<div class="ticket-text-container" v-if="translatedText">{{ translatedText }}</div>
Don't forget to set translatedText to an empty string or null to hide this block again if needed.
I have a VueJS view that creates collapsed contents using Bootstrap Vue Collapse Component.
The data is dynamic and can contains hundreds of items, which is why you see in the code below it was created via a v-for loop in Vue.
<div class="inventory-detail" v-for="(partNumberGroup,index) in inventory" :key="index" >
<b-button block v-b-toggle="partNumberGroup.partNumber" v-bind:id="partNumberGroup.partNumber" variant="primary"
#click="(evt) =>{isActive = !isActive && evt.target.id == partNumberGroup.partNumber}">
<i v-bind:id="partNumberGroup.partNumber" class="float-right fa" :class="{ 'fa-plus': !isActive, 'fa-minus': isActive }"></i>
{{ partNumberGroup.partNumber }}
</b-button>
<div class="inventory-detail__card" v-for="item in partNumberGroup.items">
<b-collapse v-bind:id="partNumberGroup.partNumber" >
<b-card>
<!--Accordion/Collapse content -->
</b-card>
</b-collapse>
</div>
</div>
This works fairly well in that I can individually expand and collapse each content separately. However, the one issue I'm facing is each time I click the icon fa-minus (-) orfa-plus (+), all of them changed as per the images below.
Any tips on how I should implementing this? in my code I tried the dynamic CSS class switching but I still lack the ability to switch on specific element.
I feel like the solution to this is to somehow conditionally apply dynamic CSS class or somehow able to use the attribute 'aria-expanded'.
You can try something like this. Whenever somebody clicks on the icon, set its index as activeIndex (using the setActiveIndex method). Then you can set the class accordingly by comparing the activeIndex with current index
<i
#click="setActiveIndex(index)"
v-bind:id="partNumberGroup.partNumber"
class="float-right fa"
:class="{ 'fa-plus': !isActive(index), 'fa-minus': isActive(index) }">.
</i>
then in the script part:
...
data() {
return {
activeIndex: -1
}
},
methods: {
/* set active index on click */
setActiveIndex(index) {
this.activeIndex = index;
},
/* check if index is active or not */
isActive(index) {
return index === this.activeIndex;
}
}
The Firestore database field (reviewPrivacy in the review collection) is of string type, populated from a Vue form entry (radio) with one of three three possible answers (values): keepFullyPrivate being among them.
I'm trying to only display <h2>The reviewer's identity is private</h2> if the value of review.reviewPrivacy is keepFullyPrivate.
Once this is working, I'll add a v-if-else and then v-else options, displaying different content for each.
My code is below.
There aren't any errors flagged in VSC, but it doesn't matter what the value of review.reviewPrivacy is - the text in the <h2> tags always displays, regardless of whether or not it's equal to keepFullyPrivate
<div v-if="('review.reviewPrivacy', '==', 'keepFullyPrivate')"><h2>The reviewer's identity is private</h2></div>
Update (additional info):
I'm using Vue version 3.2.1
The data from Firestore is fetching correctly. For example, in the same parent as the code above, this line <p> Privacy choice for this review: {{ review.reviewPrivacy }} </p> results in the following text in the DOM: Privacy choice for this review: postAnonPublic, which is the v-else-if condition.
2nd update: code as a full block, as requested in comments:
<div class="review-detailZ">
<div> <!-- BEGIN main (left-hand) column -->
<p> Privacy choice for this review: {{ review.reviewPrivacy }} </p>
<br />
<!-- Using Vue version 3.2.1 -->
<div v-if="('review.reviewPrivacy', '==', 'keepFullyPrivate')"><h2>The reviewer's identity is private</h2></div>
<div v-else-if="('review.reviewPrivacy', '==', 'postAnonPublic')"><h2>Incognito - review by{{ review.userName }}</h2></div>
<div v-else><h2>Reviewer chose to be fully public - full name is {{ review.userFirstName }} {{ review.userLastName }}</h2></div>
<br />
<p>Created {{ review.createdAt }} days ago</p>
<br />
</div>
Thanks!
('review.reviewPrivacy', '==', 'keepFullyPrivate') is just a comma separated group of strings, and it evaluates to the last string: 'keepFullyPrivate', so your markup becomes v-if="'keepFullyPrivate'", which is always truthy. Therefore, the div and its h2 are always rendered.
The correct expression to compare review.reviewPrivacy to 'keepFullyPrivate' is:
review.reviewPrivacy == 'keepFullyPrivate'
// or even better:
review.reviewPrivacy === 'keepFullyPrivate'
It's good practice to use triple-equals (===) for a strict comparison.
So the end result should be:
<div v-if="review.reviewPrivacy === 'keepFullyPrivate'"><h2>The reviewer's identity is private</h2></div>
new Vue({
el: "#app",
data: {
review: { reviewPrivacy:0 },
keepFullyPrivate:0
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
<div v-if="review.reviewPrivacy == keepFullyPrivate">
<h2>The reviewer's identity is private</h2>
</div>
<div v-else>
<h2>else part</h2>
</div>
</div>
I see two ways to do this:
A) You can create a computed property "showSectionX ()" which does the comparison:
[...]
<div v-if="showSectionX"><h2>The reviewer's identity is private</h2></div>
[...]
computed: {
showSectionX () {
return this.review.reviewPrivacy === 'keepFullyPrivate'
}
}
[...]
Instead if X you should of course use a word that describes the purpose of this section.
B) you can do the comparison directly in the v-if:
[...]
<div v-if="review.reviewPrivacy === 'keepFullyPrivate'"><h2>The reviewer's identity is private</h2></div>
[...]
I guess the latter is what you were trying to do but used the wrong syntax.
I have a bunch of dynamic columns in a v-data table which I need to loop through and interrogate in order to display the correct info. It looks a bit like this (taken from the answer here: Vuetify format cell based on item type)
<v-data-table :item="items" ... >
<template v-for="header in headers" v-slot:[`item.${header.value}`]="{ item } ">
<template v-if="header.type === 'foo'">
<span style="color: red;">{{ item[header.value] }}</span>
</template>
<template v-else-if="header.value === 'data-table-expand'">
???
</template>
<template v-else>
{{ item[header.value] }}
</template>
</template>
</v-data-table>
Since I need the v-if statement, all other types default to the v-else. However, the v-else is not suitable for when a type is an expandable row. It will display a blank value for that column. So I created a v-else-if template to be able to capture the expandable row column and correctly render it to the screen.
The problem is that I don't know what to put in the template to indicate it's a column with expandable rows (https://vuetifyjs.com/en/components/data-tables/#expandable-rows). In other words it does not render the carat icon that shrinks/expands the subtable, nor does it render the clickable actions. How would I modify the v-else-if template to correctly render its contents?
I came up with a workaround using computed properties.
Instead of using
v-for="header in headers"
I changed it to a computed headers which is filtered.
<template v-for="header in headersIWant" v-slot:[`item.${header.value}`]="{ item } ">
<span style="color: red;">{{ item[header.value] }}</span>
</template>
...
computed: {
headersIWant() {
return this.headers.filter(x => x.type === 'foo');
}
}