Click row

This is a new feature since version 1.2.4

click-row event emits when a table row is clicked. The argument of the event includes the item data that was clicked. If you are using multiple-selecting and show-index feature, isSelected and indexInCurrentPage will be also included.

Type declaration of event argument

type ClickRowArgument = Item & {
  isSelected?: boolean,
  indexInCurrentPage?: number,
}

Example

<template>
  <EasyDataTable
    v-model:items-selected="itemsSelected"
    show-index
    :headers="headers"
    :items="items"
    @click-row="showRow"
  />

  row clicked:<br />
  <div id="row-clicked"></div>
</template>

<script setup lang="ts">
import type { Header, Item, ClickRowArgument } from "vue3-easy-data-table";

// omit

const showRow = (item: ClickRowArgument) => {
  document.getElementById('row-clicked').innerHTML = JSON.stringify(item);
};

// omit
</script>

	#	PLAYER	TEAM	NUMBER	POSITION	HEIGHT	WEIGHT (lbs)	LAST ATTENDED	COUNTRY
	1	Stephen Curry	GSW	30	G	6-2	185	Davidson	USA
	2	Lebron James	LAL	6	F	6-9	250	St. Vincent-St. Mary HS (OH)	USA
	3	Kevin Durant	BKN	7	F	6-10	240	Texas-Austin	USA
	4	Giannis Antetokounmpo	MIL	34	F	6-11	242	Filathlitikos	Greece

rows per page:

25

• 25
• 50
• 100

1–4 of 4

row clicked: