Feature suggestion: Add a "css" property in fields: about reactive-table HOT 4 CLOSED

Looks like the html in your code got stripped by the markdown parser - I assume you added the additional class to the td element?

I think people might find this confusing - if I saw the css option, I would expect it to be a string, not a function. If we're going to add this, it probably ought to accept strings, functions, and maybe even arrays. It wouldn't be that hard to add the code, but it would make the documentation more complicated, and I'm not sure it adds much over just using fn to return html with the class you want.

from reactive-table.

Yes, my code is just part of the example, trying to help you understand what I meant.
Maybe we can call it css-helper, or css-fn etc. It doesn't have to be what I said. What I meant was I hope there is a solution to add css logic. Currently the fn only works for the cell content.

You said "just using fn to return html", I am not sure if I understood. The fn returns the string inside , how could I use it in the class attribute? If it can, my problem solved.

from reactive-table.

If it's okay to add the class to an element inside the cell, not the cell itself, you can do something like this:

{ key: 'score', label: 'Score', fn: function (score) { 
        var cssClass = "class2";
        if (score < 10) {
            cssClass = "class1";
        }
        return new Handlebars.SafeString("<div class='" + cssClass + "'>" + score + "</div>");
}}

Is there any particular reason you need the class on the td element?

If you want the new element to fill the cell, e.g. to set a background-color, you could override bootstrap's padding like this:

.table > tbody > tr > td {
    padding: 0;
}

and then add your own padding inside the new element.

from reactive-table.

It is OK. thanks

from reactive-table.