How to Render Modern Search Web part Results in Tabular format with additional metadata columns that allows to sort the results

Question

I am using Modern Search Webpart with custom template to display the results in tabular format with additonal managed properties, which works fine.

How can I make headers to act as Sortable fields, so that when user clicks on header column, it sorts alphabetically either ascending or descending order?

<div class="template_root">
{{#if showResultsCount}}
    <div class="template_resultCount">
        <label class="ms-fontWeight-semibold">{{getCountMessage totalRows keywords}}</label>
    </div>
{{/if}}
{{#if promotedResults}}
    <ul class="ms-List template_defaultList template_promotedResults">
    <li class="ms-fontWeight-semibold title">{{strings.PromotedResultsLabel}}</li>
    {{#each promotedResults as |promotedResult|}}
        <li class="ms-ListItem-primaryText">
            <div>
                <i class="ms-Icon ms-Icon--MiniLink" aria-hidden="true"></i>
            </div>
            <div>
                <a class="ms-font-l" href="{{Url}}">{{Title}}</a>
                <div class="ms-font-s">{{Description}}</div>
            </div>
        </li>
    {{/each}}
    </ul>
{{/if}}
<table class="template_resultTable">
    <thead>
        <tr>
            <th style="text-align:left">File Name</th>
            <th style="text-align:left">Column2</th>
            <th style="text-align:left">Column3</th>
        </tr>
    </thead>
    {{#each items as |item|}}
        <tr  tabindex="0">
            {{#> resultTypes}}
                {{!-- The block below will be used as default item template if no result types matched --}}
                <td class="template_result">
                        <img class="template_icon" src="{{IconSrc}}"/>
                        <div class="template_contentContainer">
                            <span class=""><a href="{{getUrl item}}">{{Title}}</a></span>


                        </div>

                </td>
                <td>

                            <span class="">{{RefinableString100}}</span>



                </td>
                  <td>

                            <span class="">{{RefinableString101}}</span>



                </td>

            {{/resultTypes}}
        </tr>
    {{/each}}
</table>