Per-row click listener support

[benwiley4000]

I would be nice to have event listener support for row clicks, which could be pre-set as data properties.

[freekmurze]

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

[sebastiandedeyne]

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.

[benwiley4000]

Seems to me like it should only be for the actual table rows, not the heading.

On Jun 26, 2017 4:10 AM, "Sebastian De Deyne" notifications@github.com wrote:

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.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/spatie/vue-table-component/issues/15#issuecomment-310991785, or mute the thread https://github.com/notifications/unsubscribe-auth/AM7h7TY1nLiqNYkcuMjouES1N3Qn4zbBks5sH2dvgaJpZM4N9sdo .

[freekmurze]

Tempted to add an @click event to the table component

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

[benwiley4000]

@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.

[aboustayyef]

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?

[sebastiandedeyne]

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

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

[pieterjandesmedt]

Added PR #80

[GreggOrdHume]

@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

[sebastiandedeyne]

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>

[ghost]

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>

[sebastiandedeyne]

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

I'll give this a look this week.

[GreggOrdHume]

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

[pieterjandesmedt]

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?

[GreggOrdHume]

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.

[pieterjandesmedt]

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

[GreggOrdHume]

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?

[pieterjandesmedt]

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>

[GreggOrdHume]

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

[pieterjandesmedt]

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

[GreggOrdHume]

Doesnt work:

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

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

[pieterjandesmedt]

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

[GreggOrdHume]

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.

[vahidalvandi]

rowClick not defined !!