pkgs/ui/src/components/table/index.tsx

@@ -1,27 +1,29 @@
 import React from "react";
-import Table from '@mui/material/Table';
+import Table from "@mui/material/Table";
-import TableBody from '@mui/material/TableBody';
+import TableBody from "@mui/material/TableBody";
-import TableContainer from '@mui/material/TableContainer';
+import TableContainer from "@mui/material/TableContainer";
-import TableHead from '@mui/material/TableHead';
+import TableHead from "@mui/material/TableHead";
-import TableRow from '@mui/material/TableRow';
+import TableRow from "@mui/material/TableRow";
-import Paper from '@mui/material/Paper';
+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 <NoDataOverlay label="No Activity yet" />
+    return <NoDataOverlay label="No Activity yet" />;
-
-  const renderTableCell = (value: any, cellKey: string, render?: (param: any) => void | undefined) => {
 
+  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}
       </StyledTableCell>
     );
-
+  };
-  }
 
   return (
     <TableContainer component={Paper}>
@@ -40,9 +41,7 @@ const CustomTable = ({ configuration, data }: ICustomTable) => {
         <TableHead>
           <TableRow>
             {configuration.map((header: CustomTableConfiguration) => (
-              <StyledTableCell key={header.key}>
+              <StyledTableCell key={header.key}>{header.label}</StyledTableCell>
-                {header.label}
-              </StyledTableCell>
             ))}
           </TableRow>
         </TableHead>
@@ -60,7 +59,7 @@ const CustomTable = ({ configuration, data }: ICustomTable) => {
         </TableBody>
       </Table>
     </TableContainer>
-  )
+  );
-}
+};
 
-export default CustomTable;
+export default CustomTable;

pkgs/ui/src/components/table/style.tsx

@@ -1,6 +1,6 @@
-import { styled } from '@mui/material/styles';
+import { styled } from "@mui/material/styles";
-import TableCell, { tableCellClasses } from '@mui/material/TableCell';
+import TableCell, { tableCellClasses } from "@mui/material/TableCell";
-import TableRow from '@mui/material/TableRow';
+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,
   },
-}));
+}));

pkgs/ui/src/types/index.ts

@@ -5,6 +5,6 @@ export interface CustomTableConfiguration {
 }
 
 export interface ICustomTable {
-  configuration: CustomTableConfiguration[],
+  configuration: CustomTableConfiguration[];
-  data: any
+  data: any;
-}
+}