Fix case sensitive for cell values (#721)

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## Not released
 
+- Fix: table widget was not showing data due to case sensitive [#721](https://github.com/CartoDB/carto-react/pull/721)
 - Supporting for `client` parameter for Widgets API calls [#722](https://github.com/CartoDB/carto-react/pull/722)
 
 ## 2.1

packages/react-ui/__tests__/widgets/TableWidgetUI.test.js

@@ -73,4 +73,17 @@ describe('TableWidgetUI', () => {
       expect(mockOnSetSortDirection).toHaveBeenCalledWith('desc');
     });
   });
+
+  describe('case insensitive', () => {
+    test('should render rows properly', () => {
+      const keptFields = ['address', 'city'];
+      const filteredColumns = columns
+        .filter((col) => keptFields.includes(col.field))
+        .map((c) => ({ ...c, field: c.field.toUpperCase() }));
+      render(<Widget columns={filteredColumns} />);
+
+      const row = rows[1];
+      expect(screen.queryByText(row.address)).toBeInTheDocument();
+    });
+  });
 });

packages/react-ui/src/widgets/TableWidgetUI/TableWidgetUI.js

@@ -166,18 +166,22 @@ function TableBodyComponent({ columns, rows, onRowClick }) {
             hover={!!onRowClick}
             onClick={() => onRowClick && onRowClick(row)}
           >
-            {columns.map(
-              ({ field, headerName, align, component }) =>
+            {columns.map(({ field, headerName, align, component }) => {
+              const cellValue = Object.entries(row).find(([key]) => {
+                return key.toUpperCase() === field.toUpperCase();
+              })?.[1];
+              return (
                 (headerName || field) && (
                   <TableCellStyled
                     key={`${rowKey}_${field}`}
                     scope='row'
                     align={align || 'left'}
                   >
-                    {component ? component(row[field]) : row[field]}
+                    {component ? component(cellValue) : cellValue}
                   </TableCellStyled>
                 )
-            )}
+              );
+            })}
           </TableRowStyled>
         );
       })}