@row-click
The @row-click event is triggered whenever a user clicks on a <tr> inside of a <Table /> or <MiniTable />'s <tbody>. It provides the data associated with that row as the first argument.
Example
TIP
The example below uses the $event keyword, provided by Vue. You can learn more about it here.
vue
<script setup lang="ts">
import { Table, createClasses, createColumn, createConfig } from '@screaming/tables'
import data from '~/assets/data.json'
const classes = createClasses({ ... })
const config = createConfig({ ... })
const columns = [
createColumn('...', { ... }),
createColumn('...', { ... }),
createColumn('...', { ... })
]
const selectedRow = ref(null)
</script>
<template>
<Table
:data="data"
:columns="columns"
:config="config"
:classes="classes"
init-key="..."
@row-click="selectedRow = $event"
/>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27