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  }