Recommended alternative for fr:datatable in Orbeon XForms version >= 4.5

Question

fr:datatable was deprecated in Orbeon XForms 4.0 and now removed as of version 4.5 (as per the release notes). We rely heavily on exactly that construct for creating sortable tables and because of the more enhanced event catching where it's easy to get a full XML element to do useful stuff with rather than 1 single value.

What is the recommended alternative for fr:data table? Example use:

<fr:datatable width="100%" scrollable="vertical" height="300px">
    <xhtml:thead>
        <xhtml:tr>
            <xhtml:th fr:sortable="true" fr:sortKey="number(tokenize(@id,'\.')[last()])" fr:sortType="number" fr:resizeable="true">
                <xforms:output ref="$resources/id"/>
            </xhtml:th>
            <xhtml:th fr:sortable="true" fr:resizeable="true">
                <xforms:output ref="$resources/issue"/>
            </xhtml:th>
            <xhtml:th fr:sortable="true" fr:sortKey="@currentStatusCode" fr:resizeable="true">
                <xforms:output ref="$resources/status"/>
            </xhtml:th>
            <xhtml:th fr:sortable="true" fr:sortKey="@priority" fr:resizeable="true">
                <xforms:output ref="$resources/priority"/>
            </xhtml:th>
            <xhtml:th fr:sortable="true" fr:sortKey="@type" fr:resizeable="true">
                <xforms:output ref="$resources/type"/>
            </xhtml:th>
            <xhtml:th fr:sortable="true" fr:resizeable="true">
                <xforms:output ref="$resources/date"/>
            </xhtml:th>
            <xhtml:th fr:sortable="true" fr:sorted="ascending" fr:resizeable="true">
                <xforms:output ref="$resources/assigned-to"/>
            </xhtml:th>
            <xhtml:th fr:sortable="true" fr:sortKey="(assignment|tracking)[1]/string(@labels)" fr:resizeable="true">
                <xforms:output ref="$resources/label"/>
            </xhtml:th>
        </xhtml:tr>
    </xhtml:thead>
    <xhtml:tbody>
        <xhtml:tr repeat-nodeset="instance('issues-instance')/issue[if (string-length(instance('selected-issue-id'))&gt;0) then (tokenize(@id,'\.')[last()]=instance('selected-issue-id')) else (@currentStatusCode=tokenize(instance('selected-status-codes'),' ') and @type=tokenize(instance('selected-issue-types'),' ') and (instance('selected-issue-priorities')='' or @priority=tokenize(instance('selected-issue-priorities'),' ')) and (instance('selected-issue-labels')='' or tokenize(@currentLabels,'\s')=tokenize(instance('selected-issue-labels'),'\s')) and (instance('selected-issue-assignee')='' or (instance('selected-issue-assignee')='#UNASSIGNED#' and string-length(@lastAssignment)=0) or @lastAssignment=instance('selected-issue-assignee')) and @id=instance('issue-search-results')/issue/@id)]" id="open-issue-table">
            <xxforms:variable name="type" select="@type"/>
            <xhtml:td>
                <xforms:output ref="tokenize(@id,'\.')[last()]"/>
            </xhtml:td>
            <xhtml:td>
                <xforms:output ref="@displayName"/>
            </xhtml:td>
            <xhtml:td>
                <xxforms:variable name="currentStatusCode" select="@currentStatusCode"/>
                <xforms:output ref="instance('decor-types')/IssueStatusCodeLifeCycle/enumeration[@value=$currentStatusCode]/label[@language=$resources/@xml:lang]"/>
            </xhtml:td>
            <xhtml:td>
                <xxforms:variable name="priority" select="@priority"/>
                <xforms:output ref="instance('decor-types')/IssuePriority/enumeration[@value=$priority]/label[@language=$resources/@xml:lang]"/>
            </xhtml:td>
            <xhtml:td>
                <xxforms:variable name="itype" select="@type"/>
                <xforms:output ref="instance('decor-types')/IssueType/enumeration[@value=$itype]/label[@language=$resources/@xml:lang]"/>
            </xhtml:td>
            <xhtml:td>
                <xforms:output ref="@lastDate" xxforms:format="format-dateTime(.,'[Y]-[M01]-[D01]', (), (), ())"/>
            </xhtml:td>
            <xhtml:td>
                <xforms:output ref="@lastAssignment"/>
            </xhtml:td>
            <xhtml:td>
                <!--xforms:output ref="tracking/@labels[1]"/-->
                <xforms:repeat nodeset="tokenize(@currentLabels, '\s')" class="not-selectable">
                    <xxforms:variable name="selectedLabelCode" select="."/>
                    <xxforms:variable name="selectedLabelColor" select="instance('project-instance')/labels/label[@code=$selectedLabelCode]/@color"/>
                    <xxforms:variable name="selectedLabelName" select="instance('project-instance')/labels/label[@code=$selectedLabelCode]/@name"/>
                    <xhtml:div class="labelouterbox" title="{$selectedLabelName}">
                        <xhtml:div style="background-color:{$selectedLabelColor}; padding-left: 7px; float: left;">&#160;</xhtml:div>
                        <xhtml:div style="background-color: white;float: left;">
                            <xforms:output ref="concat('&#160;',$selectedLabelCode,'&#160;')"/>
                        </xhtml:div>
                    </xhtml:div>
                </xforms:repeat>
            </xhtml:td>
        </xhtml:tr>
    </xhtml:tbody>
    <xforms:action ev:event="fr-selection-changed">
        <xforms:setvalue ref="instance('selected-issue')/selected" value="event('selected')/@id"/>
        <xforms:send submission="get-issue-details-submission"/>
    </xforms:action>
</fr:datatable>

Answer 1

There is currently no real equivalent to the fr:datatable. I think that, in order of realisticness:

1. If the datatable works for you, keep using it. Even if the code doesn't ship with Orbeon Forms, all that is needed is to put back the datatable directory from 4.4. You can then recreate a build, if you want to avoid that, you could even just put those files in their own jar file, and put the file under WEB-INF/lib. (If doing the latter I think you'll also need to compile the CoffeeScript file into a .js yourself, since this is normally done by the build.)
2. If you can live with the features currently in the fr:grid, you could use that component instead. This is the component used by Form Builder to handle all the tables, including repeated grids. But it's missing lots of features compared to the datatable (paging, sorting, resizable columns…), some of which Orbeon is thinking of adding in the near future.
3. Use a third party component you're happy with, and implement your own "binding with XForms" using XBL. Obviously, this can be pretty involved, especially if you're not already familiar with XBL.