topic Re: Table headers not visible in Dashboards & Visualizations

Table headers not visible

rishabhpatel20 — Thu, 19 Jun 2025 13:22:11 GMT

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.

Search result

Below image is from dashboard pannel , no headings

Re: Table headers not visible

tej57 — Thu, 19 Jun 2025 13:27:15 GMT

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.

Re: Table headers not visible

ITWhisperer — Thu, 19 Jun 2025 13:29:04 GMT

Please share the source for your dashboard panel

Re: Table headers not visible

rishabhpatel20 — Thu, 19 Jun 2025 13:31:01 GMT

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>

Re: Table headers not visible

rishabhpatel20 — Thu, 19 Jun 2025 13:32:51 GMT

<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>

Re: Table headers not visible

livehybrid — Thu, 19 Jun 2025 13:38:00 GMT

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

Re: Table headers not visible

rishabhpatel20 — Thu, 19 Jun 2025 13:42:08 GMT

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 "(?<ShortName>[^\.]+)" | 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 "(?<host_short>[^\.]+)"
| 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 >=80,"#ffab91", value <80 AND value >=50,"#fff59d", value <50 AND value >=20, "#c5e1a5", value <20 AND value >=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 <= $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 "(?<host>[^\.]+)" | 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>

Re: Table headers not visible

ITWhisperer — Thu, 19 Jun 2025 13:51:26 GMT

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

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

Re: Table headers not visible

rishabhpatel20 — Thu, 19 Jun 2025 13:56:43 GMT

I made this correction, still same

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

Re: Table headers not visible

ITWhisperer — Thu, 19 Jun 2025 13:59:36 GMT

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

Re: Table headers not visible

livehybrid — Thu, 19 Jun 2025 13:59:49 GMT

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

Re: Table headers not visible

rishabhpatel20 — Thu, 19 Jun 2025 14:01:36 GMT

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

Re: Table headers not visible

ITWhisperer — Thu, 19 Jun 2025 14:05:01 GMT

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

Re: Table headers not visible

rishabhpatel20 — Thu, 19 Jun 2025 14:06:01 GMT

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

Re: Table headers not visible

ITWhisperer — Thu, 19 Jun 2025 14:07:55 GMT

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.

Re: Table headers not visible

livehybrid — Thu, 19 Jun 2025 14:10:17 GMT

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

Re: Table headers not visible

tej57 — Thu, 19 Jun 2025 14:18:12 GMT

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.