Replace name with property

src/QueryBuilder/ResultViewer/TableCell/TableCell.js

@@ -8,12 +8,16 @@ export const TableCell = ({ properties, values }) => {
   return (
     <table className={css.TableCell}>
       <thead>
-        <tr>{properties?.map((cell) => <th key={cell.name}>{cell.labelAlias}</th>)}</tr>
+        <tr>{properties?.map((cell) => <th key={cell.property}>{cell.labelAlias}</th>)}</tr>
       </thead>
       <tbody>
         {tableBodyRows.map((row, index) => (
           <tr key={index}>
-            {properties?.map((cell) => <td style={{ width: `${100 / properties.length}%` }} key={cell.name}>{row[cell.name]}</td>)}
+            {properties?.map((cell) => (
+              <td key={cell.property} style={{ width: `${100 / properties.length}%` }}>
+                {row[cell.property]}
+              </td>
+            ))}
           </tr>
         ))}
       </tbody>
@@ -22,6 +26,6 @@ export const TableCell = ({ properties, values }) => {
 };
 
 TableCell.propTypes = {
-  properties: PropTypes.object,
+  properties: PropTypes.arrayOf(PropTypes.object),
   values: PropTypes.string,
 };

src/QueryBuilder/ResultViewer/TableCell/TableCell.test.js

@@ -0,0 +1,76 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { TableCell } from './TableCell';
+
+describe('TableCell component', () => {
+  const properties = [
+    {
+      'name': 'code',
+      'dataType': {
+        'dataType': 'stringType',
+      },
+      'labelAlias': 'Code',
+      'property': 'code',
+    },
+    {
+      'name': 'distribution_type',
+      'dataType': {
+        'dataType': 'stringType',
+      },
+      'labelAlias': 'Distribution type',
+      'property': 'distributionType',
+    },
+    {
+      'name': 'encumbrance',
+      'dataType': {
+        'dataType': 'rangedUUIDType',
+      },
+      'labelAlias': 'Encumbrance',
+      'property': 'encumbrance',
+    },
+    {
+      'name': 'fund_id',
+      'dataType': {
+        'dataType': 'rangedUUIDType',
+      },
+      'labelAlias': 'Fund ID',
+      'property': 'fundId',
+    },
+    {
+      'name': 'value',
+      'dataType': {
+        'dataType': 'numberType',
+      },
+      'labelAlias': 'Value',
+      'property': 'value',
+    },
+  ];
+
+  const values = '[{"code": "STATE-MONOSER", "value": 100.0, "fundId": "bbd4a5e1-c9f3-44b9-bfdf-d184e04f0ba0", "encumbrance": "eb506834-6c70-4239-8d1a-6414a5b08010", "distributionType": "percentage"}]';
+
+  it('renders table with correct properties and values', () => {
+    const { getByText } = render(<TableCell properties={properties} values={values} />);
+
+    properties.forEach(property => {
+      const label = getByText(property.labelAlias);
+
+      expect(label).toBeInTheDocument();
+    });
+
+    const codeValue = getByText('STATE-MONOSER');
+
+    expect(codeValue).toBeInTheDocument();
+
+    const encumbranceValue = getByText('eb506834-6c70-4239-8d1a-6414a5b08010');
+
+    expect(encumbranceValue).toBeInTheDocument();
+
+    const fundIdValue = getByText('bbd4a5e1-c9f3-44b9-bfdf-d184e04f0ba0');
+
+    expect(fundIdValue).toBeInTheDocument();
+
+    const numberValue = getByText('100');
+
+    expect(numberValue).toBeInTheDocument();
+  });
+});