score:1

Accepted answer
.underline-header {
    text-decoration: underline;
}

score:1

const headCells = [
  {dataIndex: 'id', name: 'ID' },
  {dataIndex: 'name', name: 'Name' },
  {dataIndex: 'phone', name: 'Phone' },
  {dataIndex: 'medical', name: 'Medical' },
  {
    Component: () => (
      <IconButton>
        <SearchIcon color="primary"/>
      </IconButton>
    ), 
    name: 'Actions'
  }
];

const Header = ({ cols }) => {
  return cols.map((col) => (
     <TableCell>{col.name}</TableCell>
   ));
}

const Rows = ({ data, cols }) => {
    if (data) {
        return data.map((row) =>
            <TableRow key={row.uuid}>
                {cols.map(col => (
                  <TableCell>
                    {
                      col.Component ?
                        <Component /> :
                        <>row[col.dataIndex]</>
                    }
                  </TableCell>
                )}
            </TableRow>
       );
    }
    else return [];
};

return(
<TableContainer component={Paper}>
    <Table stickyHeader aria-label="sticky table">
        <TableHead>
           <TableRow>
             <Header cols={headCells} />
           </TableRow>
        </TableHead>
        <TableBody>
            <Rows data={data} cols={headCells} />
        </TableBody>
    </Table>
</TableContainer>
)

Related Query

More Query from same tag