How to make display template with dynamic table cells?

Question

I have cloned the OOTB display template "Control list" and "Item". Now I would like to change this code which is just a simple list of <ul> and <li> tags which are wrapping the content, to a table with cells in some structure. This is the structure I would like to have with 6 items:

<table>
            <tr>
                 <td>picture1</td>
                 <td>picture2</td>
                 <td rowspan="2">detail info from the selected picture like : title, description</td>
                 <td>picture3</td>
            </tr>

            <tr>
                <td>picture4</td>
                 <td>picture5</td>
                 <td>picture6</td>
            </tr>

        </table>

This is how my control templates look alike now:

<div id="Agenda_Control_List">

<!--#_ 
if (!$isNull(ctx.ClientControl) &&
    !$isNull(ctx.ClientControl.shouldRenderControl) &&
    !ctx.ClientControl.shouldRenderControl())
{
    return "";
}
ctx.ListDataJSONGroupsKey = "ResultTables";
var $noResults = Srch.ContentBySearch.getControlTemplateEncodedNoResultsMessage(ctx.ClientControl);

var noResultsClassName = "ms-srch-result-noResults";

var ListRenderRenderWrapper = function(itemRenderResult, inCtx, tpl)
{
    var iStr = [];
    iStr.push('<li>');
    iStr.push(itemRenderResult);
    iStr.push('</li>');
    return iStr.join('');
}
ctx['ItemRenderWrapper'] = ListRenderRenderWrapper;
_#-->
        <ul class="cbs-Agenda-List">
            _#= ctx.RenderGroups(ctx) =#_
        </ul>
<!--#_
if (ctx.ClientControl.get_shouldShowNoResultMessage())
{
_#-->
        <div class="_#= noResultsClassName =#_">_#= $noResults =#_</div>
<!--#_
}


_#-->

    </div>

Answer 1

Yo should try to make your desired template using control and Item Display templates. I have a similar need (but not Identical) which I wanted to show Item in table with 3 columns. I implemented that using Bootstrap (Only because I need cards and responsive design. You can ignore this) in following templates:

My Control Template: I modified the default List Control only in the following line (adding class class="col-md-4" to li)

var ListRenderRenderWrapper = function(itemRenderResult, inCtx, tpl)
{
    var iStr = [];
    iStr.push('<li class="col-md-4">');
    iStr.push(itemRenderResult);
    iStr.push('</li>');
    return iStr.join('');
}

Item Display template: This is where the logic happens. I added a new line div if item index is a factor of 3! (Only changes is showed here!)

var customRowEnd="";
if ((ctx.CurrentItemIdx+1)%3==0) {
    customRowEnd="<div style='clear:both;'></div>";
}

.....

<!-- #_if(!customRowEnd.isEmpty){ -->
                _#= customRowEnd =#_
            <!-- #_}_# -->

And that's what I want. The only point is the new line at index which is a factor of 3. (Hinted at Randy Drisgill, John Ross, Paul Stubbs - SharePoint 2013 Branding and User Interface Design (2013, Wrox)).

Answer 2

In your control you have to change the content in the function ListRenderRenderWrapper or create your own rendering wrapper. Then edit your item display template to style the table rows.

var ListRenderRenderWrapper = function(itemRenderResult, inCtx, tpl)
{
 var iStr = [];
iStr.push('<tr>');
iStr.push(itemRenderResult);
iStr.push('</tr>');
return iStr.join('');
}
ctx['ItemRenderWrapper'] = ListRenderRenderWrapper;
_#-->
    <table class="cbs-Agenda-List">
        _#= ctx.RenderGroups(ctx) =#_
    </table>
<!--#_