Dashboards & Visualizations
Highlighted

How to add a header for row numbers in a column

New Member

I have set a column for row numbers in the table view of the dashboard like this figure, but I want to have a header.
How can I change the blank header like the simplexmlexamples with javascript change the rows?

alt text

0 Karma
Highlighted

Re: How to add a header for row numbers in a column

Contributor

Instead of using the table view feature to switch on row numbers, you could add a streamstats to count after your search, eg

<your search> | streamstats count as "your label" | table "your label", _time, count

That should do it without further magic, if I correctly understood what you asked for.

View solution in original post

0 Karma
Highlighted

Re: How to add a header for row numbers in a column

SplunkTrust
SplunkTrust

@zzjcfj

Not clear about the question but I think you want to replace BLANK header with some value OR need result count. Well, can you please try below example ??

XML:

<dashboard script="status.js">
  <label>Test</label>
  <row>
     <panel>
      <table id="mytable2">
        <title>$row_count$</title>
        <search>
          <query>index="_internal" | stats count by sourcetype</query>
          <earliest>-4h@m</earliest>
          <latest>now</latest>
          <done>
            <set token="row_count">$job.resultCount$</set>
          </done>
        </search>
        <option name="drilldown">none</option>
        <option name="rowNumbers">true</option>
      </table>
    </panel>
  </row>
</dashboard>

Javascript:

require(["jquery", "splunkjs/mvc", "splunkjs/mvc/simplexml/ready!"], function($, mvc) { 
    $(function() {
        var myVar = setTimeout(function() {
            $('div[id^="mytable2-"]').find($("th.row-number")).html("My Header");
            clearTimeout(myVar);
        }, 2000);

    });
});
0 Karma
Highlighted

Re: How to add a header for row numbers in a column

New Member

kamlesh_vaghela,
thank you very much, It's the answer I want,But there was a problem refreshing the page, is there any other method except setTimeout call?
why change your code like this do not work?
require(["jquery", "splunkjs/mvc", "splunkjs/mvc/simplexml/ready!"], function($, mvc) {

$(function() {
$('div[id^="mytable2-"]').find($("th.row-number")).html("My Header");
});
});

0 Karma
Highlighted

Re: How to add a header for row numbers in a column

New Member

@knielsen thank you for your answer, it is work fine alt text

0 Karma
Highlighted

Re: How to add a header for row numbers in a column

Legend

@zzjcfj I think @kamlesh_vaghela jumped the gun and applied jQuery update to dashboard load setTimeout rather than table render setTimeout. The solution that you need requires Table Render extension through SplunkJS. Please refer to one of my older answers on similar lines: https://answers.splunk.com/answers/515162/how-can-i-add-a-summary-row-to-a-table-in-simple-x.html
*You will have to scroll down to the answer which is not accepted 😉 *

If you extend the table render through JS you will avoid adding streamstats in your existing query 🙂

Following is the complete run anywhere example based on Splunk's _internal index as per your question (use case) to show a label Row # (customizable through JS extension). This should be able to handle table re-render, refresh etc as it extends table render.

alt text

Following is the required Simple XML code:

<dashboard script="table_row_number_header_extension.js">
  <label>Table with Serial Number Header</label>
  <row>
    <panel>
      <table id="tableWithRowNumAndHeader">
        <search>
          <query>index=_internal sourcetype=splunkd log_level!=INFO
| timechart count by component useother=f limit=5</query>
          <earliest>-60m@m</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="count">5</option>
        <option name="dataOverlayMode">none</option>
        <option name="drilldown">none</option>
        <option name="percentagesRow">false</option>
        <option name="rowNumbers">true</option>
        <option name="totalsRow">false</option>
        <option name="wrap">true</option>
      </table>
    </panel>
  </row>
</dashboard>

Following is the required JS file table_row_number_header_extension.js

 require([
     'underscore',
     'jquery',
     'splunkjs/mvc',
     'splunkjs/mvc/tableview',
     'splunkjs/mvc/simplexml/ready!'
 ], function(_, $, mvc, TableView) {
     mvc.Components.get("tableWithRowNumAndHeader").getVisualization(function(tableView) {
         tableView.on('rendered', function() {
             setTimeout(function(){
                 $("div#tableWithRowNumAndHeader table thead th.row-number").html("Row #");
             },100);
         });
     });
 });



| eval message="Happy Splunking!!!"


0 Karma
Highlighted

Re: How to add a header for row numbers in a column

New Member

@ niketnilay ,
thanks for your reply, It's work fine, I want to know more about Table Render extension, where can i find more about this knowledge?

0 Karma
Highlighted

Re: How to add a header for row numbers in a column

Legend

@zzjcfj one of the first place should be to try out the Splunk Dashboard Examples app which comes with alot of Table Render Extension examples. The complete documentation on Splunk Web Framework is available on

Splunk Docs : https://docs.splunk.com/DocumentationStatic/WebFramework/1.0/
Splunk Dev : https://dev.splunk.com/enterprise/docs/developapps/webframework/displaydataview/howtocreatecustomtab...




| eval message="Happy Splunking!!!"


0 Karma