Fix Table Row Mode

Fix Table Row Mode (no-deprecated-api)

This skill fixes deprecated row-related properties on sap.ui.table.Table that the UI5 linter detects but cannot auto-fix. The modernization replaces flat properties with a structured rowMode aggregation.

IMPORTANT: Do NOT modernize sap.ui.table.Table to sap.m.Table — they are not equivalent.

Linter Rule

Property Mapping

RowMode Class Selection

Choose based on the old visibleRowCountMode value:

• "Fixed" (or not set — this is the default) → rowmodes:Fixed
• "Interactive" → rowmodes:Interactive
• "Auto" → rowmodes:Auto

Pre-Modernization Safety Check

If a property set on the Table doesn't exist on the selected RowMode class (e.g., minAutoRowCount on a Fixed mode table), this indicates possible dynamic row mode switching. Abort modernization for that table and flag for manual review.

Fix Strategy — XML Views

Step 1: Add XML Namespace

Add to the root <mvc:View> tag:

xmlns:rowmodes="sap.ui.table.rowmodes"

Step 2: Remove Deprecated Properties and Add rowMode Aggregation

Before (Fixed mode):

<table:Table
    rows="{/Products}"
    visibleRowCountMode="Fixed"
    visibleRowCount="5"
    fixedRowCount="1"
    fixedBottomRowCount="2"
    rowHeight="30">
    <table:columns>...</table:columns>
</table:Table>

After:

<table:Table
    rows="{/Products}">
    <table:rowMode>
        <rowmodes:Fixed
            rowCount="5"
            fixedTopRowCount="1"
            fixedBottomRowCount="2"
            rowContentHeight="30"/>
    </table:rowMode>
    <table:columns>...</table:columns>
</table:Table>

Before (Interactive mode):

<table:Table
    rows="{/Products}"
    visibleRowCountMode="Interactive"
    visibleRowCount="10"
    rowHeight="25">

After:

<table:Table
    rows="{/Products}">
    <table:rowMode>
        <rowmodes:Interactive
            rowCount="10"
            rowContentHeight="25"/>
    </table:rowMode>

Before (Auto mode):

<table:Table
    rows="{/Items}"
    visibleRowCountMode="Auto"
    minAutoRowCount="3">

After:

<table:Table
    rows="{/Items}">
    <table:rowMode>
        <rowmodes:Auto minRowCount="3"/>
    </table:rowMode>

Fix Strategy — JavaScript

Step 1: Add RowMode Import

Add the appropriate class to sap.ui.define:

• "sap/ui/table/rowmodes/Fixed" for Fixed mode
• "sap/ui/table/rowmodes/Interactive" for Interactive mode
• "sap/ui/table/rowmodes/Auto" for Auto mode

Step 2: Replace Properties with rowMode

Before:

sap.ui.define([
    "sap/ui/table/Table"
], function(Table) {
    var oTable = new Table({
        visibleRowCountMode: "Interactive",
        visibleRowCount: 10,
        rowHeight: 25
    });
});

After:

sap.ui.define([
    "sap/ui/table/Table",
    "sap/ui/table/rowmodes/Interactive"
], function(Table, InteractiveRowMode) {
    var oTable = new Table({
        rowMode: new InteractiveRowMode({
            rowCount: 10,
            rowContentHeight: 25
        })
    });
});

Also handle setter-based patterns:

Before:

oTable.setVisibleRowCountMode("Fixed");
oTable.setVisibleRowCount(8);
oTable.setFixedRowCount(2);
oTable.setRowHeight(40);

After:

// Import: "sap/ui/table/rowmodes/Fixed"
oTable.setRowMode(new FixedRowMode({
    rowCount: 8,
    fixedTopRowCount: 2,
    rowContentHeight: 40
}));

Implementation Steps

1. Run linter with --details to identify all affected Table instances
2. For each Table, determine the RowMode class from visibleRowCountMode (default: "Fixed")
3. Safety check: Verify all deprecated properties are compatible with the chosen RowMode class
4. XML views: Add xmlns:rowmodes="sap.ui.table.rowmodes" namespace, remove deprecated properties, add <rowMode> aggregation
5. JavaScript: Add RowMode import, create RowMode instance with mapped properties, set via constructor or setRowMode()
6. Verify by re-running the linter

RowMode Properties Reference

Notes

• If visibleRowCountMode is not set, the default was "Fixed" — use rowmodes:Fixed
• The <table:rowMode> aggregation goes inside <table:Table>, alongside <table:columns>
• In XML, always use the rowmodes: namespace prefix for RowMode elements
• Both old and new APIs are synchronous — no async handling needed

Related Skills

• fix-deprecated-controls: For other no-deprecated-api errors on sap.ui.table.Table (e.g., deprecated classes, properties not related to row mode), use fix-deprecated-controls
• fix-js-globals: If the Table is instantiated via global access (e.g., new sap.ui.table.Table()), fix-js-globals handles converting to proper module imports