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!

Splunk Enterprise Security: Your Command Center for PCI DSS Compliance

Every security professional knows the drill. The PCI DSS audit is approaching, and suddenly everyone's asking ...

Developer Spotlight with Guilhem Marchand

From Splunk Engineer to Founder: The Journey Behind TrackMe    After spending over 12 years working full time ...

Cisco Catalyst Center Meets Splunk ITSI: From 'Payments Are Down' to Root Cause in ...

The Problem: When Networks and Services Don't Talk Payment systems fail at a retail location. Customers are ...