ran format command
All checks were successful
checks / test (pull_request) Successful in 2m45s
checks-impure / test (pull_request) Successful in 25s

This commit is contained in:
sara-pervana
2023-11-21 18:04:58 +01:00
parent f92461de2c
commit 72da175bc2
3 changed files with 27 additions and 28 deletions

View File

@@ -1,27 +1,29 @@
import React from "react"; 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 { NoDataOverlay } from "@/components/noDataOverlay";
import { StyledTableCell, StyledTableRow } from "./style"; import { StyledTableCell, StyledTableRow } from "./style";
import { ICustomTable, CustomTableConfiguration } from "@/types"; import { ICustomTable, CustomTableConfiguration } from "@/types";
const CustomTable = ({ configuration, data }: ICustomTable) => { const CustomTable = ({ configuration, data }: ICustomTable) => {
// display empty icon in case there is no data // display empty icon in case there is no data
if (!data || data.length === 0) 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; let renderedValue = value;
// cover use case if the data is an array // 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 // cover use case if we want to render a component
if (render) renderedValue = render(value); if (render) renderedValue = render(value);
@@ -31,8 +33,7 @@ const CustomTable = ({ configuration, data }: ICustomTable) => {
{renderedValue} {renderedValue}
</StyledTableCell> </StyledTableCell>
); );
};
}
return ( return (
<TableContainer component={Paper}> <TableContainer component={Paper}>
@@ -40,9 +41,7 @@ const CustomTable = ({ configuration, data }: ICustomTable) => {
<TableHead> <TableHead>
<TableRow> <TableRow>
{configuration.map((header: CustomTableConfiguration) => ( {configuration.map((header: CustomTableConfiguration) => (
<StyledTableCell key={header.key}> <StyledTableCell key={header.key}>{header.label}</StyledTableCell>
{header.label}
</StyledTableCell>
))} ))}
</TableRow> </TableRow>
</TableHead> </TableHead>
@@ -60,7 +59,7 @@ const CustomTable = ({ configuration, data }: ICustomTable) => {
</TableBody> </TableBody>
</Table> </Table>
</TableContainer> </TableContainer>
) );
} };
export default CustomTable; export default CustomTable;

View File

@@ -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 }) => ({ export const StyledTableCell = styled(TableCell)(({ theme }) => ({
[`&.${tableCellClasses.head}`]: { [`&.${tableCellClasses.head}`]: {
@@ -13,11 +13,11 @@ export const StyledTableCell = styled(TableCell)(({ theme }) => ({
})); }));
export const StyledTableRow = styled(TableRow)(({ theme }) => ({ export const StyledTableRow = styled(TableRow)(({ theme }) => ({
'&:nth-of-type(odd)': { "&:nth-of-type(odd)": {
backgroundColor: theme.palette.action.hover, backgroundColor: theme.palette.action.hover,
}, },
// hide last border // hide last border
'&:last-child td, &:last-child th': { "&:last-child td, &:last-child th": {
border: 0, border: 0,
}, },
})); }));

View File

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