Add a logic to display an icon only when a function is received by prop

src/Admin/Components/Components/Table.js

-import React from 'react'; 
+import React from 'react';
 // material ui componets
 import Table from '@material-ui/core/Table';
 import { withStyles, makeStyles } from '@material-ui/core/styles';
@@ -7,7 +7,7 @@ import TableCell from '@material-ui/core/TableCell';
 import TableContainer from '@material-ui/core/TableContainer';
 import TableHead from '@material-ui/core/TableHead';
 import TableRow from '@material-ui/core/TableRow';
-import Paper from '@material-ui/core/Paper'; 
+import Paper from '@material-ui/core/Paper';
 import FilterListRoundedIcon from '@material-ui/icons/FilterListRounded';
 import { IconButton } from '@material-ui/core';
 
@@ -26,8 +26,8 @@ const useStyles = makeStyles({
         minWidth: 700,
     },
     root: {
-        minWidth: 275, 
-        boxShadow : '2px 2px 1px #A9A9A9'
+        minWidth: 275,
+        boxShadow: '2px 2px 1px #A9A9A9'
     },
     bullet: {
         display: 'inline-block',
@@ -35,8 +35,8 @@ const useStyles = makeStyles({
         transform: 'scale(0.8)',
     },
     title: {
-        fontSize: 28, 
-        fontWeight : "500"
+        fontSize: 28,
+        fontWeight: "500"
     },
     pos: {
         marginBottom: 12,
@@ -46,29 +46,32 @@ const useStyles = makeStyles({
 
 const TableData = (props) => {
     const classes = useStyles();
+    console.log(props.onIconPressed)
     return (
         <TableContainer component={Paper}>
             <Table className={classes.table} aria-label="customized table">
                 <TableHead>
                     <TableRow>
                         {
-                            props.top.map((top , index) => (
-                                index === 0 ? 
-                                <StyledTableCell key={index}>
-                                    <div style={{display : 'flex' , flexDirection : 'row' , alignItems : 'center'}}>
-                                        {top} 
-                                        <IconButton onClick={props.onIconPressed} color='primary'>
-                                            <FilterListRoundedIcon style={{color : 'white'}}/>
-                                        </IconButton>
-                                    </div>
-                                </StyledTableCell> 
-                                : 
-                                <StyledTableCell align="right" key={index}>{top}</StyledTableCell>
+                            props.top.map((top, index) => (
+                                index === 0 ?
+                                    <StyledTableCell key={index}>
+                                        <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
+                                            {top}
+                                            {
+                                                props.onIconPressed === undefined ? <div></div> : <IconButton onClick={props.onIconPressed} color='primary'>
+                                                    <FilterListRoundedIcon style={{ color: 'white' }} />
+                                                </IconButton>
+                                            }
+                                        </div>
+                                    </StyledTableCell>
+                                    :
+                                    <StyledTableCell align="right" key={index}>{top}</StyledTableCell>
                             ))
                         }
                     </TableRow>
                 </TableHead>
-                { props.children }
+                {props.children}
             </Table>
         </TableContainer>
     );