diff --git a/pkgs/ui/src/app/home/page.tsx b/pkgs/ui/src/app/home/page.tsx
index bfcddf8..f60c2ff 100644
--- a/pkgs/ui/src/app/home/page.tsx
+++ b/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() {
diff --git a/pkgs/ui/src/components/table/index.tsx b/pkgs/ui/src/components/table/index.tsx
index cbfec7e..28ac3d8 100644
--- a/pkgs/ui/src/components/table/index.tsx
+++ b/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 { StyledTableCell, StyledTableRow } from "./style";
-import { ICustomTable, CustomTableConfiguration } from "@/types";
+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
- if (!data || data.length === 0)
- return
;
+const CustomTable = ({configuration, data}: ICustomTable) => {
+ // display empty icon in case there is no data
+ if (!data || data.length === 0)
+ return
;
- const renderTableCell = (
- value: any,
- cellKey: string,
- render?: (param: any) => void | undefined,
- ) => {
- let renderedValue = value;
+ const renderTableCell = (
+ value: any,
+ cellKey: string,
+ render?: (param: any) => void | undefined,
+ ) => {
+ let renderedValue = value;
- // cover use case if the data is an array
- if (Array.isArray(value)) renderedValue = value.join(", ");
+ // cover use case if the data is an array
+ if (Array.isArray(value)) renderedValue = value.join(", ");
- // cover use case if we want to render a component
- if (render) renderedValue = render(value);
+ // cover use case if the data is an boolean
+ if (typeof value === "boolean") renderedValue =
;
+
+ // cover use case if we want to render a component
+ if (render) renderedValue = render(value);
+
+ return (
+
+ {renderedValue}
+
+ );
+ };
return (
-
- {renderedValue}
-
+
+
+
+
+ {configuration.map((header: CustomTableConfiguration) => (
+ {header.label}
+ ))}
+
+
+
+ {data.map((data: any, rowIndex: number) => (
+
+ {configuration.map((column: CustomTableConfiguration) => {
+ const cellValue: any = data[column.key];
+ const cellKey = column.key;
+ const renderComponent = column?.render;
+ return renderTableCell(cellValue, cellKey, renderComponent);
+ })}
+
+ ))}
+
+
+
);
- };
-
- return (
-
-
-
-
- {configuration.map((header: CustomTableConfiguration) => (
- {header.label}
- ))}
-
-
-
- {data.map((data: any, rowIndex: number) => (
-
- {configuration.map((column: CustomTableConfiguration) => {
- const cellValue: any = data[column.key];
- const cellKey = column.key;
- const renderComponent = column?.render;
- return renderTableCell(cellValue, cellKey, renderComponent);
- })}
-
- ))}
-
-
-
- );
};
export default CustomTable;
diff --git a/pkgs/ui/src/mock/home/index.ts b/pkgs/ui/src/mock/home/index.ts
new file mode 100644
index 0000000..b92be36
--- /dev/null
+++ b/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",
+ },
+];
\ No newline at end of file