import { FC, forwardRef } from 'react'; import { makeStyles } from '@material-ui/core/styles'; import Table from '@material-ui/core/Table'; import TableBody from '@material-ui/core/TableBody'; import TableCell from '@material-ui/core/TableCell'; import TableContainer from '@material-ui/core/TableContainer'; import TableRow from '@material-ui/core/TableRow'; import Checkbox from '@material-ui/core/Checkbox'; import { TableType } from './Types'; import { Box, Button, Typography } from '@material-ui/core'; 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 => ({ root: { width: '100%', flexGrow: 1, /* set flex basis to make child item height 100% work on Safari */ flexBasis: 0, background: '#fff', // change scrollbar style '&::-webkit-scrollbar': { width: '8px', }, '&::-webkit-scrollbar-track': { backgroundColor: '#f9f9f9', }, '&::-webkit-scrollbar-thumb': { borderRadius: '8px', backgroundColor: '#eee', }, }, box: { backgroundColor: '#fff', }, table: { minWidth: '100%', minHeight: 57, }, 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, }, }, }, }, 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: { 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 ( {!headEditable ? ( ) : ( )} {!isLoading && ( {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, }} > {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;