[Homepage] Table View

- implemented home view table and added checkbox component

pkgs/ui/src/app/home/page.tsx

@@ -3,6 +3,7 @@
 import { NoDataOverlay } from "@/components/noDataOverlay";
 import SummaryDetails from "@/components/summary_card";
 import CustomTable from "@/components/table";
+import {HomeDummyData, HomeTableConfig} from "@/mock/home";
 
 export default function Home() {
   return (
@@ -15,7 +16,7 @@ export default function Home() {
 
       <div>
         <h4>Home View Table</h4>
-        <CustomTable data={[]} configuration={[]} />
+        <CustomTable data={HomeDummyData} configuration={HomeTableConfig} />
       </div>
 
       <div>

pkgs/ui/src/components/table/index.tsx

@@ -6,60 +6,64 @@ import TableHead from "@mui/material/TableHead";
 import TableRow from "@mui/material/TableRow";
 import Paper from "@mui/material/Paper";
 
-import { NoDataOverlay } from "@/components/noDataOverlay";
+import {NoDataOverlay} from "@/components/noDataOverlay";
-import { StyledTableCell, StyledTableRow } from "./style";
+import {StyledTableCell, StyledTableRow} from "./style";
-import { ICustomTable, CustomTableConfiguration } from "@/types";
+import {ICustomTable, CustomTableConfiguration} from "@/types";
+import {Checkbox} from "@mui/material";
 
-const CustomTable = ({ configuration, data }: ICustomTable) => {
+const CustomTable = ({configuration, data}: ICustomTable) => {
-  // display empty icon in case there is no data
+    // display empty icon in case there is no data
-  if (!data || data.length === 0)
+    if (!data || data.length === 0)
-    return <NoDataOverlay label="No Activity yet" />;
+        return <NoDataOverlay label="No Activity yet"/>;
 
-  const renderTableCell = (
+    const renderTableCell = (
-    value: any,
+        value: any,
-    cellKey: string,
+        cellKey: string,
-    render?: (param: any) => void | undefined,
+        render?: (param: any) => void | undefined,
-  ) => {
+    ) => {
-    let renderedValue = value;
+        let renderedValue = value;
 
-    // cover use case if the data is an array
+        // cover use case if the data is an array
-    if (Array.isArray(value)) renderedValue = value.join(", ");
+        if (Array.isArray(value)) renderedValue = value.join(", ");
 
-    // cover use case if we want to render a component
+        // cover use case if the data is an boolean
-    if (render) renderedValue = render(value);
+        if (typeof value === "boolean") renderedValue = <Checkbox disabled checked={value}/>;
+
+        // cover use case if we want to render a component
+        if (render) renderedValue = render(value);
+
+        return (
+            <StyledTableCell key={cellKey} align="left">
+                {renderedValue}
+            </StyledTableCell>
+        );
+    };
 
     return (
-      <StyledTableCell key={cellKey} align="left">
+        <TableContainer component={Paper}>
-        {renderedValue}
+            <Table sx={{minWidth: 700}} aria-label="customized table">
-      </StyledTableCell>
+                <TableHead>
+                    <TableRow>
+                        {configuration.map((header: CustomTableConfiguration) => (
+                            <StyledTableCell key={header.key}>{header.label}</StyledTableCell>
+                        ))}
+                    </TableRow>
+                </TableHead>
+                <TableBody>
+                    {data.map((data: any, rowIndex: number) => (
+                        <StyledTableRow key={rowIndex}>
+                            {configuration.map((column: CustomTableConfiguration) => {
+                                const cellValue: any = data[column.key];
+                                const cellKey = column.key;
+                                const renderComponent = column?.render;
+                                return renderTableCell(cellValue, cellKey, renderComponent);
+                            })}
+                        </StyledTableRow>
+                    ))}
+                </TableBody>
+            </Table>
+        </TableContainer>
     );
-  };
-
-  return (
-    <TableContainer component={Paper}>
-      <Table sx={{ minWidth: 700 }} aria-label="customized table">
-        <TableHead>
-          <TableRow>
-            {configuration.map((header: CustomTableConfiguration) => (
-              <StyledTableCell key={header.key}>{header.label}</StyledTableCell>
-            ))}
-          </TableRow>
-        </TableHead>
-        <TableBody>
-          {data.map((data: any, rowIndex: number) => (
-            <StyledTableRow key={rowIndex}>
-              {configuration.map((column: CustomTableConfiguration) => {
-                const cellValue: any = data[column.key];
-                const cellKey = column.key;
-                const renderComponent = column?.render;
-                return renderTableCell(cellValue, cellKey, renderComponent);
-              })}
-            </StyledTableRow>
-          ))}
-        </TableBody>
-      </Table>
-    </TableContainer>
-  );
 };
 
 export default CustomTable;

pkgs/ui/src/mock/home/index.ts

@@ -0,0 +1,47 @@
+// HOME - Table Data
+
+export const HomeDummyData = [
+    {
+        entity_name: "C1",
+        entity_DID: "did:sov:test:1234",
+        network: "Carlo's Home Network",
+        ip_address: "127.0.0.1",
+        roles: "service repository, service consumer, DLG",
+        visible: true
+    },
+    {
+        entity_name: "C2",
+        entity_DID: "did:sov:test:4567",
+        network: "Steve's Home Network",
+        ip_address: "127.0.0.1",
+        roles: "service repository, service consumer, DLG",
+        visible: false
+    }
+];
+
+export const HomeTableConfig = [
+    {
+        key: "entity_name",
+        label: "Entity name",
+    },
+    {
+        key: "entity_DID",
+        label: "Entity DID",
+    },
+    {
+        key: "network",
+        label: "Network",
+    },
+    {
+        key: "ip_address",
+        label: "IP address",
+    },
+    {
+        key: "roles",
+        label: "Roles",
+    },
+    {
+        key: "visible",
+        label: "Visible",
+    },
+];