Add Colors to Table Cells

KCH Workflows
1

This workflow snippet shows a possible way to append colors to individual cells depending on the value. We configure the Rule Engine node to determine the colors of the cells depending on the certain condition. The colors could be defined as a string or as a hexadecimal code (see Links for an example). Then we use the string manipulation node to append the colors to individual cells. To explore the result table interactively, right-click on the node "Table View" and select "Interactive View: Table View" in the dropdown.

This is a companion discussion topic for the original entry at https://kni.me/w/Q-E_6XmNXVqQ_WgV
2

Hi all, how can I change the workflow to fill a whole table row with a certain color? Or is this possible by a simple line in the CSS Editor?
I am trying the following code at the moment:

.knime-table-row(2) {
background-color: green;
}

To change the color of the second row to green. Any ideas?

4

@rummelbe129,

You should use :

.dataTables_scrollHead {
background:blue;
color:white;
}

.knime-table-header .knime-table-cell {
color :white;
fill:white;
}

To check that, you can inspect the code with the “inspector” (Google Chrome/Chromium based I think) by right-clicking the JavaScript “Interactive view” :

image
image1139Ă—584 46.2 KB

Br,
Samir

5

Thank you Samir! Do you also know how I can refer to a certain row? For example only choose the 3rd row and change its color?
Best wishes, Ben

1 Like
6

Hello @rummelbe129,

To do that, you can use this piece of code :

table.dataTable tr.odd {
background-color: green;
}
table.dataTable tr.even {
background-color: red;
}

table.dataTable tr:nth-of-type(3) {
background-color: blue;
}

As you can see below, the odd lines of my table are green, the even lines are red, and the third is blue, right ? (and the last is in selection mode, so blue-ish) :
image
(awful table design, right? :grinning: )

You have some explanation here : CSS :nth-child() Selector (w3schools.com)

Br,
Samir

3 Likes
7

Hello Guys,
I am just here to help you with some of my knowledge.
I was stuck at a problem that is “How to color the multiple cell value in given data set/ Excel File?”
I worked on it and i found the solution of this problem.
Also i attached my work file with it.
I hope it will be help full for you guys.
Coloured_Column_Second.knwf (31.7 KB)

2 Likes
8

Hi @mythxAHIR , you’ll have to export this workflow in an executed state in order for others to be able to access the content.

9

My work flow is example of how to color multiple cell value in same excel file.

10

Colour_Example_MulCol.xlsx (8.1 KB)

use this type of excel file in order to see the output.

11

Hello,
How can I add a color for the entire row in the same way?

Thank you

12

Hello @SamirAbida ,
Do you have any idea if I want to highlight the row based on a value (for example: “low, normal, high”)?

Thank you!

13

@Suad_Alshammari,

actually, no, it is not possible in just CSS.
But, you could give a CSS class to your value and add a CSS rule to color up your classes.

Like this :

  • I created my classes in my CSS, => I choosed the background color in function of my class (ie. low, med or high),
  • I added up my class with a basic string manipulation and a join to add html to my value,
  • hmmm…thats it !

image
image879Ă—606 28.1 KB

add_color_to_cell_css.knwf (10.7 KB)

Br,
Samir

2 Likes