How to fill in the whole cell via template?

[nnikushkin]

Hello everyone!

I think it is an easy question, but could not find an answer anywhere...

I have a column with values and I want to colorize the whole cell based on its value, e.g. if it equals to "22048" I want to make it green and red otherwise

I achieved it by following these steps:

1. Created a new "computed column" with this data:
   • Label: cust_1
   • Formula: col0 == 22048 ? "green" : "red"
   • Format: String
   • Custom column position: 1
2. Created a new "computed column" with this data:
   • Label: cust_2
   • Formula: col0
   • Format: Number
   • Pattern: 0
   • Custom column position: 2
   • Apply template: enabled
   • Apply template on total: disabled
   • Template:

     <div style="background-color: {{col1}}">{{value}}</div>
     

The cell is filled with the proper color, however, it does not fill the whole cell:

What I wish to achieve is when you use:

value == 22048 ? "background-color: green" : "background-color: red"

in "Cell computed CSS" section

Could someone point me to the error in my template?

Kibana version is 8.15.0

Thank you!

[fbaligand]

Well, “cell computed CSS” is done for that.
And given your screenshot, it seems to fulfill your need, right?

[fbaligand]

Formula is done to compute the cell “value”.
So use formula to define cell value, and cell computed css to define cell style.
Don’t hesitate to use both together.

[nnikushkin]

Hey @fbaligand,

Thank you for the fast response!

Indeed, I can use the “cell computed CSS” for this particular case as I showed in my initial reply

Most probably, I did not address my question well enough. My main point was "how to apply the style to the whole cell using the template" and my example above was just the easiest example to demonstrate the question better

I assume that in the future I will face the same problem that I would not be able to resolve with the “cell computed CSS” field. To avoid this it would be awesome to know how I can apply the style to the whole cell using the "template" field

For example, I found your post where you showed how to add icons to the fields:

https://discuss.elastic.co/t/enhanced-table/240817/2

It works amazing, however, the icons do not fill the whole cell and are aligned at the the top-left corner by default

So, I would like to understand, for example, how I can make it fill the whole cell and be aligned both vertically and horizonttally

Thank you!

[fbaligand]

Hi,
Well, cell computed css has been added especially for that: define background color for whole cell.
There is a padding around cell value that is rendered with template. That's why to my known, you can't define whole cell background color in template.
That said, you can try to set padding to 0 in cell computed css. But no warranty.

[nnikushkin]

I see, @fbaligand!

Thank you for the help!

[fbaligand]

And you can clearly use both template and cell computer css together!