Hi team,
I need your help with my doubts about mouse cursor over table:
I am currently working with drilldown on table, I enabled the drilldown option mode cell. I just need to use drilldown in one cell, but splunk enabled drilldown for all cells, I used this tag <condition field="field"></condition>
to disable drilldown search link in some cells. However, I need to hide the mouse cursor and disable the blue color link over these cells.
In the example, I just need to see the mouse cursor and the blue color link over the value of the column Slot.
Does someone know how can I do that?
Regards
@evinasco, you can do this through CSS Override. I have answered similar question in past but am unable to find it now. So try something like the following, where table in your dashboard has id tableWithDrilldown
i.e. <table id="tableWithDrilldown">
.
This is depended on the column number where CSS override needs to be applied. In the following example it is the first column. So the selector is td:nth-child(1)
. You can change position from 1 to something else if required.
<row depends="$alwaysHideCSSPanel$">
<panel>
<html>
<style>
#tableWithDrilldown table tbody tr td:nth-child(1){
cursor: default !important;
color: black !important;
}
</style>
</html>
</panel>
</row>
Following is a run anywhere Dashboard Example. Please try out and confirm:
<dashboard>
<label>Table Column Hide Cursor Pointer</label>
<row depends="$alwaysHideCSSPanel$">
<panel>
<html>
<style>
#tableWithDrilldown table tbody tr td:nth-child(1){
cursor: default !important;
color: black !important;
}
</style>
</html>
</panel>
</row>
<row>
<panel>
<table id="tableWithDrilldown">
<search>
<query>index=_internal sourcetype=splunkd log_level!="INFO"
| timechart count span=1d
| eval Time=strftime(_time,"%Y/%m/%d")
| table Time count</query>
<earliest>-7d@d</earliest>
<latest>now</latest>
<sampleRatio>1</sampleRatio>
</search>
<option name="count">20</option>
<option name="dataOverlayMode">none</option>
<option name="drilldown">cell</option>
<option name="percentagesRow">false</option>
<option name="rowNumbers">false</option>
<option name="totalsRow">false</option>
<option name="wrap">true</option>
<drilldown>
<condition field="count">
<set token="tokClickedValue">$click.value2$</set>
<set token="tokClickedName">$click.name2$</set>
</condition>
<condition>
<!-- No Action if Time Column is clicked-->
</condition>
</drilldown>
</table>
</panel>
</row>
</dashboard>
@evinasco, you can do this through CSS Override. I have answered similar question in past but am unable to find it now. So try something like the following, where table in your dashboard has id tableWithDrilldown
i.e. <table id="tableWithDrilldown">
.
This is depended on the column number where CSS override needs to be applied. In the following example it is the first column. So the selector is td:nth-child(1)
. You can change position from 1 to something else if required.
<row depends="$alwaysHideCSSPanel$">
<panel>
<html>
<style>
#tableWithDrilldown table tbody tr td:nth-child(1){
cursor: default !important;
color: black !important;
}
</style>
</html>
</panel>
</row>
Following is a run anywhere Dashboard Example. Please try out and confirm:
<dashboard>
<label>Table Column Hide Cursor Pointer</label>
<row depends="$alwaysHideCSSPanel$">
<panel>
<html>
<style>
#tableWithDrilldown table tbody tr td:nth-child(1){
cursor: default !important;
color: black !important;
}
</style>
</html>
</panel>
</row>
<row>
<panel>
<table id="tableWithDrilldown">
<search>
<query>index=_internal sourcetype=splunkd log_level!="INFO"
| timechart count span=1d
| eval Time=strftime(_time,"%Y/%m/%d")
| table Time count</query>
<earliest>-7d@d</earliest>
<latest>now</latest>
<sampleRatio>1</sampleRatio>
</search>
<option name="count">20</option>
<option name="dataOverlayMode">none</option>
<option name="drilldown">cell</option>
<option name="percentagesRow">false</option>
<option name="rowNumbers">false</option>
<option name="totalsRow">false</option>
<option name="wrap">true</option>
<drilldown>
<condition field="count">
<set token="tokClickedValue">$click.value2$</set>
<set token="tokClickedName">$click.name2$</set>
</condition>
<condition>
<!-- No Action if Time Column is clicked-->
</condition>
</drilldown>
</table>
</panel>
</row>
</dashboard>
hi niketnilay,
you are the best, that was an excellent answers for my doubt, i have the last question about it, how can i apply that style when i have several table with differents number of columns
Regards,
@evinasco, you have following two options to make CSS Selectors more generic:
Option 1 ) Take out ID part of CSS Selector #tableWithDrilldown
, to make the same setting apply to all tables in the dashboard.
Option 2) If you have a dashboard with set of tables for which this change should be applied and a set of table for which it should not be applied, you can have table IDs which are similar with separate number suffixed (you can actually have prefx as well) i.e. #tableWithDrilldown1, #tableWithDrilldown2 ##tableWithDrilldown3 etc and then in your selected use a pattern for ID starting with #tableWithDrilldown
i.e. div[id^="tableWithDrilldown"]
div[id^="tableWithDrilldown"] table tbody tr td:nth-child(1){
....
....
}
For understanding CSS Selectors you should refer to the following link: https://www.w3schools.com/cssref/css_selectors.asp
@ niketnilay that worked really good, thanks newly for your help