Table headers not visible

[rishabhpatel20]

I am creating a query and when I see the result I see proper table with headers , but saving it to existing dashboard , it is just displaying the content without headers. I tried to expand the table size as well. 

index=abc source=port | rename port.port as Port | stats sum(port.code.557) as Tcount by Port | sort -Tcount | head 10 | table Port Tcount

Search result 

 

Below image is from dashboard pannel , no headings 

[tej57]

Hey @rishabhpatel20,

I believe it is the html and css styling that's blocking your headers. If there's no particular need to add CSS, I would suggest you to remove it since you'll be able to add all those 4 panels in the same row by just drag and drop using the double ellipses line at the top of your panel.

Thanks,
Tejas.

[ITWhisperer]

Please share the source for your dashboard panel

[livehybrid]

Hi @rishabhpatel20 

Can you confirm that no other CSS or JS is loaded in the dashboard? Either in the first couple of lines or within other html blocks in the dashboard? I notice you have uploaded just a section of the dashboard.

🌟 Did this answer help you? If so, please consider:

• Adding karma to show it was useful
• Marking it as the solution if it resolved your issue
• Commenting if you need any clarification

Your feedback encourages the volunteers in this community to continue contributing

[rishabhpatel20]

Here is complete code 

<form version="1.1" theme="light">
<label>ds_dash_performance Clone</label>
<search id="base_kpi">
<query>index=abc sourcetype=abc
| table host app,cpu_idle_pct_kpi,cpu_io_wait_pct_kpi,cpu_user_pct_kpi,ds_procs_kpi,free_disk_ds_vtmp_kpi,free_disk_tmp_ds_kpi,free_disk_var_kpi,free_disk_var_tmp_kpi,kernel_rel_kpi,load1m_kpi,load_avg_kpi,mem_free_mb_kpi,mem_free_pct_kpi,reboot_server_kpi,redhat_rel_kpi,region,rx_bps_kpi,sec_env,swap_free_mb_kpi,swap_free_pct_kpi,tx_bps_kpi
virtualization_kpi | dedup host</query>
<earliest>$time_token.earliest$</earliest>
<latest>$time_token.latest$</latest>
</search>
<fieldset submitButton="false"></fieldset>
<row>
<panel id="Inputs">
<title>ds_dash_Hostinfo</title>
<input type="dropdown" token="metric_tok" searchWhenChanged="true" id="metric_tok">
<label>Top 10 Host Metric Picker</label>
<search>
<query/>
<earliest>-24h@h</earliest>
<latest>now</latest>
</search>
<choice value="host.btime">Boot Time</choice>
<choice value="host.cpu.idle">CPU Idle %</choice>
<choice value="host.cpu.user">CPU User %</choice>
<choice value="host.load_1m">Load Avg (1min)</choice>
<choice value="host.mem.free_gb">Mem Free (GB)</choice>
<choice value="host.proc.httpsd">DS Httpd Proc Count</choice>
<choice value="host.proc.postgres">DS Postgress Proc Count</choice>
<choice value="host.proc.pcsd">PCSd Process Cnt</choice>
<choice value="host.swap.used_gb">Swap Used (GB)</choice>
<choice value="host.swap.free_gb">Swap Free (GB)</choice>
<choice value="host.net.tx_kbs">Net TX (KB/s)</choice>
<choice value="host.net.rx_kbs">Net RX (KB/s)</choice>
<choice value="host.mem.used_gb">Mem Used (GB)</choice>
<choice value="host.disk.dsvtmp.free_gb">/ds/vtmp Free (GB)</choice>
<choice value="host.disk.dsvtmp.used_gb">/ds/vtmp Used (GB)</choice>
<choice value="host.disk.tmp.free_gb">/tmp Free (GB)</choice>
<choice value="host.disk.tmp.used_gb">/tmp Used (GB)</choice>
<choice value="host.disk.vartmp.free_gb">/var/tmp Free (GB)</choice>
<choice value="host.disk.vartmp.used_gb">/var/tmp Used (GB)</choice>
<choice value="host.mem.sssd_be_pages">sssd_be (pages)</choice>
<default>host.cpu.user</default>
</input>
<input type="dropdown" token="host_tok" id="host_tok">
<label>Host Picker</label>
<fieldForLabel>ShortName</fieldForLabel>
<fieldForValue>host</fieldForValue>
<search>
<query>index=abc source=host | dedup host | rex field=host "(?&lt;ShortName&gt;[^\.]+)" | eval ShortName=ShortName . " (".'host.info.app'.")" | table ShortName host | sort host</query>
<earliest>-24h@h</earliest>
<latest>now</latest>
</search>
</input>
<input type="time" searchWhenChanged="true" token="global_time_tok">
<label>Time Range</label>
<default>
<earliest>-24h</earliest>
<latest>now</latest>
</default>
</input>
<html>
<style>
table tbody tr td { font-size: 75% !important; padding: 0px 3px !important;}
.dashboard-panel .panel-head h3 {
padding: 1px 1px 1px 1px !important;
font-size: 10px !important;
}
thead {
visibility: hidden;
display: none; /* Optional, but can be more effective */
}
#Inputs { height: 320px !important; width: 20% !important }

