How to make rows of table clickable in VueJS?

Question

I am using the CoreUI admin theme for VueJs.

I am trying to make a table via CoreUI. Now I have to make the rows of the table Clickable.

Any idea as to how I can do that?

Here is there documentation on Tables: https://coreui.io/vue/docs/components/table.html#cdatatable-api In there CDataTable API under events , they have row-clicked events. I just don't know how to use it.

Any sorts of help will be appreciated.

Ashwin Bande · Accepted Answer · 2021-01-11 09:22:14Z

3

add event listner like this please focus on @row-clicked="rowClickHandler" and method rowClickHandler in methods

    <template>
      <CCardBody>
        <CDataTable
          :items="items"
          :fields="fields"
          @row-clicked="rowClickHandler"  // <== focus here
        >
          ... Rest of the code
        </CDataTable>
      </CCardBody>
    </template>
    <script>

export default {
  name: 'AdvancedTables',
  data () {
    return {
      items: [],
      fields: [],
    }
  },
  methods: {
    rowClickHandler ((item, index, column name, event) {
    // whatever you want to do
    },
   ... other methods
  }
}
</script>

answered Jan 11, 2021 at 9:22

Ashwin Bande

3,1232 gold badges13 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to make rows of table clickable in VueJS?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related