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!

What’s New in Splunk Cloud Platform 9.1.2308?

Hi Splunky people! We are excited to share the newest updates in Splunk Cloud Platform 9.1.2308! Analysts can ...

Index This | Why do they call it hyper text?

November 2023 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

State of Splunk Careers 2023: Career Resilience and the Continued Value of Splunk

For the past three years, Splunk has partnered with Enterprise Strategy Group to conduct a survey that gauges ...