owl/docs/playground/samples/benchmark/benchmark.xml

<templates>
    <t t-name="Button">
        <div class='col-sm-6 smallpad'>
            <button t-att-id="props.id" class='btn btn-primary btn-block' type='button' t-on-click="props.onClick">
                <t t-esc="props.text"/>
            </button>
        </div>
    </t>
    <t t-name="Row">
        <tr t-att-class="props.isSelected ? 'danger' : ''">
            <td class="col-md-1" t-esc="props.row.id" />
            <td class="col-md-4">
                <a t-on-click="() => props.onSelect(props.row.id)" t-esc="props.row.label" />
            </td>
            <td class="col-md-1">
                <a t-on-click="() =>  props.onRemove(props.row.id)" class="remove">[x]
                    <span class='glyphicon glyphicon-remove' aria-hidden="true" />
                </a>
            </td>
            <td class='col-md-6'/>
        </tr>
    </t>
    <t t-name="Root">
        <div class='container'>
            <div class='jumbotron'>
                <div class='row'>
                    <div class='col-md-6'>
                        <h1>Owl Keyed</h1>
                    </div>
                    <div class='col-md-6'>
                        <div class='row'>
                            <Button id="'run'" onClick.bind="run" text="'Create 1,000 rows'" />
                            <Button id="'runlots'" onClick.bind="runLots" text="'Create 10,000 rows'" />
                            <Button id="'add'" onClick.bind="add" text="'Append 1,000 rows'" />
                            <Button id="'update'" onClick.bind="update" text="'Update every 10th row'" />
                            <Button id="'clear'" onClick.bind="clear" text="'Clear'" />
                            <Button id="'swaprows'" onClick.bind="swapRows" text="'Swap Rows'" />
                        </div>
                    </div>
                </div>
            </div>
            <table class='table table-hover table-striped test-data'>
                <tbody>
                    <t t-foreach="state.rows" t-as="row" t-key="row.id">
                        <Row row="row" isSelected="row.id === state.selectedRowId" onSelect.bind="selectRow" onRemove.bind="removeRow"/>
                    </t>
                </tbody>
            </table>
            <span class='preloadicon glyphicon glyphicon-remove' aria-hidden="true" />
        </div>
    </t>
</templates>