Visualforce component not printing footer

Question

I have a sample here some data here that i want to render. The problem is that it is not showing the grand total section and is just a big blank row.

What am i doing wrong that is causing the issue:

    <apex:component id="CPQQuoteLines" controller="CPQQuoteLinesEmailTemplateController" access="global">
    <style type="text/css">
        .bordered-table {
            border: 1px solid black;
            border-collapse: collapse;
            width: 100%;
        }

        .bordered-table th, .bordered-table td {
            border: 1px solid black;
            padding: 8px;
            text-align: left;
            background-color: #f2f2f2; /* Light gray background for header */
            white-space: nowrap;
        }

        .bordered-table th {
            background-color: #90d5ff; /* Blue background for header */
            color: black; /* White text for header */
        }

        /* Footer Row Styling */
        .footer-row td {
            font-weight: bold;
            background-color: #f9f9f9;
        }
    </style>

    <apex:attribute name="quoteIdAttr" description="CPQ Quote Id" type="ID" assignTo="{!srcQuoteId}" />

    <!-- Render the table -->
    <apex:dataTable value="{!quoteLines}" var="line" id="theTable" rowClasses="odd,even" width="100%" styleClass="bordered-table">
        <apex:column headerValue="Items">
            <apex:outputText value="{!line.SBQQ__Product__r.Name}" />
        </apex:column>
        <apex:column headerValue="Contractual Delivery Date">
            <apex:outputText value="{!line.SBQQ__Quote__r.SBQQ__Opportunity2__r.Contract_Delivery_Date__c}" />
        </apex:column>
        <apex:column headerValue="Market Share Type">
            <apex:outputText value="{!line.SBQQ__Quote__r.SBQQ__Opportunity2__r.Market_Share_Type__c}" />
        </apex:column>
        <apex:column headerValue="Sales Price">
            <apex:outputText value="{0, number, currency}">
                <apex:param value="{!line.SBQQ__PackageListTotal__c}" />
            </apex:outputText>
        </apex:column>
        <apex:column headerValue="Share of Deal">
            <apex:outputText value="{0, number, percent}">
                <apex:param value="{!line.SBQQ__PackageListTotal__c / totalSalesPrice}" />
            </apex:outputText>
        </apex:column>
        <apex:column headerValue="Target Price">
            <apex:outputText value="{0, number, currency}">
                <apex:param value="{!line.Component_Target_Price__c}" />
            </apex:outputText>
        </apex:column>
        <apex:column headerValue="Price Performance">
            <apex:outputText value="{0, number, percent}">
                <apex:param value="{!line.SBQQ__PackageListTotal__c / line.Component_Target_Price__c}" />
            </apex:outputText>
        </apex:column>
        <apex:column headerValue="RAM Value">
            <apex:outputText value="{0, number, currency}">
                <apex:param value="{!line.Rev_Total__c}" />
            </apex:outputText>
        </apex:column>
        <apex:column headerValue="Ram Margin %">
            <apex:outputText value="{0, number, percent}">
                <apex:param value="{!(line.Rev_Total__c - line.SBQQ__PackageCost__c) / line.Rev_Total__c}" />
            </apex:outputText>
        </apex:column>

        <!-- Footer Row -->
        <apex:facet name="footer">
            <tr>
                <td><strong>Grand Total</strong></td>
                <td></td>
                <td></td>
                <td>
                    <apex:outputText value="{0, number, currency}">
                        <apex:param value="{!totalSalesPrice}" />
                    </apex:outputText>
                </td>
                <td>
                    <apex:outputText value="{0, number, percent}">
                        <apex:param value="{!totalShareOfDeal}" />
                    </apex:outputText>
                </td>
                <td>
                    <apex:outputText value="{0, number, currency}">
                        <apex:param value="{!totalTargetPrice}" />
                    </apex:outputText>
                </td>
                <td>
                    <apex:outputText value="{0, number, percent}">
                        <apex:param value="{!totalPackagePerformance}" />
                    </apex:outputText>
                </td>
                <td>
                    <apex:outputText value="{0, number, currency}">
                        <apex:param value="{!totalRAMValue}" />
                    </apex:outputText>
                </td>
                <td>
                    <apex:outputText value="{0, number, percent}">
                        <apex:param value="{!totalRamMargin}" />
                    </apex:outputText>
                </td>
            </tr>
        </apex:facet>
    </apex:dataTable>
</apex:component>

I've tried to do it various ways like moving the footer section or doing it without footer but its either comes as another table or it does not print since its not part of the table group.

Answer 1

Your footer code starts with '<tr>'. I'm sure this is the problem. Because the parent for the '<tr>' tag should be '<table>' and you don't have the '<table>' before '<tr>'. Either build normal table inside the

<apex:facet name="footer">

or use this example to build what you need

<apex:page controller="dataTableCon" id="thePage">
    <apex:dataTable value="{!accounts}" var="account" id="theTable"
        rowClasses="odd,even" styleClass="tableClass">
        <apex:facet name="caption">table caption</apex:facet>
        <apex:facet name="header">table header</apex:facet>
        <apex:facet name="footer">table footer</apex:facet>

        <apex:column>
            <apex:facet name="header">Name</apex:facet>
            <apex:facet name="footer">column footer</apex:facet>
            <apex:outputText value="{!account.name}"/>
        </apex:column>

        <apex:column>
            <apex:facet name="header">Owner</apex:facet>
            <apex:facet name="footer">column footer</apex:facet>
            <apex:outputText value="{!account.owner.name}"/>
        </apex:column>

    </apex:dataTable>
</apex:page>

https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_compref_dataTable.htm