Update headerCell model

.gitignore

@@ -34,4 +34,7 @@ yarn-error.log*
 .vercel
 
 # IDLE
-.idea
+.idea
+
+# DOC
+Challenge.md

components/Sheets/Content.js

@@ -2,33 +2,35 @@ import { EditableInput } from './EditableInput';
 import styles from './Sheets.module.css';
 
 export function SheetContent({ rows, cells, editableCell, setEditableCell, handleCellValue }) {
-    const nonEditableCells = ['id'];
-
     /** Generate unique key. */
-    const generateUniqueKey = (main, child) => {
-        return `${main}.${child}`;
+    const generateUniqueKey = (key, index) => {
+        return `${key}.${index}`;
     };
 
     return (
         <div className={styles.tableContent}>
             {rows.map((row, rowIndex) => (
                 <div className={styles.tableContentRows} key={rowIndex}>
                     {cells.map((cell) => (
-                        <div className={styles.tableContentCell} key={cell.name}>
-                            {!nonEditableCells.includes(cell.name) &&
-                            editableCell === generateUniqueKey(cell.name, rowIndex) ? (
+                        <div className={styles.tableContentCell} key={cell.key}>
+                            {cell.editable && editableCell === generateUniqueKey(cell.key, rowIndex) ? (
                                 <EditableInput
-                                    value={row[cell.name]}
-                                    onChange={({target}) => handleCellValue(generateUniqueKey(cell.name, rowIndex), target.value)}
-                                    onFocus={(event => event.target.select())}
+                                    value={row[cell.key]}
+                                    onChange={({ target }) =>
+                                        handleCellValue(
+                                            generateUniqueKey(cell.key, rowIndex),
+                                            target.value
+                                        )
+                                    }
+                                    onFocus={(event) => event.target.select()}
                                 />
                             ) : (
                                 <div
                                     className={styles.tableContentCellValue}
                                     onDoubleClick={() =>
-                                        setEditableCell(generateUniqueKey(cell.name, rowIndex))
+                                        setEditableCell(generateUniqueKey(cell.key, rowIndex))
                                     }>
-                                    {row[cell.name]}
+                                    {row[cell.key]}
                                 </div>
                             )}
                         </div>

components/Sheets/Header.js

@@ -7,7 +7,7 @@ export function SheetHeader({cells}) {
                 {
                     cells.map(cell => (
                         <div className={styles.tableHeaderCell} key={cell.name}>
-                            {cell.name.replace(/([a-z0-9])([A-Z])/g, '$1 $2')}
+                            {cell.name}
                         </div>
                     ))
                 }

components/Sheets/Sheets.module.css

@@ -13,7 +13,6 @@
 }
 
 .tableHeaderCell {
-    text-transform: capitalize;
     background: #f9f9f9;
     padding: 8px;
     font-weight: 700;

pages/sheets/index.js

@@ -21,7 +21,14 @@ const mockEmployees = [
     employee(),
 ]
 
-const headerCells = Object.keys(employee()).map((cell) => ({ name: cell }));
+const headerCells = [
+    {key: 'id', name: 'ID', type: 'text', editable: false,filterable: true  },
+    {key: 'name', name: 'Name', type: 'text', editable: true, filterable: true  },
+    {key: 'surname', name: 'Surname', type: 'text', editable: true, filterable: true  },
+    {key: 'dateOfBirth', name: 'Date of birth', type: 'text', editable: true, filterable: true  },
+    {key: 'position', name: 'Position', type: 'text', editable: true, filterable: true  },
+    {key: 'phone', name: 'Phone', type: 'text', editable: true, filterable: true  },
+];
 
 export default function Sheets() {
     const [editableCell, setEditableCell] = useState(null);