From f92461de2cfe39aed8cee55ca620d5a1bfa1a27d Mon Sep 17 00:00:00 2001 From: sara-pervana Date: Tue, 21 Nov 2023 17:12:21 +0100 Subject: [PATCH 1/2] added custom table component - again --- pkgs/ui/src/components/table/index.tsx | 66 ++++++++++++++++++++++++++ pkgs/ui/src/components/table/style.tsx | 23 +++++++++ pkgs/ui/src/types/index.ts | 10 ++++ 3 files changed, 99 insertions(+) create mode 100644 pkgs/ui/src/components/table/index.tsx create mode 100644 pkgs/ui/src/components/table/style.tsx create mode 100644 pkgs/ui/src/types/index.ts diff --git a/pkgs/ui/src/components/table/index.tsx b/pkgs/ui/src/components/table/index.tsx new file mode 100644 index 0000000..0b389cb --- /dev/null +++ b/pkgs/ui/src/components/table/index.tsx @@ -0,0 +1,66 @@ +import React from "react"; +import Table from '@mui/material/Table'; +import TableBody from '@mui/material/TableBody'; +import TableContainer from '@mui/material/TableContainer'; +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"; + +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; + + // 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); + + return ( + + {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; \ No newline at end of file diff --git a/pkgs/ui/src/components/table/style.tsx b/pkgs/ui/src/components/table/style.tsx new file mode 100644 index 0000000..9785f80 --- /dev/null +++ b/pkgs/ui/src/components/table/style.tsx @@ -0,0 +1,23 @@ +import { styled } from '@mui/material/styles'; +import TableCell, { tableCellClasses } from '@mui/material/TableCell'; +import TableRow from '@mui/material/TableRow'; + +export const StyledTableCell = styled(TableCell)(({ theme }) => ({ + [`&.${tableCellClasses.head}`]: { + backgroundColor: theme.palette.common.black, + color: theme.palette.common.white, + }, + [`&.${tableCellClasses.body}`]: { + fontSize: 14, + }, +})); + +export const StyledTableRow = styled(TableRow)(({ theme }) => ({ + '&:nth-of-type(odd)': { + backgroundColor: theme.palette.action.hover, + }, + // hide last border + '&:last-child td, &:last-child th': { + border: 0, + }, +})); \ No newline at end of file diff --git a/pkgs/ui/src/types/index.ts b/pkgs/ui/src/types/index.ts new file mode 100644 index 0000000..ca5a5fc --- /dev/null +++ b/pkgs/ui/src/types/index.ts @@ -0,0 +1,10 @@ +export interface CustomTableConfiguration { + key: string; + label: string; + render?: (param: any) => void; +} + +export interface ICustomTable { + configuration: CustomTableConfiguration[], + data: any +} \ No newline at end of file -- 2.51.0 From 72da175bc2fb0baab368c9a77028a4dfeb15a78e Mon Sep 17 00:00:00 2001 From: sara-pervana Date: Tue, 21 Nov 2023 18:04:58 +0100 Subject: [PATCH 2/2] ran format command --- pkgs/ui/src/components/table/index.tsx | 37 +++++++++++++------------- pkgs/ui/src/components/table/style.tsx | 12 ++++----- pkgs/ui/src/types/index.ts | 6 ++--- 3 files changed, 27 insertions(+), 28 deletions(-) diff --git a/pkgs/ui/src/components/table/index.tsx b/pkgs/ui/src/components/table/index.tsx index 0b389cb..cbfec7e 100644 --- a/pkgs/ui/src/components/table/index.tsx +++ b/pkgs/ui/src/components/table/index.tsx @@ -1,27 +1,29 @@ import React from "react"; -import Table from '@mui/material/Table'; -import TableBody from '@mui/material/TableBody'; -import TableContainer from '@mui/material/TableContainer'; -import TableHead from '@mui/material/TableHead'; -import TableRow from '@mui/material/TableRow'; -import Paper from '@mui/material/Paper'; +import Table from "@mui/material/Table"; +import TableBody from "@mui/material/TableBody"; +import TableContainer from "@mui/material/TableContainer"; +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"; 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) => { + return ; + 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(', ') + if (Array.isArray(value)) renderedValue = value.join(", "); // cover use case if we want to render a component if (render) renderedValue = render(value); @@ -31,8 +33,7 @@ const CustomTable = ({ configuration, data }: ICustomTable) => { {renderedValue} ); - - } + }; return ( @@ -40,9 +41,7 @@ const CustomTable = ({ configuration, data }: ICustomTable) => { {configuration.map((header: CustomTableConfiguration) => ( - - {header.label} - + {header.label} ))} @@ -60,7 +59,7 @@ const CustomTable = ({ configuration, data }: ICustomTable) => { - ) -} + ); +}; -export default CustomTable; \ No newline at end of file +export default CustomTable; diff --git a/pkgs/ui/src/components/table/style.tsx b/pkgs/ui/src/components/table/style.tsx index 9785f80..b0e5429 100644 --- a/pkgs/ui/src/components/table/style.tsx +++ b/pkgs/ui/src/components/table/style.tsx @@ -1,6 +1,6 @@ -import { styled } from '@mui/material/styles'; -import TableCell, { tableCellClasses } from '@mui/material/TableCell'; -import TableRow from '@mui/material/TableRow'; +import { styled } from "@mui/material/styles"; +import TableCell, { tableCellClasses } from "@mui/material/TableCell"; +import TableRow from "@mui/material/TableRow"; export const StyledTableCell = styled(TableCell)(({ theme }) => ({ [`&.${tableCellClasses.head}`]: { @@ -13,11 +13,11 @@ export const StyledTableCell = styled(TableCell)(({ theme }) => ({ })); export const StyledTableRow = styled(TableRow)(({ theme }) => ({ - '&:nth-of-type(odd)': { + "&:nth-of-type(odd)": { backgroundColor: theme.palette.action.hover, }, // hide last border - '&:last-child td, &:last-child th': { + "&:last-child td, &:last-child th": { border: 0, }, -})); \ No newline at end of file +})); diff --git a/pkgs/ui/src/types/index.ts b/pkgs/ui/src/types/index.ts index ca5a5fc..d4635d5 100644 --- a/pkgs/ui/src/types/index.ts +++ b/pkgs/ui/src/types/index.ts @@ -5,6 +5,6 @@ export interface CustomTableConfiguration { } export interface ICustomTable { - configuration: CustomTableConfiguration[], - data: any -} \ No newline at end of file + configuration: CustomTableConfiguration[]; + data: any; +} -- 2.51.0