Checkbox Table Copy this MUI StyledTableRowto Your Project

<thead style={{ position: "sticky", top: 0, zIndex: 1 }}> <TableRow style={{ borderTopLeftRadius: "0px" }}> {[ { id: "projectNumber", label: "Project Id" }, { id: "set_name", label: "SET" }, // { id: "accountName", label: "Account" }, { id: "projectName", label: "Project Name" }, { id: "u_delivery_unit", label: "DU Name" }, { id: "accountName", label: "Account" }, { id: "start_date", label: "Project Start Date" }, { id: "project_health", label: "Health" }, ].map((header) => ( <TableCell key={header.id} style={{ fontSize: "0.9rem", color: "white", padding: "15px 2px", textAlign: "center", backgroundColor: "#074173", }} sortDirection={orderBy === header.id ? order : false} > <TableSortLabel active={orderBy === header.id} style={{ textAlign: "center" }} direction={orderBy === header.id ? order : "asc"} onClick={() => handleRequestSort(header.id)} classes={{ root: classes.root, icon: classes.icon, }} IconComponent={() => null} > <span style={{ color: "white", translate: " 10px" }}> {header.label}{" "} <IconButton size="small" style={{ color: "white", translate: "6px" }} > {getSortIcon(header.id)} </IconButton> </span> </TableSortLabel> </TableCell> ))} </TableRow> </thead> <tbody> {/* table row for the search input boxes */} <tr style={{ height: "12px" }}> <td className="inputContainer1" style={{ paddingRight: "2.5%" }} > <input type="text" name="projectid" onChange={handlequerychange} style={{ height: "34px" }} /> {query.projectid.length === 0 && ( <i className="fa solid fa magnifying glass" style={{ translate: " 30px 1px" }} ></i> )} </td> <td className="inputContainer7"> <input type="text" name="set_name" onChange={handlequerychange} style={{ height: "34px",width:'90px',translate:' 20px' }} /> {query.set_name.length === 0 && ( <i className="fa solid fa magnifying glass" style={{ translate: " 20px 1px" }} ></i> )} </td> <td className="inputContainer4" style={{ paddingLeft: "2%" }}> <input type="text" name="account" onChange={handlequerychange} style={{ height: "34px" }} /> {query.account.length === 0 && ( <i className="fa solid fa magnifying glass" style={{ translate: " 30px 1px" }} ></i> )} </td> <td className="inputContainer3" style={{ paddingRight: "2%" }} > <input type="text" name="duname" onChange={handlequerychange} style={{ width: "90px", height: "34px", translate: " 20px", }} /> {query.duname.length === 0 && ( <i className="fa solid fa magnifying glass" style={{ translate: " 60px 1px" }} ></i> )} </td> <td className="inputContainer2" style={{ paddingLeft: "0.8%" }} > <input type="text" name="projectname" onChange={handlequerychange} style={{ height: "34px" }} /> {query.projectname.length === 0 && ( <i className="fa solid fa magnifying glass" style={{ translate: " 25px 1px" }} ></i> )} </td> <td className="inputContainer5" style={{ paddingRight: "50px" }}> <input type="text" name="project_start_date" onChange={handlequerychange} style={{ height: "34px",width:'90px' }} /> {query.project_start_date.length === 0 && ( <i className="fa solid fa magnifying glass" style={{ translate: " 100px 1px" }} ></i> )} </td> <td className="inputContainer6" style={{ paddingLeft: "2%", translate: " 10px" }} > <input type="text" name="project_health" onChange={handlequerychange} style={{ height: "34px",width:'90px',translate:' 10px' }} /> {query.project_health.length === 0 && ( <i className="fa solid fa magnifying glass" style={{ translate: " 25px 1px" }} ></i> )} </td> </tr> {currentProjects.length === 0 ? ( <tr style={{ overflow: "hidden", height: "auto", minHeight: "50px", }} > <td colSpan={7} className="nodata" style={{ backgroundColor: "#ddd", color: "#074173", fontSize: "1rem", }} > No Record Found </td> </tr> ) : ( sortedProjects.map((project: any, index: number) => ( <tr key={project.projectNumber} style={{ height: "38px", overflow: "auto", maxHeight: "50px", borderTop: "1px solid #ddd", borderBottom: "1px solid #ddd", backgroundColor: index % 2 !== 0 ? "#ddd" : "white", }} > <td style={{ paddingRight: "3%" }}> <Link style={{ color: " #074173" }} to={`/dashboard/re assessment/${project.projectNumber}/${project.set_name}`} onClick={() => { dispatch(updateNewAssessmentVariable(false)); }} > {project.projectNumber} </Link> </td> <td style={{translate:' 10px'}}>{project.set_name}</td> {/* <td style={{ paddingLeft: "2%", translate: "4px", textOverflow: "ellipsis", textAlign: "left", }} > <CustomTooltip title={project.accountName}> <span>{project.accountName}</span> </CustomTooltip> </td> */} <td style={{ paddingLeft: "2%", textAlign: "left", translate: "7px", // textOverflow: "ellipsis", }} > <CustomTooltip title={project.projectName}> <span>{project.projectName.slice(0, 70)}</span> </CustomTooltip> </td> <td className="bodyContainer4" style={{ translate: " 20px" }} > {project.u_delivery_unit} </td> {/* <td style={{ paddingLeft: "2%", textAlign: "left", translate: " 2px", // textOverflow: "ellipsis", }} > <CustomTooltip title={project.projectName}> <span>{project.projectName.slice(0, 70)}</span> </CustomTooltip> </td> */} <td style={{ paddingLeft: "2%", translate: " 6px", textOverflow: "ellipsis", textAlign: "left", }} > <CustomTooltip title={project.accountName}> <span>{project.accountName}</span> </CustomTooltip> </td> <td style={{ paddingRight: "50px" }}> {project.start_date.split(" ")[0]} </td> {/* <td >{project.set_name}</td> <td style={{ paddingLeft: "2%" ,translate:'4px'}}>{project.accountName}</td> <td className="bodyContainer4">{project.u_delivery_unit}</td> <td style={{ paddingLeft:"2%", textAlign: "left", translate:'30px'}}>{project.projectName.slice(0,70)} </td> <td style={{ paddingLeft: "10%"}}>{project.start_date.split(" ")[0]}</td> */} <td style={{ paddingLeft: "0.5%" }}> {/* {project.health === "red" ? ( <div className="red"></div> ) : project.health === "green" ? ( <div className="green"></div> ) : project.health === "amber" ? ( <div className="amber"></div> ) : ( <div>N/A</div> )} */} {project.health === "red" ? ( <MyTooltip placement="top" title={<span style={{ color: "red" }}>Red</span>} > <div className="red"></div> </MyTooltip> ) : project.health === "green" ? ( <MyTooltip placement="top" title={ <span style={{ color: "green" }}>Green</span> } > <div className="green"></div> </MyTooltip> ) : project.health === "amber" ? ( <MyTooltip placement="top" title={ <span style={{ color: "orange" }}>Amber</span> } > <div className="amber"></div> </MyTooltip> ) : ( <div>N/A</div> )} </td> </tr> )) )} </tbody> </table> {/* pagination component inside layout folder */} <div style={{ translate: "0px 30px" }}> {filteredproject.length > 5 ? ( <Pagination projectsPerPage={projectsPerPage} totalProjects={filteredproject.length} paginate={paginate} currentPage={currentPage} /> ) : null} </div> {/* new assessment button implementation */} <div className="newAssessment" style={{ translate: "0px 40px" }}> <button onClick={handleNewAssessmentClick} style={{ height: "38px", fontSize: "1rem" }} > <span style={{ marginRight: "3px" }}>Add</span> <span>Project</span> <i style={{ translate: "7px 2px" }}>+</i> </button> </div> </div> ) : ( // new assessment button implementation when there is no project assessment <div> No Assessment Found! Take new Assessment. <div className="newAssessment"> <button onClick={handleNewAssessmentClick} style={{ height: "45px", fontSize: "1.1rem" }} > New Assessment + </button> </div> </div> )} </div> </div> i wnat checkboxselection functinality using mat ui