fix: serialize object table cells using the JSON serializer

Closes #1139
bpmn-io · Sep 10, 2024 · bd995e1 · bd995e1
1 parent f008461
commit bd995e1
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 1 deletion.
diff --git a/packages/form-js-viewer/src/render/components/form-fields/Table.js b/packages/form-js-viewer/src/render/components/form-fields/Table.js
@@ -58,6 +58,14 @@ export function Table(props) {
     setCurrentPage(0);
   }, [rowCount, sortBy]);
 
+  const serializeCellData = (cellData) => {
+    if (cellData !== null && typeof cellData === 'object') {
+      return JSON.stringify(cellData);
+    }
+
+    return cellData;
+  };
+
   /** @param {string} key */
   function toggleSortBy(key) {
     setSortBy((current) => {
@@ -141,7 +149,7 @@ export function Table(props) {
                     <tr key={index} class="fjs-table-tr">
                       {columnKeys.map((key) => (
                         <td key={key} class="fjs-table-td">
-                          {row[key]}
+                          {serializeCellData(row[key])}
                         </td>
                       ))}
                     </tr>

diff --git a/packages/form-js-viewer/test/spec/render/components/form-fields/Table.spec.js b/packages/form-js-viewer/test/spec/render/components/form-fields/Table.spec.js
@@ -152,6 +152,55 @@ describe('Table', function () {
     expect(secondRow.querySelectorAll('.fjs-table-td')[2].textContent).to.eql('2020-01-02');
   });
 
+  it('should serialize object table cells', function () {
+    // when
+    const DATA = [
+      {
+        id: 1,
+        name: { foo: 'bar' },
+        date: ['2020-01-01', '2020-01-02'],
+      },
+      {
+        id: { value: 2 },
+        name: 'bar',
+        date: null,
+      },
+    ];
+
+    const { container } = createTable({
+      initialData: {
+        data: DATA,
+      },
+      field: {
+        ...defaultField,
+        columns: MOCK_COLUMNS,
+        dataSource: '=data',
+      },
+      services: {
+        expressionLanguage: {
+          isExpression: () => true,
+          evaluate: () => DATA,
+        },
+      },
+    });
+
+    // then
+    const bodyRows = container.querySelectorAll('.fjs-table-body .fjs-table-tr');
+    expect(bodyRows).to.have.length(2);
+
+    const [firstRow, secondRow] = bodyRows;
+
+    expect(firstRow.querySelectorAll('.fjs-table-td')).to.have.length(3);
+    expect(firstRow.querySelectorAll('.fjs-table-td')[0].textContent).to.eql('1');
+    expect(firstRow.querySelectorAll('.fjs-table-td')[1].textContent).to.eql('{"foo":"bar"}');
+    expect(firstRow.querySelectorAll('.fjs-table-td')[2].textContent).to.eql('["2020-01-01","2020-01-02"]');
+
+    expect(secondRow.querySelectorAll('.fjs-table-td')).to.have.length(3);
+    expect(secondRow.querySelectorAll('.fjs-table-td')[0].textContent).to.eql('{"value":2}');
+    expect(secondRow.querySelectorAll('.fjs-table-td')[1].textContent).to.eql('bar');
+    expect(secondRow.querySelectorAll('.fjs-table-td')[2].textContent).to.eql('');
+  });
+
   it('should have pagination', function () {
     // when
     const DATA = [