github.com/pelicanplatform/pelican@v1.0.5/web_ui/frontend/components/Cell.tsx (about) 1 import React, {FunctionComponent, useEffect, useRef, useState} from "react"; 2 import {Button, ButtonProps, TableCell} from "@mui/material"; 3 4 export const TableCellOverflow: FunctionComponent<any> = ({ children, ...props }) => { 5 6 const cellRef = useRef<HTMLTableCellElement>(null); 7 const [overflow, setOverflow] = useState<boolean>(false); 8 9 useEffect(() => { 10 if(cellRef.current) { 11 setOverflow(cellRef.current.scrollWidth > cellRef.current.clientWidth) 12 } 13 }, []) 14 15 return ( 16 <TableCell 17 ref={cellRef} 18 sx={{ 19 overflowX: "scroll", 20 whiteSpace: "nowrap", 21 boxShadow: overflow ? "inset -13px 0px 20px -21px rgba(0,0,0,0.75)" : "none", 22 border: "solid #ececec 1px", 23 ...props?.sx 24 }}> 25 {children} 26 </TableCell> 27 ) 28 } 29 30 export const TableCellButton: FunctionComponent<any> = ({ children, ...props } : ButtonProps) => { 31 32 return ( 33 <TableCell 34 sx={{ 35 textAlign: "center", 36 border: "solid #ececec 1px", 37 padding: "0px", 38 ...props?.sx 39 }}> 40 <Button {...props}> 41 {children} 42 </Button> 43 </TableCell> 44 ) 45 }