Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to add click listener to row of a-table in antd vue

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="companiesColumns"
    :dataSource="getDisplayData"
    class="companies-table"
    :pagination="false"
    rowKey="id"
    >
    <span slot="nse_symbol" slot-scope="nse_symbol" class="nse-symbol">
        <span>{{ nse_symbol || '-' }}</span>
    </span>
</a-table>
like image 463
shubh Avatar asked Sep 06 '25 06:09

shubh


1 Answers

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);}
 };
}
like image 94
Roman Avatar answered Sep 07 '25 20:09

Roman