#host_tok { width: 100%; }
#host_tok [data-component] { width: auto !important; }

#metric_tok { width: 100%; }
#metric_tok [data-component] { width: auto !important; }

</style>
</html>
</panel>
<panel id="HostMetric">
<html>
<style>
table tbody tr td { font-size: 75% !important; padding: 0px 3px !important;}
.dashboard-panel .panel-head h3 {
padding: 1px 1px 1px 1px !important;
font-size: 10px !important;
}
#HostMetric { height: 320px !important; width: 65% !important }
</style>
</html>
<chart>
<title>$metric_tok$</title>
<search>
<query>| mstats avg($metric_tok|s$) prestats=true WHERE "index"="abc_metrics" AND "host"=$host_tok|s$ span=30m
| timechart avg($metric_tok|s$) AS Avg
| fields - _span*</query>
<earliest>$global_time_tok.earliest$</earliest>
<latest>$global_time_tok.latest$</latest>
</search>
<option name="charting.drilldown">none</option>
<option name="charting.chart">line</option>
<option name="charting.chart.nullValueMode">connect</option>
<option name="charting.chart.showDataLabels">none</option>
<option name="charting.fieldColors">{"Avg":"#1e93c6"}</option>
<option name="charting.gridLinesX.showMajorLines">true</option>
<option name="charting.axisY.abbreviation">auto</option>
<option name="charting.legend.mode">seriesCompare</option>
<option name="charting.fieldDashStyles">{"Avg":"solid"}</option>
<option name="displayview">analytics_workspace</option>
</chart>
</panel>
<panel id="Hostinfo">
<html>
<style>

table tbody tr td { font-size: 50% !important; padding: 0px 0px !important;}
.dashboard-panel .panel-head h3 {
padding: 0px 0px 0px 0px !important;
font-size: 7px !important;
}
#Hostinfo { height: 300px !important; width: 15% !important }
</style>
</html>
<table>
<title>Info for $host_tok$</title>
<search>
<query>index=abc source=host | search host=$host_tok|s$ | rename host.cpu.count as NumCPUs, host.mem.size_gb as MemGB, host.swap.size_gb as SwapGB, host.disk.tmp.size_gb as TmpGB, host.disk.vartmp.size_gb as VarTmpGB, host.disk.dsvtmp.size_gb as DSVtmpGB, host.info.app as App, host.info.boottime as BootTime, host.info.ip as IP4, host.info.rhel as RHEL, host.info.kernel as Kernel, host.info.virt as Virtualization, host.info.type as HostType, region as Region, sec_env as SecEnv, siteid as SiteID | table NumCPUs MemGB SwapGB TmpGB VarTmpGB DSVtmpGB App BootTime IP4 RHEL Kernel Virtualization HostType Region SecEnv SiteID
| transpose | rename column as Key,"row 1" as Value | table Key Value</query>
<earliest>-24h</earliest>
<latest>now</latest>
</search>
<option name="drilldown">none</option>
<option name="count">18</option>
</table>
</panel>
</row>
<row>
<panel id="Picker">
<html>
<style>
table tbody tr td { font-size: 75% !important; padding: 0px 3px !important;}
.dashboard-panel .panel-head h3 {
padding: 1px 1px 1px 1px !important;
font-size: 10px !important;
}
#Picker{ height: 300px !important; width: 15% !important }
</style>
</html>
<table>
<title>Top 10 Metric by $metric_tok$</title>
<search>
<query>| mstats avg("host.cpu.user") as cpu_user
  WHERE index="abc_metrics" source=host host.info.app="ds" span=10m BY host
