feat(Table): conditionally apply classes to tr and td

[andr35]

🔗 Linked issue

Resolves #3865

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 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.

This PR introduces the ability to:

• Pass a function to the meta.class.td property of the columns prop to conditionally apply classes based on the cell's value.
• Set the TanStack TableMeta property via props, and pass a function to the class.tr property of table's meta to conditionally apply classes based on the row's data.

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[pkg-pr-new]

npm i https://pkg.pr.new/@nuxt/ui@3866

commit: f65b305

[benjamincanac]

Why not handle function on th as well? 🤔

[andr35]

My use case involves highlighting a specific cell or row, for example, when a certain value in the row exceeds a threshold (e.g., "highlight the row in red if x > 10").
I don’t see a reason to modify the header cell, as it isn’t directly tied to any data.

That said, thinking about it now, there could be scenarios where it might be useful modifying the th. For instance, "highlight the header with a color gradient based on the average of the column values?"

[benjamincanac]

Yeah I think the th should handle a function like td.

[andr35]

I updated also th.

[benjamincanac]

Thanks @andr35! 😊