Select event table #2822
Select event table #2822
Conversation
…elect and data attribute can-select
There was a problem hiding this comment.
You should have a look at https://tanstack.com/table/latest/docs/guide/row-selection#connect-row-selection-apis-to-ui to do it with TanStack.
| @@ -229,7 +238,7 @@ defineExpose({ | |||
| <tbody :class="ui.tbody({ class: [props.ui?.tbody] })"> | |||
| <template v-if="tableApi.getRowModel().rows?.length"> | |||
| <template v-for="row in tableApi.getRowModel().rows" :key="row.id"> | |||
| <tr :data-selected="row.getIsSelected()" :data-expanded="row.getIsExpanded()" :class="ui.tr({ class: [props.ui?.tr] })"> | |||
| <tr :data-selected="row.getIsSelected()" :data-can-select="!!props.onSelect" :data-expanded="row.getIsExpanded()" :class="ui.tr({ class: [props.ui?.tr] })" @click="handleRowSelect(row, $event)"> | |||
There was a problem hiding this comment.
nice! but out of curiosity, how would this work for accessibility / screenreaders as this behaves like a button?
There was a problem hiding this comment.
maybe the tanstack table docs also would be missing to address this (or my question is silly!)
There was a problem hiding this comment.
Maybe this could be solved if we add this attribute?
:role="props.onSelect ? 'button' : undefined"
There was a problem hiding this comment.
It might need tabIndex="0" too (and in that case, should it be white outline, or primary colour, or maybe hover effect that bg changes, maybe for simplity we stick to white outline, similar to anchor tags)
(and implement navigation using arrow keys I suppose)
🔗 Linked issue
❓ Type of change
📚 Description
In version 2 you could use an @select event which could be used to select the table manually or open some modal, I don't know if this can suddenly be achieved in another way with tanstack
📝 Checklist