| dedup host
| eval cpu_user=round(cpu_user,1)
| rex field=host "(?&lt;host_short&gt;[^\.]+)"
| sort -cpu_user
| head 10
| rename host_short as "Host", cpu_user as "CPU Usage (%)"
| table "Host" "CPU Usage (%)"</query>
<earliest>-1h</earliest>
<latest>now</latest>
</search>
<option name="drilldown">none</option>
<option name="refresh.display">progressbar</option>
<option name="rowNumbers">false</option>
<format type="color" field="Value">
<colorPalette type="expression">case(value &gt;=80,"#ffab91", value &lt;80 AND value &gt;=50,"#fff59d", value &lt;50 AND value &gt;=20, "#c5e1a5", value &lt;20 AND value &gt;=0,"#81d4fa")</colorPalette>
</format>
</table>
</panel>
<panel id="PortTcount">
<html>
<style>
#PortTcount{ height: 250px !important; width: 10% !important }
table tbody tr th td { font-size: 75% !important; padding: 0px 1px !important;}
.dashboard-panel .panel-head h3 {
padding: 1px 1px 1px 1px !important;
font-size: 10px !important;
}
i.icon-sorts {
display: none;
}
</style>
</html>
<table>
<title>Hot Ports (Trans/hour)</title>
<search>
<query>index=abc source=port | rename port.port as Port | stats sum(port.code.200) as Tcount by Port | table Port Tcount | sort -Tcount | head 10</query>
<earliest>-1h</earliest>
<latest>now</latest>
</search>
<option name="drilldown">none</option>
<option name="refresh.display">progressbar</option>
</table>
</panel>
<panel id="PortADTcount">
<html>
<style>
#PortTcount{ height: 250px !important; width: 10% !important }
table tbody tr th td { font-size: 75% !important; padding: 0px 1px !important;}
.dashboard-panel .panel-head h3 {
padding: 1px 1px 1px 1px !important;
font-size: 10px !important;
}
i.icon-sorts {
display: none;
}
</style>
</html>
<table>
<title>Hot Ports (ADTrans/hour)</title>
<search>
<query>index=abc source=port | rename port.port as Port | stats sum(port.code.557) as Tcount by Port | table Port Tcount | sort -Tcount | head 10</query>
<earliest>-1h</earliest>
<latest>now</latest>
</search>
<option name="drilldown">none</option>
</table>
</panel>
<panel id="PortGbytes">
<html>
<style>
table tbody tr th td { font-size: 75% !important; padding: 0px 1px !important;}
.dashboard-panel .panel-head h3 {
padding: 1px 1px 1px 1px !important;
font-size: 10px !important;
}
#PortGbytes{ height: 250px !important; width: 10% !important }
</style>
</html>
<table>
<title>Hot Ports (GB/hour)</title>
<search>
<query>index=abc source=port | rename port.port as Port | stats sum(port.xfer_bytes) as Xbytes by Port | eval Gbytes=round(Xbytes/(1024*1024*1024),2) | table Port Gbytes | sort -Gbytes | head 10</query>
<earliest>-1h</earliest>
<latest>now</latest>
</search>
<option name="drilldown">none</option>
</table>
</panel>
<panel id="PortPeakClients">
<html>
<style>
#PortPeakClients{ height: 250px !important; width: 10% !important }
table tbody tr th td { font-size: 75% !important; padding: 0px 1px !important;}
.dashboard-panel .panel-head h3 {
padding: 1px 1px 1px 1px !important;
font-size: 10px !important;
}
</style>
</html>
<table>
<title>Hot Ports (Peak Clients)</title>
<search>
<query>index=abc source=port | rename port.port as Port | stats max(port.numclients) as PeakClients by Port | table Port PeakClients | sort -PeakClients | head 10</query>
<earliest>-1h</earliest>
<latest>now</latest>
</search>
<option name="drilldown">none</option>
</table>
</panel>
</row>
<row>
<panel id="AlertInputs">
<title>ds_dash_Portinfo</title>
<input type="dropdown" token="class_tok" searchWhenChanged="true" id="class_tok">
<label>Class</label>
<choice value="*">All</choice>
<choice value="Port">Port</choice>
<choice value="host">Host</choice>
<choice value="*disk">Disk</choice>
<choice value="general">General</choice>
<default>Port</default>
<initialValue>Port</initialValue>
</input>
<input type="dropdown" token="siteid_tok" searchWhenChanged="true" id="siteid_tok">
<label>SiteID</label>
<choice value="*">All</choice>
<default>*</default>
<initialValue>*</initialValue>
<fieldForLabel>siteid</fieldForLabel>
<fieldForValue>siteid</fieldForValue>
<search>
<query>index=abc source=alert | dedup siteid | table siteid</query>
<earliest>-24h@h</earliest>
<latest>now</latest>
</search>
</input>
<input type="dropdown" token="priority_tok" searchWhenChanged="true">
<label>Priority</label>
<choice value="1">1</choice>
<choice value="2">2</choice>
<choice value="3">3</choice>
<choice value="4">4</choice>
<choice value="5">5</choice>
<default>5</default>
<initialValue>5</initialValue>
</input>
<html depends="$hiddenForCSS$">
<style>
#AlertInputs { width: 15% !important; }
#siteid_tok option { font-size: 9px !important; line-height: 12px !important; padding: 0px 1px !important;}
</style>
</html>
</panel>
<panel id="AlertOutputs">
<html>
<style>
#AlertOutputs{ width: 85% !important; }
table tbody tr td { font-size: 75% !important; padding: 0px 3px !important; text-align: left !important;}

