I want to fill the table cells with tags. Like multi selector.. How can I make the table contents look like tags?
How to do it without using html elements??
Does anybidy konw when I clicked valueo in table cell How I render input btn?
Do you mean something like this:
<row>
<panel depends="$stayhidden$">
<html>
<style>
div[id="states"] tr[data-view$="ResultsTableRow"] td:nth-child(2)
{
display: flex !important;
}
div[id="states"] tr[data-view$="ResultsTableRow"] td:nth-child(2) .multivalue-subcell
{
padding-left: 4px;
padding-right: 4px;
margin-left: 4px;
margin-right: 4px;
border: 2px solid white !important;
border-radius: 8px !important;
color: white !important;
box-shadow:
inset 0 0 3px 0 rgba(0,0,0,.4),
inset 0 0 3px 5px rgba(0,0,0,.05),
inset 2px 3px 4px 0 rgba(255,255,255,.6),
2px 2px 4px 0 rgba(0,0,0,.25) !important;
}
div[id="states"] tr[data-view$="ResultsTableRow"] td:nth-child(2) .multivalue-subcell:hover
{
box-shadow:
inset 0 0 3px 0 rgba(0,0,0,.4),
inset 0 0 3px 5px rgba(0,0,0,.05),
inset 2px 3px 4px 0 rgba(255,255,255,.6),
0 12px 16px 0 rgba(0,0,0,0.24),
0 17px 50px 0 rgba(0,0,0,0.19) !important;
transform: translateY(-1px) !important;
}
div[id="states"] tr[data-view$="ResultsTableRow"] td:nth-child(2) .multivalue-subcell:active
{
box-shadow:
inset 0 0 3px 0 rgba(0,0,0,.4),
inset 0 0 3px 5px rgba(0,0,0,.05),
inset 2px 3px 4px 0 rgba(255,255,255,.6),
0 8px 16px 0 rgba(0,0,0,0.24),
0 13px 50px 0 rgba(0,0,0,0.19) !important;
transform: translateY(2px) !important;
}
div[id="states"] tr[data-view$="ResultsTableRow"] td:nth-child(2) .multivalue-subcell
{
background-color: yellow !important;
color: black !important;
}
div[id="states"] tr[data-view$="ResultsTableRow"] td:nth-child(2) .multivalue-subcell[data-mv-index="0"]
{
display: none !important;
}
</style>
</html>
</panel>
<panel>
<table id="states">
<title>States $state$</title>
<search>
<query>| makeresults count=10
| eval event=random() % 3
| eval state=mvindex(split("ACTIVE,SLEEP,DEAD",","),random() % 3)
| stats values(state) as state by event
| eval state=mvappend("extra",state)</query>
<earliest>-24h@h</earliest>
<latest>now</latest>
</search>
<option name="drilldown">row</option>
<drilldown>
<eval token="state">$click.value2$</eval>
</drilldown>
</table>
</panel>
</row>
Your subject is very broad - how would anyone know what this was specifically about especially given that it is already in a Dashboards & Visualizations section!
Having said that, you then restrict your required solution to not include HTML - as @gcusello says, with these restrictions, it isn't possible (with current standard visualization options).
However, if you would be prepared to expand your outlook you could do something along these lines:
<row>
<panel depends="$stayhidden$">
<html>
<style>
div[id="states"] tr[data-view$="ResultsTableRow"] td:nth-child(2)
{
display: flex !important;
}
div[id="states"] tr[data-view$="ResultsTableRow"] td:nth-child(2) .multivalue-subcell
{
border: 2px solid black !important;
padding-left: 4px;
padding-right: 4px;
margin-left: 4px;
margin-right: 4px;
border-radius: 8px !important;
}
</style>
</html>
</panel>
<panel>
<table id="states">
<title>States</title>
<search>
<query>| makeresults count=10
| eval event=random() % 3
| eval state=mvindex(split("ACTIVE,SLEEP,DEAD",","),random() % 3)
| stats values(state) as state by event</query>
<earliest>-24h@h</earliest>
<latest>now</latest>
</search>
<option name="drilldown">none</option>
<option name="refresh.display">progressbar</option>
</table>
</panel>
</row>
Note that this doesn't work if there is only one value in the multivalue field (however, with a bit of extra work, this can be gotten around by inserting an additional value to the field and then hiding this value.