New table logic

Use hashmap to match column and values.
Add new checkbox button if selectable prop is passed

frontend/src/components/Table.tsx

 // import './Table.css'
 
+
+export type Column = {
+  name: string,
+  columnType: "boolean" | "number" | "string";
+}
+
+export type Value = {
+  columnName: string,
+  value: any
+}
+
 type TableParams = {
-  className: string
-  columns: string[],
-  data: any[][],
+  columns: Column[],
+  data: Value[][],
+  selectable?: boolean
   onClick?: (element: React.MouseEvent<HTMLTableRowElement>, index: number) => void
 }
 
-export const Table = ({ className, columns, data, onClick }: TableParams) => {
+export const Table = ({ columns, data, selectable = false, onClick }: TableParams) => {
+  const thClassName = "border-b font-medium p-4 first:pl-8 last:pr-8 pt-0 pb-3 \
+    text-left text-slate-800";
   const Header = () => {
     return (
       <thead>
         <tr >
+          {selectable ? <th></th> : null}
           {columns.map(column =>
             <th
-              className="border-b font-medium p-4 first:pl-8 last:pr-8 pt-0 pb-3 
-                text-left text-slate-800"
-              key={column}>
-              {column}
+              className={thClassName}
+              key={column.name}>
+              {column.name}
             </th>)}
         </tr>
       </thead>
@@ -25,21 +38,30 @@ export const Table = ({ className, columns, data, onClick }: TableParams) => {
   };
 
   const Body = () => {
+    const columnNames = columns.map(col => col.name);
+    const rows = data.map(row => {
+      return row.reduce((acc: any, item) => {
+        acc[item.columnName] = item.value;
+        return acc;
+      }, new Map());
+    })
+
     return (
       <tbody className="bg-white">
         {
-          data.map((row, index) => {
+          rows.map((row, rowIndex) => {
             return <tr
               className="hover:bg-slate-200 text-slate-500
                hover:text-slate-800 hover:cursor-pointer"
-              onClick={(el) => onClick?.(el, index)}
-              key={index}>
-              {row.map((el, index) => {
+              onClick={(el) => onClick?.(el, rowIndex)}
+              key={rowIndex}>
+              {selectable ? <th className="pl-4"><input type="checkbox"></input></th> : null}
+              {columnNames.map((colName, index) => {
                 return <td
                   className="border-b border-slate-100 
                   p-4 first:pl-8 last:pr-8 text-left"
                   key={index}>
-                  {el}
+                  {row[colName]}
                 </td>
               })}
             </tr>;

frontend/src/routes/Home/index.tsx

 import { Page } from '../../components/Page';
-import { Table } from '../../components/Table';
+import { Table, Column, Value } from '../../components/Table';
 import { useContext } from 'react';
 import { BucketInfo } from '../../models/bucket';
 import { getHumanSize, parseReadWriteAccess } from '../../commons/utils';
 import { BucketsListContext } from '../../services/BucketListContext';
+import { useNavigate } from 'react-router-dom';
 import './index.css';
 
 export const Home = () => {
+  const navigate = useNavigate();
+  const bucketList = useContext(BucketsListContext);
 
-  const onClick = (element: React.MouseEvent<HTMLTableRowElement>, index: number) => {
-    const bucketName = element.currentTarget.firstChild?.textContent;
-    console.log(bucketName);
-  }
-
-  const columns = ["Bucket", "Objects", "Size", "Access"];
+  const columns: Column[] = [
+    { name: "Bucket", columnType: "string" },
+    { name: "Objects", columnType: "string" },
+    { name: "Size", columnType: "string" },
+    { name: "Access", columnType: "string" }
+  ];
 
-  const bucketList = useContext(BucketsListContext).map((bucket: BucketInfo) => {
+  const tableData = bucketList.map((bucket: BucketInfo) => {
     return [
-      bucket.name,
-      bucket.objects,
-      getHumanSize(bucket.size),
-      parseReadWriteAccess(bucket.rw_access)
+      { columnName: "Bucket", value: bucket.name },
+      { columnName: "Objects", value: bucket.objects },
+      { columnName: "Size", value: getHumanSize(bucket.size) },
+      { columnName: "Access", value: parseReadWriteAccess(bucket.rw_access) }
     ]
   });
 
+  const onClick = (_: React.MouseEvent<HTMLTableRowElement>, index: number) => {
+    const bucketName = bucketList[index].name;
+    navigate("/" + bucketName)
+    console.log(bucketName);
+  }
+
   return (
     <Page title="Home">
       <div className="Home">
         <div className="flex place-content-center">
-          <Table
-            className="table-auto w-2/3"
-            columns={columns}
-            data={bucketList}
-            onClick={onClick}
-          />
+          <div className="flex w-2/3">
+            <Table
+              columns={columns}
+              data={tableData}
+              onClick={onClick}
+            />
+          </div>
         </div>
       </div>
     </Page>