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!

Stay Connected: Your Guide to May Tech Talks, Office Hours, and Webinars!

Take a look below to explore our upcoming Community Office Hours, Tech Talks, and Webinars this month. This ...

They're back! Join the SplunkTrust and MVP at .conf24

With our highly anticipated annual conference, .conf, comes the fez-wearers you can trust! The SplunkTrust, as ...

Enterprise Security Content Update (ESCU) | New Releases

Last month, the Splunk Threat Research Team had two releases of new security content via the Enterprise ...