N
Nuxt2mo ago
Angh0r

Hover state only for table body rows

Hi. I know that rows are highlighted in selectable mode. But in my case I just want highlight rows on hover to help users scan trough data. I know I can add "hover:bg-somecolor-50" to ui: { tr: { base { } } } but it also affects table header. Is there a way to target only rows in table body?
2 Replies
Flo
Flo2mo ago
yes. Add a class-property to the row elements
return props.storeRef.map((item) => {
return {
...item,
class: "hover:bg-somecolor-50"
}
}
return props.storeRef.map((item) => {
return {
...item,
class: "hover:bg-somecolor-50"
}
}
Flo
Flo2mo ago
Nuxt UI
Table - Nuxt UI
Display data in a table.