Getting Error while importing TableRenderer

[RajkumarAmbhu]

Hello Together, I am getting the error while loading TableRenderer Class from sap/m/TableRenderer using the import statement in SAPUI5 Typescript. Code: import TableRenderer from "sap/m/TableRenderer"; Error: 'TableRenderer' is declared but its value is never read.ts(6133) Cannot find module 'sap/m/TableRenderer'. Did you mean to set the 'moduleResolution' option to 'node', or to add aliases to the 'paths' option?ts(2792) Kindly check it and help me, please.

[petermuessig]

Hi @RajkumarAmbhu ,

a first question upfront: the issue itself indicates that you import the sap/m/TableRenderer but you don't use it in your code. Why do you import the TableRenderer? Is it a custom control which extends the sap/m/Table?

Thanks and best regards, Peter

[RajkumarAmbhu]

Hello Peter, Yes, It is a custom control that extends the sap/m/Table, and in the renderer, we would like to add the additional div as a wrapper to the table and override the renderListStartAttributes and renderListEndAttributes functionality of the Table Renderer for the additional changes.

In JavaScript, The code looks like the below. sap.ui.define([ "sap/m/Table", "sap/m/TableRenderer", "sap/ui/core/Renderer" ], (Table, tableRenderer, Renderer)=>{ const oRenderer = Renderer.extends(TableRenderer);

oRenderer.renderListStartAttributes = function (oRm) { oRm.write('

'); TableRenderer.renderListStartAttributes.apply(null, arguments); };

oRenderer.renderListEndAttributes = function (oRm) { TableRenderer.renderListEndAttributes.apply(null, arguments); oRm.write('

'); } return Table.extend("com.test.suite.OverviewTable, { metedata:{ // Properties // Aggregations // Events }, renderer: oRenderer, // Custom Implementation }); } Reference: https://answers.sap.com/questions/181984/weird-behaviour-when-defining-renderer-in-sapmtabl.html

Now we tried to enhance the above implementation with typescript. But it gives error like Cannot find module 'sap/m/TableRenderer'.

I have searched the TableRenderer in the sap.m.d.ts file of @sapui5/ts-types-esm in the node modules, but I didn't find the table renderer-related code, and only InputRenderer existed.

Could you kindly check it and help me, please.

Thanks and Best Regards, Rajkumar Ambhu

[codeworrior]

As explained in #340, #349 and #350, we intentionally do not expose private modules in the TypeScript definitions as we don't want to encourage the use of such internal code.

This also applies to the TableRenderer and its renderListStartAttributes and renderListEndAttributes methods. They are not intended to be used in custom code outside SAPUI5. They might be changed or removed in future versions of UI5 (not very likely for these methods, but that's the compatibility contract: if it is not public/protected, don't rely on it).

Well, but this already applies to your existing code, before the TypeScript migration.

Regarding your scenario, there's a way to extend the Table's renderer without importing it. The renderer property in a class definition can be an object which then will be used to create a new renderer, derived from the renderer of the base class. So you can extend TableRenderer without naming it. In your case, an additional hurdle is the necessary call to the super implementation of the two hook methods.

Table.extend("com.test.suite.OverviewTable", {
    metadata:{
        /* your custom settings here (if any) */
    },
    renderer: {
        apiVersion: 2,     // consider to switch to apiVersion 2, see details below this example
        renderListStartAttributes: function (oRm, oControl) {
            oRm.openStart("div").openEnd();       // do no longer use "write"
            Table.getMetadata().getRenderer().renderListStartAttributes(oRm, oControl);
        },
        renderListStartAttributes: function (oRm, oControl) {
            Table.getMetadata().getRenderer().renderListEndAttributes(oRm, oControl);
            oRm.close("div");
        },
   },
   /* any further custom code goes here (if any) */ 
});

In the example, I've also replaced the deprecated string-based rendering APIs with the more modern semantic rendering APIs. If you consider to switch to those APIs, please first read the RenderManager documentation here to learn about constraint that must be obeyed ("Contract for Renderer.apiVersion 2");

[RajkumarAmbhu]

Hello Frank,

Thank you for giving a detailed explanation of Table Renderer usage with modern semantic rendering APIs. I tried with the above renderer code and it is working fine,

Best Regards, Rajkumar Ambhu

[codeworrior]

Glad to hear that. I guess we can close this issue then.