@header-click
The @header-click event is triggered whenever a user clicks on a <th> inside of a <Table /> or <MiniTable />'s <thead>. It is triggered alongside the table's sorting behaviour. It provides its column's key 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('...', { ... })
]
function handleHeaderClick(key: string) {
// ...
}
</script>
<template>
<Table
:data="data"
:columns="columns"
:config="config"
:classes="classes"
init-key="..."
@header-click="handleHeaderClick"
/>
</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
28
29
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
28
29