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

@@ -9,6 +9,7 @@ import Paper from "@mui/material/Paper";
 import {NoDataOverlay} from "@/components/noDataOverlay";
 import {StyledTableCell, StyledTableRow} from "./style";
 import {ICustomTable, CustomTableConfiguration} from "@/types";
+import {Checkbox} from "@mui/material";
 
 const CustomTable = ({configuration, data}: ICustomTable) => {
     // display empty icon in case there is no data
@@ -25,6 +26,9 @@ const CustomTable = ({ configuration, data }: ICustomTable) => {
         // cover use case if the data is an array
         if (Array.isArray(value)) renderedValue = value.join(", ");
 
+        // cover use case if the data is an boolean
+        if (typeof value === "boolean") renderedValue = <Checkbox disabled checked={value}/>;
+
         // cover use case if we want to render a component
         if (render) renderedValue = render(value);
 

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",
+    },
+];