scale-data-grid + react. How to display rows with HTML cell

[kolianovich]

Scale Version
^3.0.0-beta.137

Framework and version
Vite. React+TS+SWC template.
React version: 18.2.14.
Scale without react wrapper

Hello! I started with Data Grid in my react project and faced with issues at the beginning.

First of all I was confused with error when I tried to reproduce in React sample from documentation:

Here is my React component:

function TaskListTable() {

   const heading = "Header"

   const fields = [
       {
           type: 'number',
           label: 'ID'
       },
       {
           type: 'text',
           label: 'Name',
           sortable: true
       },
       {
           type: 'date',
           label: 'Time',
           stretchWeight: 1
       }
   ];

   const rows = [
       [1, 'John', '12:30'],
       [2, 'Mary', '2:12'],
       [3, 'Patek', '16:01'],
       [4, 'Heidi', '3:15'],
       [5, 'Muhammad', '21:45']
   ];

   return (
       <>
           <scale-data-grid fields={fields} rows={rows} heading={heading} id="TaskListTable"></scale-data-grid>
       </>
   )
}

export default TaskListTable;

When I run it I get the next JS error:

As I understand to avoid this error I must convert my fields and rows objects to JSON string before pass it to data-grid. When I wrap this objects with JSON.stringify like this:

const rows = JSON.stringify([
[1, 'John', '12:30'],
[2, 'Mary', '2:12'],
[3, 'Patek', '16:01'],
[4, 'Heidi', '3:15'],
[5, 'Muhammad', '21:45']
]);

this error is gone and evrething is OK. But from my point of view this approach is very strange that I have to convert explicitly my objects to json to avoid JS errors. At least I have never faced this in others component librartes.

But the next problem occurs when I add HTMLCell to my data-grid:

function TaskListTable() {

   const heading = "Header"

   const fields = JSON.stringify([
       {
           type: 'html',
           label: 'HTML',
       },
       {
           type: 'number',
           label: 'ID'
       },
       {
           type: 'text',
           label: 'Name',
           sortable: true
       },
       {
           type: 'date',
           label: 'Time',
           stretchWeight: 1
       }
   ]);

   const rows = JSON.stringify([
       [document.createElement('scale-icon-service-support'), 1, 'John', '12:30'],
       [document.createElement('scale-icon-service-support'), 2, 'Mary', '2:12'],
       [document.createElement('scale-icon-service-support'), 3, 'Patek', '16:01'],
       [document.createElement('scale-icon-service-support'), 4, 'Heidi', '3:15'],
       [document.createElement('scale-icon-service-support'), 5, 'Muhammad', '21:45']
   ]);


   return (
       <>
           <scale-data-grid fields={fields} rows={rows} heading={heading} id="TaskListTable"></scale-data-grid>
       </>
   )
}

export default TaskListTable;

In this case I receive the next JS error:

As result I am not able to create simple data-grid with HTML Cell on React. Could you please to support me and explain what is wrong with my code?

Thanks a lot!

[tshimber]

hi @kolianovich ! stringify looks weird. As I see here in docs, where are limitations of using Scale with React https://telekom.github.io/scale/?path=/docs/setup-info-scale-and-react--page and the one with array as props described as well. You should use some proxy to go over this limitations, e.g. @telekom/scale-components-react, as described in article.

PS the issue is old, maybe you could tell how you managed it at the end?