Per-row click listener support about vue-table-component HOT 24 CLOSED

Tempted to add an @click event to the table component, which would have column, row and row data in it's payload. Not sure what the behaviour should be when clicking something like the filter though.

from vue-table-component.

You can do that with a scoped slot or a formatter function.

https://github.com/spatie/vue-table-component#formatting-values

from vue-table-component.

If this is something that is easily implemented and easy to tests, I'd accept that as a PR.

from vue-table-component.

from vue-table-component.

Tempted to add an @click event to the table component

We'd accept a PR that adds this to the package.

from vue-table-component.

@sebastiandedeyne maybe you could just give the table a general onFilter callback or something, but individual cell-level click callbacks for the filter headings seems unnecessary, since they are pretty single-responsibility.

from vue-table-component.

I came here because I'm trying to add a link in one of the columns (an "edit" link for row of data that would take me straight to my record editing route in laravel), but from reading around, it seems this is not possible at the moment. Correct?

from vue-table-component.

Added PR #80

from vue-table-component.

@pieterjandesmedt @sebastiandedeyne

I know you will be updating the docs soon but for now how do we make use of this click event and access it in Vue ? An example would be helpful :)

Thanks

from vue-table-component.

You can listen to the @rowClick event on the table component. The event payload will be the row's data.

<table-component
    ...
    @rowClick="handleRowClick"
></table-component>

from vue-table-component.

I tried it .. but does not work for me ...

	<template>
	  <div id="users" class="container">
	    <table-component :data= "fetchData" ref="table" @rowClick="handleRowClick" sort-by="songs" sort-order="asc">
	        <table-column show="id" label="ID" data-type="numeric" hidden></table-column>
	        <table-column show="firstName" label="First name"></table-column>
	        <table-column show="lastName" label="Last name"></table-column>
	        <table-column show="email" label="Email"></table-column>
	        <table-column show="birthday" label="Birthday" data-type="date:DD/MM/YYYY"></table-column>
	        <table-column show="isAdmin" label="Is Admin?"></table-column>
	        <table-column label="" :sortable="false" :filterable="false">
	            <template slot-scope="row">
	                <a :href="`#${row.id}`">Edit</a>
	            </template>
	        </table-column>
	    </table-component>
	  </div>
	</template>

	<script>
	import axios from 'axios'
	import store from '@/vuex/store'
	import { mapActions } from 'vuex'
	import _ from 'underscore'
	export default {
	  name: 'UsersPage',
	  methods: _.extend({}, mapActions(['userCount']), {
	    async fetchData ({ page, filter, sort }) {
	      const response = await axios.get('users', { params: { _page: page, _sort: sort, _limit: 5 } })
	      const pages = Math.ceil(store.state.userCount / process.env.MAX_USER_PER_PAGE)
	      response.pagination = { currentPage: page, totalPages: pages }
	      return response
	    },
	    handleRowClick: function (payload) {
	      console.log('ROW CLICKED')
	    }
	  }),
	  store,
	  mounted: function () {
	    this.$nextTick(function () {
	      this.userCount()
	      this.$refs.table.refresh()
	    })
	  }
	}
	</script>

from vue-table-component.

You're definitely on the latest version of the package?

I'll give this a look this week.

from vue-table-component.

I can confirm @rowClick is not working for me.

package.json

"vue": "^2.5.2",
"vue-table-component": "^1.8.0"

HTML

<table-component
v-bind:data-id="key"
:data="trades"
@rowClick="handleRowClick"
>
    <table-column label="No" data-type="numeric"><template scope="row"> <a v-bind:href="'/ticket/' + row.id">{{row.no}}</a> </template></table-column>
    <table-column show="description" label="Description" :filterable="false" v-if="showDescription"></table-column>
    <table-column show="name" label="Name"></table-column>
</table-component>

JS

import TableComponent from 'vue-table-component';
Vue.use(TableComponent);
new Vue({
  el: '#app',
  data: {...},
  methods:{
    handleRowClick: function(){
      console.log('row clicked');
    }
  }
});

including @THAlpha

from vue-table-component.

That's strange, it is working for me with the same versions of vue and vue-table-component. Maybe try a rm -rf node_modules, rm package-lock.json and npm i?

from vue-table-component.

I had high hopes for this. Dropped the node_modules folder, no package-lock.json, re-installed all modules and no luck.

I even stripped the table down to 1 column with basic settings to ensure nothing was interfering.

from vue-table-component.

I just did the same and it's still working for me. Maybe the <a> is interfering somehow?

from vue-table-component.

No its not that.

If i watch my webpack modules it reads node_modules/vue-table-component/dist/index.js
If i edit the method in there and add a console log to the emitRowClick like this, it console logs the row on click:

emitRowClick: function emitRowClick(row) {
  console.log(row);
  this.$emit('rowClick', row);
}

So it seems that the row click is happening and the listener is on but how do I access it in my Vue?

from vue-table-component.

Try importing the TableComponent 'locally'. In my .vue single file component:

<template>
	<table-component :data="activity" @rowClick="selectRow">
		<table-column show="vehicleLabel" :label="tableLabel('vehicleLabel')"></table-column>
...
        </table-component>
</template>

<script>
	import { TableComponent, TableColumn } from 'vue-table-component';

	export default {
		components: { TableComponent, TableColumn },
		computed: {
...
</script>

from vue-table-component.

Im not sure what you mean, something like this?
import TableComponent from 'node_modules/vue-table-component/dist/index.js';

from vue-table-component.

Or try
import { TableComponent } from 'vue-table-component';
instead of
import TableComponent from 'vue-table-component';

from vue-table-component.

Doesnt work:

import Vue from 'vue';
import { TableComponent, TableColumn } from 'vue-table-component';

Vue.component('table-component', TableComponent);
Vue.component('table-column', TableColumn);

from vue-table-component.

Try converting your app to use single file components... after that, I'm out of suggestions :-/

from vue-table-component.

I think my limited knowledge in Vue has lightened me to the fact that i: a) need to learn Vue properly... and b) should probably write my own components to get a better understanding of them.

Thanks for helping out and all the suggestions.

from vue-table-component.

rowClick not defined !!

from vue-table-component.