sapui5 sap.ui.table.Table How to get complete rows info using table.getRows() method while using visibleRowCount property

Question

Im facing a challenge in developing an app using sap.ui.table.Table . Im not able to get complete rows data using table.getRows()

Im getting 100 records from odata Service. For table binding im using visibleRowCount="10" . So that i will see only 10 records initially and by scroll we can see remaining rows.

Now i want to do some data and CSS manipulations while loading the data. So i have to get the complete rows info.

For data manipulations i can play using sap.ui.model.json.JSONmodel . But for CSS manipulations i have to get complete rows Data.

NOTE:: If i remove visibleRowCount property then i can get complete rows info. But Table column Headers will not be fixed, If we scroll down then we will not see Table Column Headers. So i cannot do that.

Below is my code..

<Table id="uiTable" selectionMode="None" rows="{tableModel>/Sheet1}" visibleRowCount="10">
                            <columns>
                                <Column width="5rem" filterProperty="Project" hAlign="Center">
                                    <m:Label text="Project"/>
                                    <template>
                                        <m:Text text="{tableModel>Project}" wrapping="false"/>
                                    </template>
                                </Column>
                                <Column hAlign="Center" width="5rem" filterProperty="State">
                                    <m:Label text="State"/>
                                    <template>
                                        <m:Text text="{tableModel>State}" wrapping="false"/>
                                    </template>
                                </Column>
                                <Column width="5rem">
                                    <m:Label text="Region"/>
                                    <template>
                                        <m:Text text="{tableModel>Region}" wrapping="false"/>
                                    </template>
                                </Column>
                            </columns>
                        </Table>

    

    var tableModel = this.getOwnerComponent().getModel("tableModel");
            this.getView().setModel(tableModel, "tableModel");
    
            var table = this.getView().byId("uiTable");
            var tableLength = tableModel.getData().Sheet1.length;
            var tableData = tableModel.getData().Sheet1;
            var aRows = table.getRows();

table.onAfterRendering = function () {
                sap.ui.table.Table.prototype.onAfterRendering.apply(this, arguments);
                for (var i = 0; i < tableLength; i++) {
                    if (tableData[i].Region === "AP") {
                        var pRow = aRows[i];
                        $("#" + pRow.getId() + "-col" + i).addClass("mystyle");
                    }
                }
            }

Can someone please help me how can i get complete rows info using table.getRows() along with visibleRowCount property in XML?

Thank you in advance

Answer 1

I realize that this question is not new but perhaps it might help someone else searching for the same.

The method getRows() generally only returns the rows that are visible. However, one quick workaround that might fit some use cases is to simply bind the visibleRowCount property of the table to the model that has the table data stored and calculate the length using expression binding. This way avoids any complicated JS code and handles the calculation directly in the XML view.

visibleRowCount="{= ${tablemodel>/rows}.length }"

In this example i have stored the data for the rows inside the rows property of my JSON Model "tablemodel". Now getRows() returns all the rows which can be useful at times. In my use case, i needed to apply custom css to specific table cells and this was the only way that worked. However, it might not be the best approach for a large dataset.

Hope this helps.