topic Re: Dropdown in Table column in Dashboards & Visualizations

How to add dropdown in table column?

aru949 — Wed, 08 Feb 2023 17:20:07 GMT

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.

Re: Dropdown in Table column

gcusello — Wed, 08 Feb 2023 07:40:40 GMT

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

Re: Dropdown in Table column

aru949 — Wed, 08 Feb 2023 07:43:37 GMT

@gcusello

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

Re: Dropdown in Table column

gcusello — Wed, 08 Feb 2023 07:47:04 GMT

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

Re: How to add dropdown in table column?

kamlesh_vaghela — Thu, 09 Feb 2023 06:41:35 GMT

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