@angelinealex, please try out the following Run any where dashboard with Simple XML JS extension. This actually builds up on @somesoni2 's answer. Prefix Sno to Name after sorting using lower case values. Then use Splunk JS Stack to apply custom Cell Render. In the JavaScript code, I am stripping off Serial Number before displaying in the table using regular expression.
First Table is mocks the issue where sorting is Case sensitive.
Second Table is the solution by Somesh Soni to prefix Serial Number before Values to always have them sorted. PS: prinf() function has been used to pad extra zero to keep digits sorted i.e. instead of 1, 10,11,... 2,3,4... have 01,02,03,04...,10,11. Padding can be increased as per total count or rows.
Third Table is one with Custom Cell Renderer using <table> id tableWithAlphabeticalSort, which strips the prefixed serial number using Simple XML JS extension and Splunk JS Stack.
Following is the Simple XML code for run anywhere dashboard:
<dashboard script="table_with_alphabet_sort.js">
<label>Table Alphabetically Case Insensitive sort</label>
<row>
<panel>
<table id="tableWithCaseSensitiveSorting">
<title>Table without Case Sensitive Sorting</title>
<search>
<query>| makeresults
| eval Name="apple,Aeroplane,Bat,bolt"
| makemv Name delim=","
| mvexpand Name
| eval sortName = lower(Name)
| sort sortName
| table Name sortName</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>
<panel>
<table id="tableWithoutCustomCellSorting">
<title>Table without JS for Case Insensitive Sort</title>
<search>
<query>| makeresults
| eval Name="apple,Aeroplane,Bat,bolt"
| makemv Name delim=","
| mvexpand Name
| eval sortName = lower(Name)
| sort sortName
| streamstats count as sno
| eval sno=printf("%02d",sno)
| eval Name=sno.".".Name
| table Name sortName</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>
<panel>
<table id="tableWithAlphabeticalSort">
<title>Table with Case Insensitive Sorting</title>
<search>
<query>| makeresults
| eval Name="apple,Aeroplane,Bat,bolt"
| makemv Name delim=","
| mvexpand Name
| eval sortName = lower(Name)
| sort sortName
| streamstats count as sno
| eval sno=printf("%02d",sno)
| eval Name=sno.".".Name
| table Name sortName</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 code for JavaScript file table_with_alphabet_sort.js to be placed under your app's appserver/static folder:
require([
'underscore',
'jquery',
'splunkjs/mvc',
'splunkjs/mvc/tableview',
'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc, TableView) {
var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
canRender: function(cell) {
// Enable this custom cell renderer for Name field
return _(['Name']).contains(cell.field);
},
render: function($td, cell) {
// Extract Numeric Part for Sorting and Hide Using CSS
// Keep Name as Text strName
var value = cell.value;
var snoPrefix = value.match(/\d+\./);
var strName = value.match(/[^\d\.]+/);
// Create HTML with Numeric sno hidden and Name displayed
$td.text(strName).addClass('string');
}
});
mvc.Components.get("tableWithAlphabeticalSort").getVisualization(function(tableView) {
tableView.on('rendered', function() {
setTimeout(function(){
// Add custom cell renderer, the table will re-render automatically.
tableView.addCellRenderer(new CustomRangeRenderer());
},100);
});
});
});
Please try out and confirm!
