[Feature Request] Apply certain css classes or styles to a table row based on certain conditions

[ziming]

trafficstars

Feature Request

What's the feature you think Backpack should have?

Allowing some table rows to have some extra css classes or custom styles applied to it if it matches some condition

For example, if it is a purchase from a top customer, we can apply the css class 'border-orange' or the css style 'border: red;" to the tr tag to "highlight it so their purchase record can be given more attention.

Have you already implemented a prototype solution, for your own project?

Not in backpack, but in other self built tables to highlight a hot deal for example.

Do you see this as a core feature or an add-on?

core

[pxpm]

Hey @ziming thanks for the suggestion.

I also think that it's a nice feature to have.

We just need to think in a away to implement it, do you have any suggestions in that regard ?

Something like public function rowComposer($entry) { if ($entry->x) { return 'y' }, or as a crud operation setting $this->crud->setOperationSetting('rowComposer', function($entry) { .... })

I will be moving this to the ideas repo in the meanwhile.

Cheers

[ziming]

I don't think rowComposer is a good method name since I would like to know that method is for applying extra css classes or apply extra css styles

I'm thinking of something like

the css classes version

function applyExtraRowClasses(Model $entry) : ?string
{
    if ($entry->type === 'premium') {
        return 'border-orange';
    }
}

the css styles version

function applyExtraRowStyles(Model $entry): ?string
{
    if ($entry->type === 'premium') {
        return 'border: orange; padding: 5px;';
    }
}

As for should it be extra methods or crud operation setting, i have no preference.

[pxpm]

Also this should allow you to also add any arbitrary attribute per row like my-custom-attribute="something". 👍