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() {

Home View Table

- +
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