Make entire row expand on click

[DeBelserArne]

For feature request, provide the following section

Motivation / Use Case

Now it's kinda hard to click on the small chevron to expand the row, it would be cool if we could make the entire row clickable.

Expected Behavior

Expand entire row on click anywhere;

Other Information

I have tried this implementation for https://stackoverflow.com/questions/52033039/how-to-make-a-table-row-clickable-and-expand-the-row-vue-js-element-ui

But it doesn't seem compatible with the datatables.

WORKING EXAMPLE WITH el-table

https://jsfiddle.net/ahLxqgot/2/

Try to click a row it works. But when I add the code to the datatable it no longer works:

    methods: {
        rowClicked(row) {
this.$refs.tableData.toggleRowExpansion(row);
        },
    },

The error:

TypeError: this.$refs.tableData.toggleRowExpansion is not a function
    at VueComponent.rowClicked (app.js:5247)
    at invokeWithErrorHandling (vendor.js:151638)
    at VueComponent.invoker (vendor.js:151963)
    at invokeWithErrorHandling (vendor.js:151638)
    at VueComponent.Vue.$emit (vendor.js:153664)
    at VueComponent.Vue.<computed> [as $emit] (backend.js:1793)
    at VueComponent.n.$emit (vendor.js:144179)
    at VueComponent.handleEvent (vendor.js:38806)
    at VueComponent.handleClick (vendor.js:38794)
    at click (vendor.js:38841)

[Vue warn]: Error in v-on handler: "TypeError: this.$refs.tableData.toggleRowExpansion is not a function"

found in

---> <DataTables>
       <UserResultList> at resources/js/components/User/ResultList.vue
         <Root>````

[njleonzhang]

refer to https://github.com/njleonzhang/vue-data-tables/issues/148, you can leverage refs.

[DeBelserArne]

Alright thanks, using double $refs did the trick.

First the one of my vue-datatables, then of the el-table, thanks for pointing me in the right direction!