How to add dropdown in table column?

[aru949]

I want to add dropdown menu to a table value. Each value in a row should be a collapsable dropdown giving the description of the value. For example if my column entry has a value R_5, if I click on it, it should expand and show me as radius=5. I am able to do use a tooltip for this but want a dropdown instead.

[kamlesh_vaghela]

@aru949 

Can you please try this?

XML

<dashboard version="1.1" script="a.js">
  <label>Table Cell with Dropdown</label>
  <row>
    <panel>
      <table id="tbl1">
        <search>
          <query>| makeresults count=10 
| eval n=1 
| accum n 
| eval my_column="R_".n</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
      </table>
    </panel>
  </row>
</dashboard>

Js.

require([
    'underscore',
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/tableview',
    'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc, TableView) {
    // Add dropdown to table
    var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
        canRender: function(cell) {
            return _(["my_column"]).contains(cell.field);
        },
        render: function($td, cell) {
            console.log(cell.field);
            if (cell.field === "my_column") {
                if(cell.value == "R_5") {
                    var strHtmlInput = `
                        <select>
                            <option value="AM">AM</option>
                            <option value="AIL">AIL</option>
                            <option value="NEB">NEB</option>
                            <option value="SSP">SSP</option>
                        </select>
                        `;
                    $td.append(strHtmlInput).on("change", function(e) {
                        console.log(e.target.value)
                    });
                } 
                else {
                    $td.append(cell.value);
                }
            }
        }
});

    var sh = mvc.Components.get("tbl1");
    if (typeof(sh) != "undefined") {
        sh.getVisualization(function(tableView) {
            // Add custom cell renderer and force re-render
            tableView.table.addCellRenderer(new CustomRangeRenderer());
            tableView.table.render();
        });
    }
});

Note: You can change dropdown values as per your requirement.

Thanks
KV
If any of my replies help you to solve the problem Or gain knowledge, an upvote would be appreciated.

[aru949]

@gcusello 

I want the that particular table cell to expand like a dropdown menu.

[gcusello]

Hi @aru949,

I'm not sure that's possible, you should explore, still in the Splunk Dashboard Examples App, if the "Table Raw Expansion" case could be something near to your requirement.

Ciao.

Giuseppe

[gcusello]

Hi @aru949,

let me understand: you want to click on a value of a table and open another panel in the same dashboard (or another dashboard) containing more detailed information about the clicked value, is it correct?

if this is your need, see in the Splunk Dashboard Examples App (https://splunkbase.splunk.com/app/1603) the On Page Drilldown example.

Ciao.

Giuseppe