<vaadin-grid id="grid" items="[[data]]" active-item="{{activeItem}}">
<vaadin-grid-column>
<template class="header">#</template>
<template>[[index]]</template>
</vaadin-grid-column>
<vaadin-grid-column>
<template class="header">First Name</template>
<template>[[item.name.first]]</template>
</vaadin-grid-column>
</vaadin-grid>
Using the activeItem pattern vaadin-grid row data can be selected when clicking on a row.
Is there a way to invoke this with a button action?
Perhaps by selecting a property from a parent node?
<vaadin-grid id="grid" items="[[data]]" active-item="{{activeItem}}">
<vaadin-grid-column>
<template class="header">#</template>
<template>[[index]]</template>
</vaadin-grid-column>
<vaadin-grid-column>
<template class="header">First Name</template>
<template><paper-button on-tap="selectRowData">Select</paper-button</template>
</vaadin-grid-column>
</vaadin-grid>
You can select row data with a button by getting the row index and selecting the row from the data source.
<vaadin-grid id="grid" items="[[data]]" active-item="{{activeItem}}">
<vaadin-grid-column>
<template class="header">#</template>
<template>[[index]]</template>
</vaadin-grid-column>
<vaadin-grid-column>
<template class="header">First Name</template>
<template>
<paper-button id="[[index]] on-tap="selectRowData">Select</paper-button</template>
</vaadin-grid-column>
</vaadin-grid>
...
selectRowData(e) {
let row = this.data[e.detail.sourceEvent.target.id];
// do something with row data
}
Place a button in one of the cell templates, bind a click listener for that which receives the item as a parameter. This is easiest to do with Polymer data binding. Then add the item to grid.selectedItems array in the listener callback.
<vaadin-grid-column width="14em">
<template>
<vaadin-button on-click="deleteUser" >
<iron-icon icon="icons:delete" ></iron-icon>
</vaadin-button>
</template>
//You don't need to define any model it's simply available
deleteUser(e)
{
let row=e.model.item;
console.log(row);
// e.g. make a REST Delete Operation with iron-ajax
this.$.ajaxUserModify.url=this.dataURL+"/"+row.id;
this.$.ajaxUserModify.method="delete";
this.$.ajaxUserModify.body="";
this.$.ajaxUserModify.generateRequest();
}
Related
I have a Nuxt project with Buuefy implementation. I tried to make table with #empty slot when no data are available but it does not work. Documentation for Buefy table uses
<template #empty>
<div class="has-text-centered">No records</div>
</template>
My code looks like
<b-table :data="companies" id="agencyCompaniesTable" bordered>
<b-table-column v-for="column in columns" :key="column.id" v-bind="column">
<template v-if="column.searchable && !column.numeric"
#searchable="props">
<b-input v-model="props.filters[props.column.field]"
placeholder="Search..."
icon="magnify"
size="is-small" />
</template>
<template v-slot="props">
{{ props.row[column.field] }}
</template>
</b-table-column>
<template #empty>
<div class="has-text-centered">No records</div>
</template>
</b-table>
The code is identcal the table is empty but I dont see the text "No records". What could be the problem? Thanks for any help.
I am creating a general component based on v-data-table. This component has templates that are displayed anywhere, such as: ..template v-slot:item.index="{ item }"> ....
The idea is to be able to pass custom templates as children of the component, in this case I would like to pass "..template v-slot:item.state="{ item }"> ..."
As you can see, in the source code of the ..[DataTableFuntional>] <v-data-table... component there is a commented template (..template v-slot:item.state="{ item }">) which works perfectly.
But it does not suit my need since that way I would have to pass props to activate or deactivate the template because not all tables would always carry that field called "state"
DataTableFuntional component
<template>
<div>
<v-data-table
class="tableBackground"
:dense="dense"
:headers="headers"
:items="items.data"
:options.sync="options"
no-data-text="No hay datos disponibles"
:loading-text="$t('comunes.general.cargando')"
>
<!-- Custom templates -->
<template v-slot:body.append>
<slot name="body2"></slot>
</template>
<template v-slot:item.state="{ item }">
<slot name="state"></slot>
</template>
<!-- <template v-slot:item.state="{ item }">
<div class="">
<span v-if="item.state === 1" color="red">Close</span>
<span v-else-if="item.state === 2" color="green">Open</span>
</div>
</template> -->
<!-- Default templates -->
<template v-slot:item.index="{ item }">
{{ items.data.indexOf(item) + 1 }}
</template>
</v-data-table>
</div>
</template>
Now, if we see this code, which is the previous component imported in any page of the site.
We see that there are two "slots": v-slot: state" and "v-slot: body2" that are shown correctly, but if we see the code of the v-data-table> ... we can see that it is necessary to specify the v -slot in the template, for example:
<template v-slot: item.state = "{item}">
<slot name = "state"> </slot>
</template>.
now, if we see the first tamplate:
<template v-slot: item.state = "{item}">
<div class = "">
<span v-if = "item.state === 1" color = "red"> Close </span>
<span v-else-if = "item.state === 2" color = "green"> Open </ span
>
</div>
</template>
This would be the way I would more or less like to be able to assign new templates to the v-data-table component.
but it does not work.
if we see the following template
<template v-slot: state>
{{'Hello'}}
</template>
This does work but I don't know how to access the item to be able to set the conditions according to the state.
imported DataTableFuntional component whit child templates
<DataTableFuntional
:ref="'reference'"
:endpoint="item.endpoint"
:headers="item.headers"
:actions="item.actions"
:btsmall="true"
>
<!-- Custom templates -->
<template v-slot:item.state="{ item }">
<div class="">
<span v-if="item.state === 1" color="red">Close</span>
<span v-else-if="item.state === 2" color="green">Open</span
>
</div>
</template>
<template v-slot:state>
{{'Hello'}}
</template>
<template v-slot:body2>
<tr>
<td></td>
<td>
<v-text-field
type="number"
label="Less than"
></v-text-field>
</td>
<td colspan="4"></td>
</tr>
</template>
</DataTableFuntional>
I have a el-table (Element) in a Vue component with a selection column in it. You can select the checkbox to select multiple items. I need to have the function of selecting the checkbox attached to elements in the table.
<el-table
:data="unit_list"
#selection-change="handleSelectionChange"
>
<el-table-column type="selection" />
<el-table-column prop="name" label="Name" >
<template slot-scope="scope" >
<span #click="toggleRow(scope.row)" class="click_cell">
{{ scope.row.name }}
</span>
</template>
</el-table-column>
<el-table-column>
<template slot-scope="scope">
<div class="no_click_cell">
You can't click this
</div>
</template>
</el-table-column>
...script
handleSelectionChange(val) {
this.$emit('selecttionChange', val) // this sends the resulting list to the parent component
}
The documentation is not clear as to how you can access the selection change from toggleRow
The method looks like this:
//...methods
toggleRow(row){
this.$refs.unitListTable.toggleRowSelection(row)
}
Where unitListTable is your table ref
<el-table
ref="unitListTable"
:data="checkSearch(unit_list)"
#selection-change="handleSelectionChange"
>
I have the following code, which renders the expected table:
<v-data-table
dense
:headers="table_headers"
:items="table_data"
:items-per-page="table_rows"
:page="table_page"
:hide-default-footer=true
:loading="table_loading"
class="elevation-2"
>
</v-data-table>
I was hoping that appending the display-2 class will do the trick for me, but it seems it doesn't have any effect:
<v-data-table
dense
:headers="table_headers"
:items="table_data"
:items-per-page="table_rows"
:page="table_page"
:hide-default-footer=true
:loading="table_loading"
class="elevation-2 display-2"
>
</v-data-table>
I also tried the following, but it simply renders a bunch of empty row elements. This is not shocking, as I suppose vuetify now expects that I will provide a complete template for each of the rows?
<v-data-table
dense
:headers="table_headers"
:items="table_data"
:items-per-page="table_rows"
:page="table_page"
:hide-default-footer=true
:loading="table_loading"
class="elevation-2"
>
<template v-slot:item="props">
<tr class="display-2"></tr>
</template>
</v-data-table>
In my last attempt my code rendered more td elements per row than I expected, also all the columns were empty:
<v-data-table
dense
:headers="table_headers"
:items="table_data"
:items-per-page="table_rows"
:page="table_page"
:hide-default-footer=true
:loading="table_loading"
class="elevation-2"
>
<template v-slot:body="{ items }">
<tbody>
<tr v-for="row in items">
<td v-for="col in row"
class="display-2">
{{ col }}
</td>
</tr>
</tbody>
</template>
</v-data-table>
What am I doing wrong, is there a simpler way?
BTW: I'm not a JavaScript dev.
If you don't have too many columns, you can use a slot for each and wrap them in a div with a custom class like below:
<template v-slot:item.name="{ item }">
<div class="customStyle">{{ item.name }}</div>
</template>
edit:
In your case when you get columns dynamically, you can use body slot as you already tried but then you will have a custom styling for the whole table body. Give it a try as below, it is untested.
<template v-slot:body="{ items }">
<tr v-for="item in items" :key="item.id" class="customClass">
<td v-for="col in cols">
{{ item.col }}
</td>
</tr>
</template>
'cols' should be an array of column names as string that you are fetching dynamically.
It's important you don't use the style 'scoped'.
<style>
.my_class td{
font-size: small!important;
height: 0!important;
padding: 1px!important;
}
</style>
The v-data-table must be the specified class 'my-class'
<v-data-table class="my-class" :items="my_output" >
</v-data-table>
It works for me don't use the style scoped.
.v-data-table > .v-data-table__wrapper > table > thead > tr > th{
font-size: 16px !important;
}
You dont need to apply any style in particular through "style".
When you are working with tables, you should declare your headers in data() like this:
data() { headers: [{ text: "Title of your row", sortable: true, class: "*"}]
Here in the * you can replace it with any font size Vuetify offers you. You can see all of these in here:
https://v15.vuetifyjs.com/en/framework/typography/
So if you want the font to be good for an h3, you should replace the * above with:
class: "display-2"
Hope this helps. Also, if you want to have a specific color, you can use the class "primary--text" and it will grab the "primary" value from your actual vuetify theme. See more of this in here:
https://vuetifyjs.com/en/features/theme/
I want to have a bootstrap table and already added input checkboxes to select them as well as a filter to get all selected items (which is totally fine).
After selecting a row, the dataset property "selected" should be set to 1 or true.
But i want to remain all the selected values also when i filter (which should already be fixed by persisting the "selected" attribute in my dataset shouldn't it?)
Currently i can check the checkbox and the checkbox value itself is changed too, but the row.value variable remains the same even if i use v-model for row.value (2-way-databinding)
So. How can i change the value of an attribute in a bootstrap table?
<b-table show-empty
stacked="md"
:items="items"
:fields="fields"
:current-page="currentPage"
:per-page="perPage"
:filter="filter"
:sort-by.sync="sortBy"
:sort-desc.sync="sortDesc"
#filtered="onFiltered"
>
<template slot="selected" slot-scope="row">
<input type="checkbox" id="checkbox" v-model="row.value">
{{row.value}}
</template>
<template slot="name" slot-scope="row">{{row.value}}</template>
<template slot="sapNumber" slot-scope="row">{{row.value}}</template>
<template slot="createDate" slot-scope="row">{{ moment(row.value).format('dd DD.MM.YY, hh:mm:ss')}}</template>
<template slot="master" slot-scope="row">
<!-- We use #click.stop here to prevent a 'row-clicked' event from also happening -->
<b-button size="sm" #click.stop="info(row.item, row.index, $event.target)" class="mr-1">
Info modal
</b-button>
<b-button size="sm" #click.stop="row.toggleDetails">
{{ row.detailsShowing ? 'Hide' : 'Show' }} Details
</b-button>
</template>
<template slot="row-details" slot-scope="row">
<b-card>
<ul>
<li v-for="(value, key) in row.item" :key="key">{{ key }}: {{ value}}</li>
</ul>
</b-card>
</template>
</b-table>
The solution was quite simple.
Just change this part
<template slot="selected" slot-scope="row">
<input type="checkbox" id="checkbox" v-model="row.value">
{{row.value}}
</template>
to this one
<template slot="selected" slot-scope="data">
<input type="checkbox" id="checkbox" v-model="data.item.selected">
</template>
So the scope of this column does not effect the iterators dataset (which is "row" in my case) but the root data set of the data attribute.