mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-22 07:50:36 +01:00
feat(Table): add select event (#2822)
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
committed by
GitHub
parent
99bdbdeec1
commit
0668a399dc
@@ -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).
|
||||
|
||||
Reference in New Issue
Block a user