Dashboards & Visualizations

TableView in JavaScript Prevent Sorting or Capture Event

jrouse025
Path Finder

I am using SplunkJS framework to create a new TableView and how do you do the following:

  1. Turn off sorting (yes prevent the user from changing the sort order)
  2. Attach to table event that would allow me to capture and event such as mytableview.on('sort', function (columnName, sortdirection){})
0 Karma
1 Solution

niketn
Legend

@jrouse025 , This would be possible through SimpleXML JS Extension. You would need to remove sorts class and data-sort-key attributes from the Table header to remove sorting.

Try the following run Dashboard Example which has table with id tableWithoutSort for removing table sorting.

<dashboard script="table_disable_sort.js">
  <label>Remove Table Sort</label>
  <row>
    <panel>
      <table id="tableWithoutSort">
        <search>
          <query>index=_internal sourcetype=splunkd
| stats count by log_level</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="count">20</option>
        <option name="dataOverlayMode">none</option>
        <option name="drilldown">none</option>
        <option name="percentagesRow">false</option>
        <option name="rowNumbers">false</option>
        <option name="totalsRow">false</option>
        <option name="wrap">true</option>
      </table>
    </panel>
  </row>
</dashboard>

Following is the required JavaScript code for table_disable_sort.js

 require([
     'underscore',
     'jquery',
     'splunkjs/mvc',
     'splunkjs/mvc/tableview',
     'splunkjs/mvc/simplexml/ready!'
 ], function (_, $, mvc, TableView) {
    mvc.Components.get('tableWithoutSort').getVisualization(function(tableView) {
        tableView.on('rendered', function() {
            setTimeout(function(){
                $("#tableWithoutSort table thead th").removeClass("sorts").removeAttr("data-sort-key");
            },100);
        }); 
    }); 
 });

PS: setTimeout() after table render() function is required in Splunk 6.5 higher versions as already reported in other questions on Splunk Answers. Please try out and confirm!

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

View solution in original post

niketn
Legend

@jrouse025 , This would be possible through SimpleXML JS Extension. You would need to remove sorts class and data-sort-key attributes from the Table header to remove sorting.

Try the following run Dashboard Example which has table with id tableWithoutSort for removing table sorting.

<dashboard script="table_disable_sort.js">
  <label>Remove Table Sort</label>
  <row>
    <panel>
      <table id="tableWithoutSort">
        <search>
          <query>index=_internal sourcetype=splunkd
| stats count by log_level</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="count">20</option>
        <option name="dataOverlayMode">none</option>
        <option name="drilldown">none</option>
        <option name="percentagesRow">false</option>
        <option name="rowNumbers">false</option>
        <option name="totalsRow">false</option>
        <option name="wrap">true</option>
      </table>
    </panel>
  </row>
</dashboard>

Following is the required JavaScript code for table_disable_sort.js

 require([
     'underscore',
     'jquery',
     'splunkjs/mvc',
     'splunkjs/mvc/tableview',
     'splunkjs/mvc/simplexml/ready!'
 ], function (_, $, mvc, TableView) {
    mvc.Components.get('tableWithoutSort').getVisualization(function(tableView) {
        tableView.on('rendered', function() {
            setTimeout(function(){
                $("#tableWithoutSort table thead th").removeClass("sorts").removeAttr("data-sort-key");
            },100);
        }); 
    }); 
 });

PS: setTimeout() after table render() function is required in Splunk 6.5 higher versions as already reported in other questions on Splunk Answers. Please try out and confirm!

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

jrouse025
Path Finder

You answered #1 thank you it did the trick.
Any suggestions on #2?

0 Karma

niketn
Legend

I am sorry I missed #2... could you elaborate on the requirement? What is the expected behavior?

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

jrouse025
Path Finder

Requirement: If we were to keep the sorting capabilities on the columns we would need to subscribe to table 'sort' or 'sorting' event.
Let me know if you need more information.

Regards.

0 Karma
Get Updates on the Splunk Community!

.conf24 | Day 0

Hello Splunk Community! My name is Chris, and I'm based in Canberra, Australia's capital, and I travelled for ...

Enhance Security Visibility with Splunk Enterprise Security 7.1 through Threat ...

(view in My Videos)Struggling with alert fatigue, lack of context, and prioritization around security ...

Troubleshooting the OpenTelemetry Collector

  In this tech talk, you’ll learn how to troubleshoot the OpenTelemetry collector - from checking the ...