added error recognition in spreadsheet

frontend/src/components/SpreadsheetTable.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper, Tooltip } from '@mui/material';
+
+const SpreadsheetTable = ({ raw_data, errors }) => {
+    const getErrorForCell = (rowIdx, colIdx) => {
+        return errors.find(e => e.row === rowIdx && e.cell === colIdx);
+    };
+
+    return (
+        <TableContainer component={Paper}>
+            <Table>
+                <TableHead>
+                    <TableRow>
+                        {raw_data.length > 0 && Object.keys(raw_data[0].data).map((col, colIdx) => (
+                            <TableCell key={colIdx}>{`Column ${colIdx + 1}`}</TableCell>
+                        ))}
+                    </TableRow>
+                </TableHead>
+                <TableBody>
+                    {raw_data.map((rowItem, rowIndex) => (
+                        <TableRow key={rowIndex}>
+                            {Object.values(rowItem.data).map((cellValue, cellIndex) => {
+                                const cellError = getErrorForCell(rowItem.row_num, cellIndex);
+                                return (
+                                    <TableCell
+                                        key={cellIndex}
+                                        style={{ backgroundColor: cellError ? 'red' : 'white' }}
+                                    >
+                                        <Tooltip title={cellError ? cellError.message : ''} arrow>
+                                            <span>{cellValue}</span>
+                                        </Tooltip>
+                                    </TableCell>
+                                )
+                            })}
+                        </TableRow>
+                    ))}
+                </TableBody>
+            </Table>
+        </TableContainer>
+    );
+};
+
+export default SpreadsheetTable;