ScaleDataGrid not displayed when there is null value in rows prop

[VukDju]

Scale Version
3.0.0-beta.56

Framework and version
React 18.3.1 with @telekom/scale-components-react

Current Behavior
When there is a null value within one of the arrays of the rows property, DataGrid is not displayed at all.

Expected Behavior
Instead of not displaying the DataGrid at all when there is a null value in our data, the table cell containing the null value should be rendered with some specific styling, so that the user knows we are missing data.

An example of how it should like like when there is a null data can be seen on the image bellow:

Code Reproduction
Try it by setting prop rows on this demo page to variable rowsMockupWithNulls and reload the preview:

ScaleDataGrid not working when null data is present, Scale and React18 with Wrapper Package

Additional context
Error log from developer console:

hook.js:608 TypeError: Cannot read properties of null (reading 'toString')
    at eval (scale-data-grid.entry.js:746:39)
    at Array.forEach (<anonymous>)
    at getDefaultLongestContent (scale-data-grid.entry.js:745:10)
    at eval (scale-data-grid.entry.js:1133:23)
    at Array.map (<anonymous>)
    at DataGrid.renderAutoWidthCheck (scale-data-grid.entry.js:1128:225)
    at DataGrid.renderTable (scale-data-grid.entry.js:1110:19)
    at DataGrid.render (scale-data-grid.entry.js:1301:634)
    at callRender (index-f2e5998d.js:1173:29)
    at updateComponent (index-f2e5998d.js:1147:9) 

hook.js:608 TypeError: Cannot set properties of null (setting 'applyResponsiveClasses')
    at DataGrid.addResizeObserver (scale-data-grid.entry.js:928:50)
    at DataGrid.componentDidLoad (scale-data-grid.entry.js:619:10)
    at safeCall (index-f2e5998d.js:1258:36)
    at postUpdateComponent (index-f2e5998d.js:1212:13)
    at postUpdate (index-f2e5998d.js:1160:34)
    at updateComponent (index-f2e5998d.js:1162:13)
    at eval (index-f2e5998d.js:1134:32)
    at then (index-f2e5998d.js:1267:61)
    at dispatchHooks (index-f2e5998d.js:1134:12)
    at Array.dispatch (index-f2e5998d.js:1106:28) undefined

[NOMADE55]

I can work on this one. I'll provide a fix in short.

[VukDju]

The problem persists if the value in the table cell is undefined also. In addition to that, same error appears for columns with following types: 'date', 'number', 'text'.

[NOMADE55]

@VukDju do you have an example of this not working with date, number, and text?

Because I've seen this only breaking with undefined and null.
This happens because it tries to transform to string the content's cell. undefined and null can't be transformed to string hence the issue.

[VukDju]

@NOMADE55 I already gave an example for text column in the first post for this issue.

Here is the example of component crashing for number:
Number column null - ScaleDataGrid crashes
Date colum null - ScaleDataGrid crashes

[NOMADE55]

@VukDju the issue comes from the null/undefined value, disregarding it's type.

A method within the component makes calculation on which cell has the longer content. For this, the values are transformed to string, but this is not possible with null or undefined values.

I've pushed a PR to fix this: #2377

[VukDju]

@NOMADE55 Thank you for trying to solve this issue. I have to say that although your suggestion will prevent the ScaleDataGrid from crashing, I think additional changes need to be made on the UX side, as I described in my first post. The goal should be that the user can distinct between a null or missing value and a string containing blanks like this ' '.

[NOMADE55]

@VukDju prefacing that I'm just a random contributor and not having much to say in the future of the framework; the PR will fix the crashing issue, The UX part is something that might require a new Issue.

• null and undefined values are being rendered empty, so their length must be zero, and this is what the PR achieves.
• I'm on the team that null and undefined values should be rendered empty as they represent nothing.