dynamic classes to row

[gustawdaniel]

Description

I need to set the class for rows in dependence on the row value.

In Vuetify there is item-class that gets the function

    row_classes(item) {
        if (item.calories < 200) {
          return "orange"; //can also return multiple classes e.g ["orange","disabled"]
        } 
    }

https://stackoverflow.com/questions/50136503/styling-individual-rows-in-a-vuetify-data-table

but in nuxt-ui I can't find an option to set individual tr classes. There is a ui option, but it puts these classes globally.

potentially connected issue with described table refactor #390
our table docs https://ui.nuxt.com/data/table

it could be added potinailally as function in rows.row-class property that have arg {row, index } and returns string or classList array (DOMTokenList) with classes that overrides row class, potentially we can add previous default classList to argument of this function to make possible adding toggling or removing classes from DOMTokenList.

Our code in tr:

:class="[ui.tr.base, isSelected(row) && ui.tr.selected, $attrs.onSelect && ui.tr.active]"

but in my use case there are classes independent from being active or not.

My current dirty hack

function grayBgOfFutureInvoices() {
    const rows = document.querySelectorAll('table tbody tr');

    rows.forEach(row => {
        const dateElement = row.querySelector('.issue-date');
        if(dateElement) {
            const isFuture = dayjs(dateElement.textContent).diff(dayjs(dayjs().format('YYYY-MM-DD'))) > 0;
            if(isFuture) {
                row.classList.add('bg-violet-200')
            }
        }
    })
}

onMounted(grayBgOfFutureInvoices)

[Haythamasalama]

I guess you need something similar to this.

[gustawdaniel]

Yes, I saw that there was a lacking also slot after tbody, I would like to be able to add a fully customizable tfoot.

[Haythamasalama]

Currently, it needs enhancement to allow for the addition of custom styles for individual tr and td elements.