dbois/application/views/pages/reservations_view.php

<div id="RESERVATIONS">
    <div class="row">
        <div class="col-md-12">
            <table class="table table-condensed">
                <thead>
                <tr>
                    <th width="5px">&nbsp;</th>
                    <th>project</th>
                    <th class="align-right">Kosten derden</th>
                    <th class="align-right">gefactureerd</th>
                    <th class="align-right">gereserveerd</th>
                    <th class="align-right">betaald</th>
                    <th class="align-right">saldo te betalen</th>
                    <th class="align-right">saldo reservering</th>
                    <th class="align-right">saldo te factureren</th>
                </tr>
                </thead>
                <!--  ko foreach:projects -->
                <tbody>
                <tr>
                    <th>
                        <i class="icon fa-chevron-right"
                           data-bind="click:$root.toggleExternals, visible: ! showExternals()">
                        </i>
                        <i class="icon fa-chevron-down"
                           data-bind="click:$root.toggleExternals, visible:showExternals()">
                        </i>
                    </th>
                    <th>
                        <span data-bind="text:projectnumber"></span>
                    </th>
                    <th class="align-right" data-bind="visible: ! showExternals()">
                        <span data-bind="text:otherRevenue"></span>
                    </th>
                    <th class="align-right" data-bind="visible: ! showExternals()">
                        <span data-bind="text:costs"></span>
                    </th>
                    <th class="align-right" data-bind="visible: ! showExternals()">
                        <span data-bind="text:reservation"></span>
                    </th>
                    <th class="align-right" data-bind="visible: ! showExternals()">
                        <span data-bind="text:payed"></span>
                    </th>
                    <th class="align-right" data-bind="visible: ! showExternals()">
                        <span data-bind="text:saldoToPay"></span>
                    </th>
                    <th class="align-right" data-bind="visible: ! showExternals()">
                        <span data-bind="text:saldo"></span>
                    </th>
                    <th class="align-right" data-bind="visible: ! showExternals()">
                        <span data-bind="text:saldoInvoices"></span>
                    </th>
                </tr>
                <!-- ko if:showExternals() -->
                <!-- ko foreach: externals -->
                <tr>
                    <td width="5px">&nbsp;</td>
                    <td>
                        <span data-bind="text:externalName"></span>
                    </td>
                    <td>&nbsp</td>
                    <td class="align-right">
                        <span data-bind="text:costs"></span>
                    </td>
                    <td class="align-right">
                        <span data-bind="text:reservation"></span>
                    </td>
                    <td class="align-right">
                        <span data-bind="text:payed"></span>
                    </td>
                    <td class="align-right">
                        <span data-bind="text:saldoToPay"></span>
                    </td>
                    <td class="align-right">
                        <span data-bind="text:saldo"></span>
                    </td>
                    <td>&nbsp;</td>
                </tr>
                <!-- /ko -->
                <!-- /ko -->
                <!-- ko if:showExternals() -->
                <tr class="subtotal">
                    <th colspan="2">Totaal</th>
                    <th class="align-right">
                        <span data-bind="text:otherRevenue"></span>
                    </th>
                    <th class="align-right">
                        <span data-bind="text:costs"></span>
                    </th>
                    <th class="align-right">
                        <span data-bind="text:reservation"></span>
                    </th>
                    <th class="align-right">
                        <span data-bind="text:payed"></span>
                    </th>
                    <th class="align-right">
                        <span data-bind="text:saldoToPay"></span>
                    </th>
                    <th class="align-right">
                        <span data-bind="text:saldo"></span>
                    </th>
                    <th class="align-right">
                        <span data-bind="text:saldoInvoices"></span>
                    </th>
                </tr>
                <!-- /ko -->
                </tbody>
                <!-- /ko -->
                <tfoot>
                <tr class="grandtotal">
                    <th colspan="2">Grand totaal</th>
                    <th class="align-right"><span data-bind="text:otherRevenue"></span></th>
                    <th class="align-right"><span data-bind="text:costs"></span></th>
                    <th class="align-right"><span data-bind="text:reservation"></span></th>
                    <th class="align-right"><span data-bind="text:payed"></span></th>
                    <th class="align-right"><span data-bind="text:saldoToPay"></span></th>
                    <th class="align-right"><span data-bind="text:saldo"></span></th>
                    <th class="align-right"><span data-bind="text:saldoInvoices"></span></th>
                </tr>
                </tfoot>
            </table>
        </div>
    </div>
</div>