sap.ui.table Columns with Footer option

Question

sap.ui.table Columns with Footer option

39 Views Asked by HatriGt Ace At 20 March 2024 at 08:29

I have a sap.ui.table containing over 40 columns to display in the UI. Among them, several columns represent amounts. I'm attempting to display the total value at the bottom of each column, but I haven't found an option to do so. While sap.m.column has a footer aggregation, sap.ui.table.column does not. Is there an alternative method to accomplish this?

Original Q&A

There are 1 best solutions below

**A.vH** · Answer 1 · 2024-03-20T15:06:52.017000

It is possible to fix the last row and enter an own row. (the value should come from the backend instead calculating it manually, of course)

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">

    <title>Total Row</title>

    <script src="https://ui5.sap.com/resources/sap-ui-core.js"
                                    id="sap-ui-bootstrap"
                                    data-sap-ui-libs="sap.m, sap.ui.table"
                                    data-sap-ui-theme="sap_fiori_3"
                                    data-sap-ui-compatVersion="edge"></script>
    <!-- only load the main library "sap.m" and the Fiori 3 theme -->

    <script>
        var oTable = new sap.ui.table.Table().placeAt("content");

        var aTableData = {
            "columns": {
                "VALUES": [{
                    "LABEL": "Transaction Number",
                    "TEMPLATE": "TRANSACTION_NUM",
                    "DATATYPE": "NUMC",
                    "DECIMALS": "000000",
                    "REFFIELD": ""
                },
                    {
                        "LABEL": "Total Amt Incl VAT",
                        "TEMPLATE": "INVOICEAMTINCLUDINGVAT",
                        "DATATYPE": "CURR",
                        "DECIMALS": "000002",
                        "REFFIELD": ""
                    }]
            },
            "rows": [{
                "TRANSACTION_NUM": "000000000001",
                "INVOICEAMTINCLUDINGVAT": 1200,
            },
                {
                    "TRANSACTION_NUM": "000000000002",
                    "INVOICEAMTINCLUDINGVAT": 34,
                }

            ]
        };
        var oFooterTotal = $.extend(true, {}, aTableData.rows[0]);
        aTableData.rows.push(oFooterTotal);
        var lastRow = aTableData.rows.length - 1;
        aTableData.columns.VALUES.forEach(function (oColumn, iIndexCol) {
            if (oColumn.DATATYPE === "CURR") {
                oFooterTotal[oColumn.TEMPLATE] = 0;
                aTableData.rows.forEach(function (oRow, iIndexRow) {
                    if (iIndexRow !== lastRow) {
                        oFooterTotal[oColumn.TEMPLATE] += parseInt(oRow[oColumn.TEMPLATE]);
                    }
                })
            }
            else {
                oFooterTotal[oColumn.TEMPLATE] = "";
            }
        });

        oTable.setModel(new sap.ui.model.json.JSONModel(aTableData.rows));
        oTable.setVisibleRowCountMode("Fixed");
        oTable.setVisibleRowCount(aTableData.rows.length);
        oTable.setFixedBottomRowCount(1);

        Object.keys(aTableData.rows[0]).forEach(function (key) {
            oTable.addColumn(new sap.ui.table.Column({
                name: key,
                label: new sap.m.Label({
                    text: key
                }),
                template: new sap.m.Label().bindProperty("text", key),
            }));
        });

        oTable.bindAggregation("rows", {
            path: "/"
        });

    </script>
</head>
<body id="content" class="sapUiBody">
</body>
</html>

sap.ui.table Columns with Footer option

There are 1 best solutions below

Related Questions in SAPUI5

Related Questions in SAP-FIORI

Trending Questions

Popular # Hahtags

Popular Questions