Dashboards & Visualizations

How to expand and collapse table rows using javascript?


I have seen one example of expanding table row and chart is displayed . I am not much familiar with javascript code

My table currently has these values :
alt text

Want these "application used" row values to be displayed in an expanded row .

The reason is because currently in a table view in Splunk dashboard there are more than 100 rows and even after displaying 5 rows in a table due to such values of more than 500 strings scrolling becomes tedious .

Is it possible to do a table row expand of this column so that while expanding the values from application used field get displayed.

My Splunk query is :

|loadjob savedsearch=admin:applist:apptest | table Name Age Hobby ApplicationUsed Status

Any help would be very much useful is it possible to do such a view ?

0 Karma

Path Finder

Hi @rijinc ,

In you simple XML dashboard use this code:

  <dashboard script="expandRow.js">
          <table id="myTable">
            <search id="mySearch">
                |loadjob savedsearch=admin:applist:apptest
            <fields>Name, Age, Hobby, Status</fields>

Place expandRow.js file into $SPLUNK_HOME/etc/apps/<your_app>/appserver/static dir with this code:

    var EventSearchBasedRowExpansionRenderer = TableView.BaseRowExpansionRenderer.extend({
        initialize: function(args) {

            this._postProcessManager = new PostProcessManager({
                id: 'ApplicationUsed ',
                managerid: 'mySearch'
            this._tableView = new TableView({
                id: 'drop_down_table',
                managerid: 'ApplicationUsed'
        canRender: function(rowData) {
            // always expand
            console.log("RowData: ", rowData);
            return true;
        render: function($container, rowData) {
            // rowData contains information about the row that is expanded.  We can see the cells, fields, and values
            // We will find the Name cell to use its value
            var username = _(rowData.cells).find(function (cell) {
               return cell.field === 'Name';
            //update the search with the Name that we are interested in
            this._postProcessManager.set({ search: 
                '| search Name="' + username.value + '" | table ApplicationUsed '
            // $container is the jquery object where we can put out content.
            // In this case we will render our table and add it to the $container
    var tableElement = mvc.Components.getInstance("myTable");
    tableElement.getVisualization(function(tableView) {
        // Add custom cell renderer, the table will re-render automatically.
        tableView.addRowExpansionRenderer(new EventSearchBasedRowExpansionRenderer());

After that you can customize CSS for you dashboard to edit #drop_down_table params for better visualization.

  • @pkarpushin I have a similar use case but I need the two-level of row expansion, The first expansion is on main row and the second expansion is on the expanded row.  Is this possible? Please assist!
0 Karma

Path Finder

It works well. But I used get the value at the specific location.
this._postProcessManager.set({ search: '| search Members=' + rowData.values[1] + ' | table Group '});

So I don't use the search the cell field name.

0 Karma


Hi All,

Any help or inputs ?

0 Karma
Get Updates on the Splunk Community!

Observability | How to Think About Instrumentation Overhead (White Paper)

Novice observability practitioners are often overly obsessed with performance. They might approach ...

Cloud Platform | Get Resiliency in the Cloud Event (Register Now!)

IDC Report: Enterprises Gain Higher Efficiency and Resiliency With Migration to Cloud  Today many enterprises ...

The Great Resilience Quest: 10th Leaderboard Update

The tenth leaderboard update (11.23-12.05) for The Great Resilience Quest is out &gt;&gt; As our brave ...