Referring [col4] cell color as background color to [col12] cell

fbaligand / kibana-enhanced-table

Kibana visualization like a Data Table, but with enhanced features like computed columns, filter bar, and “Split Cols” bucket

Apache License 2.0

309 stars 64 forks source link

Referring [col4] cell color as background color to [col12] cell #133

Closed ganesh-s05 closed 4 years ago

ganesh-s05 commented 4 years ago

Hi, I am not sure if this will be a question/enhancement & I will leave that decision to you :)

I have a scenario wherein I have a Status defined with a color coding (achieved this by choosing color in the Index pattern based on condition) in one column say col4 & I have another column say col12 which has the date displayed. I would like to keep the col12 as such & have the background color referenced from col4. Is this possible? I tried to do the referencing by - {{value}} but it shows me error stating unable to reference columns. Could you please provide some insights?

fbaligand commented 4 years ago

Hi,

I think that this comment should answer your need: https://github.com/fbaligand/kibana-enhanced-table/issues/106#issuecomment-667250493

ganesh-s05 commented 4 years ago

Awesome.. thank you very much.. It worked like a charm.. You made my day!! I have attached the screenshot of the solution.. I have 2 questions though.

I now similarly have about 5-6 columns to which I need to perform this computed column. Is there a range/regexp something like that i can set to the formula or should i create those many Computed Columns?
Is it possible to change the font color as well? I tried adding {{value}} in addition to the background color in the Template. But, the column displayed same value two times, (which makes sense). Currently, the font color is black, is it possible to change it to white unanimously?

ganesh-s05 commented 4 years ago

@fbaligand Meanwhile, I tried the hard way of creating computed columns for each and every column and it looks something like below. It looks a bit clumpsy. All the computed columns are closely coupled. Are there any ways to make the column width extended? I went over the documentation but I couldn't find anything for column width or for bordering (like excel). Any ideas would be helpful.

fbaligand commented 4 years ago

Hi, So I guess you use “split cols” bucket in your last screenshot, right?

for font color, if you want white color for all your cells, then you can use “color” css property with fixed value, without any other computed column: <span style="color: white">{{value}}</span>
if you want no line return in your column, you can try style="white-space: nowrap" or else, you can use replace function in formula to replace space by unbreakable space: replace(colX, " ", " ")

fbaligand commented 4 years ago

Then you can’t define a border or change column width explicitly. But you can display alternative row color by activating option “striped rows”

ganesh-s05 commented 4 years ago

Hi, To your first question - I actually used "split rows". If i understand right - So if I tried using the font colors then i can't define the border/change column width ?

I can use the same "Template" thing to define the border & column width? Sorry if it's a silly question.

fbaligand commented 4 years ago

So:

First, there’s no relation between defining font colors and defining border/column width.
basically enhanced table displays a html table
with computed column template, you can define whatever html/css you want, but the html is inserted in table “td” tag. So you can’t customize “td” html/css, but only the html/css inside “td” tag.
That’s why I consider that you cannot define cell border or cell width.
That said, you can try to do something like a border in template, using “div” tag and css style. In the same way, you can try to customize width with div and css style.
but I can’t promise you the expected result.

ganesh-s05 commented 4 years ago

Thank you, @fbaligand for you time & inputs. The column width depends on the size of the text in the column header. The moment i give a larger title the column does expands. In addition for the table border, i implemented the below in one specific column. <span style="background-color: {{col21}}", table { border-collapse: collapse}">{{value}} </span>

I can still add a table { border: 3px solid } to make the borders more thick.. And the beauty is - It got applied for the entire Enhanced table. I thought it will get applied only to the specific column. Its a bonus :) This is how my table looks like now:

fbaligand commented 4 years ago

Thanks for the share! I'm very surprised that a css style defined on "span" tag that is inside the table impacts the whole table css! But it's a cool hack :)

fbaligand commented 4 years ago

Concerning width of the column, you can try to put this style: white-space: nowrap. It avoids to have line breaks in your cells.

ganesh-s05 commented 4 years ago

Thanks for the share! I'm very surprised that a css style defined on "span" tag that is inside the table impacts the whole table css! But it's a cool hack :)

Yep.. I'm surprised either :)

ganesh-s05 commented 4 years ago

Concerning width of the column, you can try to put this style: white-space: nowrap. It avoids to have line breaks in your cells.

Sure. I will try.. Thank you very much. I will go ahead and close this. Once again appreciate your help.

fbaligand commented 4 years ago

Nice to see that you solved your need!