</style>
</html>
<table>
<search>
<query>index=abc source=alert alert.class=$class_tok|s$ siteid=$siteid_tok|s$ alert.priority &lt;= $priority_tok|s$| stats count(_time) as Count Latest(_time) as When min(alert.priority) as Priority latest(alert.message) as Message by siteid alert.class alert.item | sort by When desc| eval HoursAgo=(now()-When)/3600, HoursAgo=round(HoursAgo,3), When=strftime(When,"%+") | table HoursAgo When siteid Count Priority alert.class alert.item Message</query>
<earliest>-84h@h</earliest>
<latest>now</latest>
<sampleRatio>1</sampleRatio>
</search>
<option name="count">100</option>
<option name="dataOverlayMode">none</option>
<option name="drilldown">none</option>
<option name="percentagesRow">false</option>
<option name="refresh.display">progressbar</option>
<option name="rowNumbers">false</option>
<option name="totalsRow">false</option>
<option name="wrap">false</option>
<format type="color" field="Priority">
<colorPalette type="map">{"1":#FFab91,"2":#ffcc80,"3":#fff59d,"4":#c5e1a5,"5":#81d4fa}</colorPalette>
</format>
</table>
</panel>
</row>
<row>
<panel>
<event>
<title>Ajay Test</title>
<search>
<query>| mstats avg("host.cpu.user") as Value WHERE "index"="abc_metrics" source=host host.info.app="ds" span=10m BY host | dedup host | eval Value=round(Value,1) | rex field=host "(?&lt;host&gt;[^\.]+)" | sort -Value | head 10 | table host Value</query>
<earliest>$global_time_tok.earliest$</earliest>
<latest>$global_time_tok.latest$</latest>
</search>
<option name="list.drilldown">none</option>
</event>
</panel>
</row>
</form>

[ITWhisperer]

You have used this CSS styling which is hiding your table headers

thead {
visibility: hidden;
display: none; /* Optional, but can be more effective */
}

[rishabhpatel20]

I made this correction, still same

thead {
visibility: visible;
display: none; /* Optional, but can be more effective */
}

[livehybrid]

Hi @rishabhpatel20 

It is specifically the display:none which is hiding your headers!

🌟 Did this answer help you? If so, please consider:

• Adding karma to show it was useful
• Marking it as the solution if it resolved your issue
• Commenting if you need any clarification

Your feedback encourages the volunteers in this community to continue contributing

[rishabhpatel20]

what shall I mention instead of none? table hearder names like port count etc?

[ITWhisperer]

Why are you modifying it in the first place? Try not changing the style of the thead?

[rishabhpatel20]

Not good with CSS , its new to me hence , not sure how to solve it

[livehybrid · Accepted solution]

If you remove the display:none completely then it should bring back your headers.

[ITWhisperer]

What is it you are trying to achieve? Tables normally have headers, if you want them, don't try to use CSS to change them, unless there is a specific reason to do so, e.g. to modify their appearance in some way.

[ITWhisperer]

The display attribute is still none, therefore the element will not be displayed.

[rishabhpatel20]

<table>
<title>Hot Ports (ADTrans/hour)</title>
<search>
<query>index=abc source=port | rename port.port as Port | stats sum(port.code.557) as Tcount by Port | table Port Tcount | sort -Tcount | head 10</query>
<earliest>-1h</earliest>
<latest>now</latest>
</search>
<option name="drilldown">none</option>
</table>
</panel>
<panel id="PortGbytes">
<html>
<style>
table tbody tr th td { font-size: 75% !important; padding: 0px 1px !important;}
.dashboard-panel .panel-head h3 {
padding: 1px 1px 1px 1px !important;
font-size: 10px !important;
}
#PortGbytes{ height: 250px !important; width: 10% !important }
</style>
</html>
<table>
<title>Hot Ports (GB/hour)</title>
<search>
<query>index=abc source=port | rename port.port as Port | stats sum(port.xfer_bytes) as Xbytes by Port | eval Gbytes=round(Xbytes/(1024*1024*1024),2) | table Port Gbytes | sort -Gbytes | head 10</query>
<earliest>-1h</earliest>
<latest>now</latest>
</search>
<option name="drilldown">none</option>
</table>
</panel>
<panel id="PortPeakClients">
<html>
<style>
#PortPeakClients{ height: 250px !important; width: 10% !important }
table tbody tr th td { font-size: 75% !important; padding: 0px 1px !important;}
.dashboard-panel .panel-head h3 {
padding: 1px 1px 1px 1px !important;
font-size: 10px !important;
}
</style>
</html>
<table>
<title>Hot Ports (Peak Clients)</title>
<search>
<query>index=abc source=port | rename port.port as Port | stats max(port.numclients) as PeakClients by Port | table Port PeakClients | sort -PeakClients | head 10</query>
<earliest>-1h</earliest>
<latest>now</latest>
</search>
<option name="drilldown">none</option>
</table>
</panel>
</row>
<row>

[tej57]

Hey @rishabhpatel20,

Can you share the dashboard source code here to understand why the headers are not visible? Also, a clear screenshot from dashboard that shows the header is missing. The second screenshot displays fields like Hot Ports, and Trans/Hour. If those are not the headers, what are you expecting?

Thanks,
Tejas.

[rishabhpatel20]

So here is the image of dashboard 
There are 4 tables and in all 4 no headers 

Sample code for 2 tables 
<table>
<title>Hot Ports (ADTrans/hour)</title>
<search>
<query>index=abc source=port | rename port.port as Port | stats sum(port.code.557) as Tcount by Port | table Port Tcount | sort -Tcount | head 10</query>
<earliest>-1h</earliest>
<latest>now</latest>
</search>
<option name="drilldown">none</option>
</table>
</panel>
<panel id="PortGbytes">
<html>
<style>
table tbody tr th td { font-size: 75% !important; padding: 0px 1px !important;}
.dashboard-panel .panel-head h3 {
padding: 1px 1px 1px 1px !important;
font-size: 10px !important;
}
#PortGbytes{ height: 250px !important; width: 10% !important }
</style>
</html>
<table>
<title>Hot Ports (GB/hour)</title>
<search>
<query>index=abc source=port | rename port.port as Port | stats sum(port.xfer_bytes) as Xbytes by Port | eval Gbytes=round(Xbytes/(1024*1024*1024),2) | table Port Gbytes | sort -Gbytes | head 10</query>
<earliest>-1h</earliest>