Skip to content

Table: conditionally apply classes to tr and td elements #3865

Open
@andr35

Description

@andr35

Description

Description

In Nuxt UI v3, there is currently no way to apply custom styles or classes to individual table rows or cells. Additionally, it is not possible to dynamically set classes based on specific criteria, for example, the value of data displayed in a given cell.

In contrast, this feature was available in Nuxt UI v2, as documented in the official documentation. In that version, custom classes could be applied by simply adding a class property to a specific row's data:

const items = [{
  id: 1,
  name: 'Apple',
  quantity: { value: 100, class: 'bg-green-500/50 dark:bg-green-400/50' }
}, {
  id: 2,
  name: 'Orange',
  quantity: { value: 0 },
  // Class property
  class: 'bg-red-500/50 dark:bg-red-400/50 animate-pulse'
}]

Additional context

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions