This is the code snippet for the table which I am trying to render, have imported a-table from antd. Currently, we can add an extra td to achieve click functionality to route to details page from this listing page

<a-table
    :columns="paniesColumns"
    :dataSource="getDisplayData"
    class="panies-table"
    :pagination="false"
    rowKey="id"
    >
    <span slot="nse_symbol" slot-scope="nse_symbol" class="nse-symbol">
        <span>{{ nse_symbol || '-' }}</span>
    </span>
</a-table>

This is the code snippet for the table which I am trying to render, have imported a-table from antd. Currently, we can add an extra td to achieve click functionality to route to details page from this listing page

<a-table
    :columns="paniesColumns"
    :dataSource="getDisplayData"
    class="panies-table"
    :pagination="false"
    rowKey="id"
    >
    <span slot="nse_symbol" slot-scope="nse_symbol" class="nse-symbol">
        <span>{{ nse_symbol || '-' }}</span>
    </span>
</a-table>

• javascript
• vue.js
• vuejs2
• antd

• Please add your reproducible code snippet – Ahmet Zeybek Commented Feb 1, 2020 at 9:40

4 Answers 4

Without using the jsx plugin:

Modified code from Matt Sanders

<a-table :dataSource="dataSource" :columns="columns" rowKey="id" :customRow="customRow">

const customRow = (record) => {
 return {
  onClick: (event) => {console.log('click row', record);}
 };
}

Antd Vue does include a property customRow which lets you set props per row.

Example usage (please note: antdvue is using a vue jsx syntax here)

<Table
  customRow={(record) => {
    return {
      props: {
        xxx...
      },
      on: {
        click: (event) => {},       // click row
        dblclick: (event) => {}, // double click row
        contextmenu: (event) => {}  // right button click row
        mouseenter: (event) => {}   // mouse enter row
        mouseleave: (event) => {}   // mouse leave row
      },
    };
  )}
  customHeaderRow={(column) => {
    return {
      on: {
        click: () => {},        // click header row
      },
    };
  )}
/>

More details here : https://www.antdv./ponents/table/#customRow-usage

Update

As OP pointed out, this example from the docs requires an additional plugin for it to work. The plugin can be found here : https://github./vuejs/babel-plugin-transform-vue-jsx

Vue 3

AntDesign v3.0.0-beta.9

This is the only way that worked for me:

#template

<template>
  <a-table 
    :columns='columns'
    :data-source='data'
    @change='onChange'
    :customRow="customRow"
    :row-selection='rowSelection'
    :pagination="pagination"
  />
</template>

#methods

methods: {
 customRow(record: TableDataType) {
      return {
          onClick: (event: PointerEvent) => console.log('record', record, 'event', event)
      }
    }
}

No need to use jsx plugin here, and I found Roman's snippet not working for me, but this worked:

<a-table :customRow="customRow"></a-table>

function customRow(record) {
      return {
        on: {
          click: event => {
            console.log(event, record);
          }
        }
      };
    }