How to show all of the parsed fields?

[alinadejeu]

I have a table and I wanted to use the "table row expansion" JavaScript (JS) function. I don't know very much about JS.

I have my table and I even have the > info symbol that shows up. However, when I click on the > symbol and the panel attempts to run the expansion search, I get the event I want but not all of the fields are shown.

I would like to get something similar to this:
https://www.aldeid.com/wiki/Splunk/table-expandable-rows-time-picker

so when I click on the > symbol in order to expand the event on within my table, I want all of the parsed fields to display. Like it would if I was using an event instead of a table.

I'm not sure what the issue is.

The dashboard is:

<dashboard script="test.js">
...
  <row>
    <panel>
      <table id="expand_events">
        <search>
          <query>index=main sourcetype=syndication tag!=* | table published, source, title, summary, id</query>
......

my test.js script:

require([
        'splunkjs/mvc/tableview',
        'splunkjs/mvc/eventsviewerview',
        'splunkjs/mvc/searchmanager',
        'splunkjs/mvc',
        'underscore',
        'splunkjs/mvc/simplexml/ready!'
    ],function(
        TableView,
        EventsViewer,
        SearchManager,
        mvc,
        _
    ){
    var EventSearchBasedRowExpansionRenderer = TableView.BaseRowExpansionRenderer.extend({
        initialize: function(args) {
            // initialize will run once, so we will set up a search and events to be reused.
            this._searchManager = new SearchManager({
                id: 'details-search-manager',
                preview: false
            });
            this._eventsViewer = new EventsViewer({
                managerid: 'details-search-manager'
            });
        },
        canRender: function(rowData) {
            // Since more than one row expansion renderer can be registered we let each decide if
            // they can handle that data
            // Here we will always handle it.
            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 sourcetype cell to use its value
            var titleCell = _(rowData.cells).find(function (cell) {
               //console.log("RowData: ", rowData);
               return cell.field === 'title';
            });
            //update the search with the sourcetype that we are interested in
            this._searchManager.set({
                earliest_time: "$form.TimeRangePicker.earliest$",
                latest_time: "$form.TimeRangePicker.latest$",
                search: 'source="syndication://DarkReading Attacks-Breaches"' + titleCell.value
            }, {tokens: true});
            console.log("RowData: ", rowData);
            // $container is the jquery object where we can put out content.
            // In this case we will render our chart and add it to the $container
            $container.append(this._eventsViewer.render().el);
        }
    });
    var tableElement = mvc.Components.getInstance("expand_events");
    tableElement.getVisualization(function(tableView) {
        // Add custom cell renderer, the table will re-render automatically.
        tableView.addRowExpansionRenderer(new EventSearchBasedRowExpansionRenderer());
    });
});

[alinadejeu · Accepted solution]

In the event anyone else is trying to do something similar I was able to figure out what my .js was missing which were:

       managerid: 'details-search-manager',
       type: 'table'
...
...
       search: 'sourcetype="syndication"' + titleCell.value + '|table *'