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
index 98853740d..3e64b9881 100644
--- 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) {
{columnKeys.map((key) => (
- {row[key]}
+ {serializeCellData(row[key])}
|
))}
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
index ee546251b..75f2ae538 100644
--- 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 = [