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!