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
Got questions? Get answers!

Join the Splunk Community Slack to learn, troubleshoot, and make connections with fellow Splunk practitioners in real time!

Meet up IRL or virtually!

Join Splunk User Groups to connect and learn in-person by region or remotely by topic or industry.

Get Updates on the Splunk Community!

[Puzzles] Solve, Learn, Repeat: Character substitutions with Regular Expressions

This challenge was first posted on Slack #puzzles channelFor BORE at .conf23, we had a puzzle question which ...

Splunk Community Badges!

  Hey everyone! Ready to earn some serious bragging rights in the community? Along with our existing badges ...

[Puzzles] Solve, Learn, Repeat: Matching cron expressions

This puzzle (first published here) is based on matching timestamps to cron expressions.All the timestamps ...