feat(Table): add select event (#2822)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Christian López C
2025-02-28 06:05:48 -05:00
committed by GitHub
parent 99bdbdeec1
commit 0668a399dc
6 changed files with 470 additions and 294 deletions

View File

@@ -264,7 +264,7 @@ collapse: true
name: 'table-row-selection-example'
highlights:
- 55
- 70
- 72
class: '!p-0'
---
::
@@ -273,6 +273,26 @@ class: '!p-0'
You can use the `row-selection` prop to control the selection state of the rows (can be binded with `v-model`).
::
### With `@select` event
You can add a `@select` listener to make rows clickable. The handler function receives the `TableRow` instance as the first argument and an optional `Event` as the second argument.
::note
You can use this to navigate to a page, open a modal or even to select the row manually.
::
::component-example
---
prettier: true
collapse: true
name: 'table-row-selection-event-example'
highlights:
- 123
- 130
class: '!p-0'
---
::
### With column sorting
You can update a column `header` to render a [Button](/components/button) component inside the `header` to toggle the sorting state using the TanStack Table [Sorting APIs](https://tanstack.com/table/latest/docs/api/features/sorting).