topic Re: TableView in JavaScript Prevent Sorting or Capture Event in Dashboards & Visualizations

TableView in JavaScript Prevent Sorting or Capture Event

jrouse025 — Thu, 10 Jan 2019 16:32:22 GMT

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

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

Re: TableView in JavaScript Prevent Sorting or Capture Event

niketn — Sat, 12 Jan 2019 18:25:16 GMT

@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!

Re: TableView in JavaScript Prevent Sorting or Capture Event

jrouse025 — Sun, 13 Jan 2019 14:08:57 GMT

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

Re: TableView in JavaScript Prevent Sorting or Capture Event

niketn — Sun, 13 Jan 2019 16:10:48 GMT

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

Re: TableView in JavaScript Prevent Sorting or Capture Event

jrouse025 — Mon, 14 Jan 2019 12:54:05 GMT

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.