diff --git a/pkgs/ui/src/app/home/page.tsx b/pkgs/ui/src/app/home/page.tsx index f60c2ff..37e51de 100644 --- a/pkgs/ui/src/app/home/page.tsx +++ b/pkgs/ui/src/app/home/page.tsx @@ -3,7 +3,7 @@ import { NoDataOverlay } from "@/components/noDataOverlay"; import SummaryDetails from "@/components/summary_card"; import CustomTable from "@/components/table"; -import {HomeDummyData, HomeTableConfig} from "@/mock/home"; +import { HomeDummyData, HomeTableConfig } from "@/mock/home"; export default function Home() { return ( diff --git a/pkgs/ui/src/components/table/index.tsx b/pkgs/ui/src/components/table/index.tsx index 28ac3d8..36714df 100644 --- a/pkgs/ui/src/components/table/index.tsx +++ b/pkgs/ui/src/components/table/index.tsx @@ -6,64 +6,65 @@ 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 {Checkbox} from "@mui/material"; +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 the data is an boolean - if (typeof value === "boolean") renderedValue = ; + // 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} - - ); - }; + // cover use case if we want to render a component + if (render) renderedValue = render(value); 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); - })} - - ))} - -
-
+ + {renderedValue} + ); + }; + + 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 index b92be36..ccff693 100644 --- a/pkgs/ui/src/mock/home/index.ts +++ b/pkgs/ui/src/mock/home/index.ts @@ -1,47 +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 - } + { + 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 + { + 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", + }, +];