import { FC } from 'react'; import Table from '@mui/material/Table'; import TableBody from '@mui/material/TableBody'; import TableCell from '@mui/material/TableCell'; import TableContainer from '@mui/material/TableContainer'; import TableRow from '@mui/material/TableRow'; import Checkbox from '@mui/material/Checkbox'; import { makeStyles } from '@mui/styles'; import { TableType } from './Types'; import { Box, Button, Typography, Theme } from '@mui/material'; import EnhancedTableHead from './TableHead'; import EditableTableHead from './TableEditableHead'; import ActionBar from './ActionBar'; import LoadingTable from './LoadingTable'; import CopyButton from '../advancedSearch/CopyButton'; import { useTranslation } from 'react-i18next'; const useStyles = makeStyles((theme: Theme) => ({ root: { width: '100%', flexGrow: 1, // /* set flex basis to make child item height 100% work on Safari */ // flexBasis: 0, background: '#fff', }, box: { backgroundColor: '#fff', }, table: { minWidth: '100%', }, tableCell: { background: theme.palette.common.white, padding: theme.spacing(1, 1.5), }, cellContainer: { display: 'flex', whiteSpace: 'nowrap', }, hoverActionCell: { transition: '0.2s all', padding: 0, width: '50px', backgroundColor: '#fff', '& span': { opacity: 0, }, }, checkbox: { background: theme.palette.common.white, }, rowHover: { '&:hover': { backgroundColor: '#f3fcfe !important', '& td': { background: 'inherit', }, '& $hoverActionCell': { backgroundColor: theme.palette.primary.main, '& span': { opacity: 1, }, }, }, }, selected: { backgroundColor: '#f3fcfe !important', '& td': { background: 'inherit', }, }, cell: { borderBottom: '1px solid #e9e9ed', '& p': { display: 'inline-block', verticalAlign: 'middle', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth: (props: { tableCellMaxWidth: string }) => props.tableCellMaxWidth, fontSize: '14px', lineHeight: '20px', }, }, noData: { paddingTop: theme.spacing(6), textAlign: 'center', letterSpacing: '0.5px', color: 'rgba(0, 0, 0, 0.6)', }, copyBtn: { '& svg': { fontSize: '14px', }, marginLeft: theme.spacing(0.5), }, })); const EnhancedTable: FC = props => { let { selected, onSelected, isSelected, onSelectedAll, rows = [], colDefinitions, primaryKey, // whether show checkbox in the first column // set true as default openCheckBox = true, disableSelect, noData, // whether change table row background color when mouse hover // set true as default showHoverStyle = true, isLoading, headEditable = false, // editable heads required param, contains heads components and its value editHeads = [], // if table cell max width not be passed, table row will use 300px as default tableCellMaxWidth = '300px', handleSort, order, orderBy, loadingRowCount, } = props; const classes = useStyles({ tableCellMaxWidth }); const { t: commonTrans } = useTranslation(); const copyTrans = commonTrans('copy'); return ( {!isLoading && ( {!headEditable ? ( ) : ( )} {rows && rows.length ? ( rows.map((row, index) => { const isItemSelected = isSelected(row); const labelId = `enhanced-table-checkbox-${index}`; return ( onSelected(event, row)} aria-checked={isItemSelected} tabIndex={-1} selected={isItemSelected && !disableSelect} classes={{ hover: classes.rowHover, selected: isItemSelected && !disableSelect ? classes.selected : undefined, }} > {openCheckBox && ( )} {colDefinitions.map((colDef, i) => { const { actionBarConfigs = [], needCopy = false } = colDef; const cellStyle = colDef.getStyle ? colDef.getStyle(row[colDef.id]) : {}; return colDef.showActionCell ? ( ) : (
{typeof row[colDef.id] !== 'undefined' && ( <> {colDef.onClick ? ( ) : colDef.formatter ? ( colDef.formatter(row, row[colDef.id], i) ) : ( {row[colDef.id]} )} {needCopy && ( )} )}
); })}
); }) ) : (
)}
{noData}
)} {isLoading && }
); }; export default EnhancedTable;