Nuxt•7mo ago

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•7mo 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•7mo ago

It's well hidden in the docs: https://ui.nuxt.com/components/table#:~:text=You%20can%20apply,to%20rows.

Nuxt UI

Table - Nuxt UI

Display data in a table.

Gaming

Programming

Hover state only for table body rows