@material-ui/core#TableBody JavaScript Examples
The following examples show how to use
@material-ui/core#TableBody.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: index.js From react-material-ui-table-row-drag-and-drop with Creative Commons Zero v1.0 Universal | 8 votes |
|
render() {
return (
<TableContainer component={Paper}>
<Table>
<TableHead>
<TableRow>
<TableCell>Nr</TableCell>
<TableCell>Label</TableCell>
<TableCell align="right">Text</TableCell>
</TableRow>
</TableHead>
<TableBody component={DroppableComponent(this.onDragEnd)}>
{this.state.items.map((item, index) => (
<TableRow component={DraggableComponent(item.id, index)} key={item.id} >
<TableCell scope="row">{index + 1}</TableCell>
<TableCell>{item.primary}</TableCell>
<TableCell align="right">{item.secondary}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
)
}
Example #2
| Source File: LeaderboardDialog.js From dipact with GNU General Public License v3.0 | 7 votes |
|
render() {
return (
<Dialog
onEntered={helpers.genOnback(this.props.onClose)}
disableBackdropClick={false}
open={true}
onClose={this.onClose}
>
<DialogTitle>Leaderboard</DialogTitle>
<DialogContent>
<TableContainer component={Paper}>
<Table>
<TableBody>
{this.state.userStats.map((userStat, idx) => {
return this.makeRow(
idx + 1,
userStat.Properties.User
);
})}
</TableBody>
</Table>
</TableContainer>
</DialogContent>
<DialogActions>
<Button onClick={this.onClose} color="primary">
Close
</Button>
</DialogActions>
</Dialog>
);
}
Example #3
| Source File: OrderService.js From module-federation-examples with MIT License | 6 votes |
|
export default function OrderService() {
const classes = useStyles();
const serviceContext = useServiceContext();
React.useEffect(() => {
serviceContext.setService({ title: 'Orders' });
}, []);
return (
<main className={classes.content}>
<div className={classes.appBarSpacer} />
<Container maxWidth="lg" className={classes.container}>
<Grid item xs={12}>
<Paper className={classes.paper}>
<Typography component="h1" variant="h6" color="primary" gutterBottom>
Orders
</Typography>
<Table>
<TableHead>
<TableRow>
<TableCell>Date</TableCell>
<TableCell>Name</TableCell>
<TableCell>Ship To</TableCell>
<TableCell>Payment Method</TableCell>
<TableCell align="right">Sale Amount</TableCell>
</TableRow>
</TableHead>
<TableBody>
{orders.map(order => (
<OrderRow order={order} key={order.id} />
))}
</TableBody>
</Table>
</Paper>
</Grid>
</Container>
</main>
);
}
Example #4
| Source File: Table.js From react-code-splitting-2021-04-26 with MIT License | 6 votes |
|
export default function TableComponent({ data }) {
const classes = useStyles();
var keys = Object.keys(data[0]).map(i => i.toUpperCase());
keys.shift(); // delete "id" key
return (
<Table className="mb-0">
<TableHead>
<TableRow>
{keys.map(key => (
<TableCell key={key}>{key}</TableCell>
))}
</TableRow>
</TableHead>
<TableBody>
{data.map(({ id, name, email, product, price, date, city, status }) => (
<TableRow key={id}>
<TableCell className="pl-3 fw-normal">{name}</TableCell>
<TableCell>{email}</TableCell>
<TableCell>{product}</TableCell>
<TableCell>{price}</TableCell>
<TableCell>{date}</TableCell>
<TableCell>{city}</TableCell>
<TableCell>
<Chip label={status} classes={{root: classes[states[status.toLowerCase()]]}}/>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
);
}
Example #5
| Source File: table-container-generator.js From horondi_admin with MIT License | 6 votes |
|
TableContainerGenerator = ({
pagination,
tableTitles,
tableItems,
count
}) => {
const { SMALL_SIZE, DEFAULT_SIZE } = config.tableSizes;
const dense = useSelector(selectTableDense);
return (
<>
<TableContainer component={Paper}>
<Table size={dense ? SMALL_SIZE : DEFAULT_SIZE}>
<TableContainerHead titles={tableTitles} />
<TableBody id='table-body'>{tableItems}</TableBody>
</Table>
</TableContainer>
{pagination && count > maxItemsPerPage && <TablePaginator />}
</>
);
}
Example #6
| Source File: ContentPropertiesLayout.js From Edlib with GNU General Public License v3.0 | 6 votes |
|
function ContentPropertiesLayout(props) {
const {
classes,
rows,
} = props;
return (
<Table className={classes.table}>
<TableBody>
{rows.map(row => {
let contentPropertiesRowClassName = 'contentpropertiesrow';
if (typeof row.cssClassName !== 'undefined') {
contentPropertiesRowClassName += ' ' + row.cssClassName;
}
let displayValue = row.value;
if (typeof row.fullValue !== 'undefined') {
displayValue = (
<Tooltip
title={row.fullValue}
classes={{ tooltip: classes.tooltip }}
placement="top"
>
<span>{row.value}</span>
</Tooltip>
);
}
return (
<TableRow className={contentPropertiesRowClassName} key={row.label}>
<TableCell className="contentpropertieslabel">{row.label}</TableCell>
<TableCell className="contentpropertiesvalue">
{displayValue}
</TableCell>
</TableRow>
);
})}
</TableBody>
</Table>
);
}
Example #7
| Source File: DataPreview.js From Otto with MIT License | 6 votes |
|
export default function DataPreview() {
const { state } = useState();
const classes = useStyles();
if (state.sample_dataset == null) {
return null;
}
const metadata = datasetMetadata[state.sample_dataset];
function getFormatted(label, index) {
if (metadata.units) {
return label + " (" + metadata.units[index] + ")";
}
return label;
}
return (
<Grid direction="column" container className={classes.noPadding}>
{/* Data Attributes */}
<Grid item>
<div className={classes.root}>
{chipData(state).map((data, index) => {
return (
<li key={index}>
<Chip label={data} color="primary" className={classes.chip} />
</li>
);
})}
</div>
</Grid>
{/* Table */}
<Grid item className={classes.fullWidth}>
<TableContainer component={Paper} className={classes.table}>
<Table size="small" aria-label="a dense table">
<TableHead>
<TableRow>
{metadata.columns.map((column, index) => (
<TableCell key={index}>
{getFormatted(
metadata.columnsMap
? metadata.columnsMap[column]
: column,
index
)}
</TableCell>
))}
</TableRow>
</TableHead>
<TableBody>
{metadata.data.slice(0, 5).map((row, index) => (
<TableRow key={index}>
{metadata.columns.map((column, index) => (
<TableCell key={index} component="th" scope="row">
{row[column]}
</TableCell>
))}
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
</Grid>
</Grid>
);
}
Example #8
| Source File: certificate-table.js From horondi_client_fe with MIT License | 6 votes |
|
CertificateTable = ({ items }) => {
const styles = useStyles();
const { t } = useTranslation();
const certificateItems = useMemo(
() =>
[...items]
.sort((a, b) => new Date(b.dateStart) - new Date(a.dateStart))
.map((item) => <CertificateItem item={item} key={item._id} />),
[items]
);
const headerItems = useMemo(
() => ROW_FIELDS.map((item) => <TableCell key={item}>{t(`certificate.${item}`)}</TableCell>),
[ROW_FIELDS, t]
);
return (
<div className={styles.root}>
<h2 className={styles.titleWrapper}>{t('certificate.title')}</h2>
<div className={styles.table}>
<Table>
<TableHead>
<TableRow className={styles.tableHeader}>{headerItems}</TableRow>
</TableHead>
<TableBody>{certificateItems}</TableBody>
</Table>
</div>
</div>
);
}
Example #9
| Source File: RecentOrdersWidget.js From module-federation-examples with MIT License | 6 votes |
|
export default function RecentOrdersWidget() {
return (
<Box display="flex" flexDirection="column" flex={1}>
<Title />
<Box flex={1}>
<Table>
<TableHead>
<TableRow>
<TableCell>Date</TableCell>
<TableCell>Name</TableCell>
<TableCell>Ship To</TableCell>
<TableCell>Payment Method</TableCell>
<TableCell align="right">Sale Amount</TableCell>
</TableRow>
</TableHead>
<TableBody>
{orders.map(order => (
<OrderRow order={order} key={order.id} />
))}
</TableBody>
</Table>
</Box>
<Box mt={3}>
<Button color="primary">See more orders</Button>
</Box>
</Box>
);
}
Example #10
| Source File: Table.jsx From Turnip-Calculator with MIT License | 6 votes |
|
Table = ({ filters, patterns, minMaxPattern, quantiles, expanded }) => {
const { t } = useTranslation();
const classes = useStyles();
const { weekDays } = useWeekDays();
return useMemo(
() => (
<Box
bgcolor="bkgs.table"
borderRadius={8}
display="flex"
flexDirection="column"
mt={2}
overflow="hidden"
>
<TableContainer className={classes.container}>
<MaterialTable size="small" padding="none" stickyHeader>
<TableHead>
<TableRow>
<TableCell></TableCell>
<TableCell align="center">{t("Pattern")}</TableCell>
<TableCell align="center">{t("Chance")}</TableCell>
{weekDays.map((day) => (
<TableCell key={day} align="center" colSpan={2}>
{day}
</TableCell>
))}
</TableRow>
</TableHead>
<TableBody>
<DataRows
patterns={patterns}
minMaxPattern={minMaxPattern}
quantiles={quantiles}
filters={filters}
expanded={expanded}
/>
</TableBody>
</MaterialTable>
</TableContainer>
</Box>
),
[
classes.container,
expanded,
filters,
minMaxPattern,
patterns,
quantiles,
t,
weekDays,
]
);
}
Example #11
| Source File: index.js From react-material-ui-table-row-drag-and-drop with Creative Commons Zero v1.0 Universal | 6 votes |
|
DroppableComponent = (
onDragEnd: (result, provided) => void) => (props) =>
{
return (
<DragDropContext onDragEnd={onDragEnd}>
<Droppable droppableId={'1'} direction="vertical">
{(provided) => {
return (
<TableBody ref={provided.innerRef} {...provided.droppableProps} {...props}>
{props.children}
{provided.placeholder}
</TableBody>
)
}}
</Droppable>
</DragDropContext>
)
}
Example #12
| Source File: order-history-table.js From horondi_client_fe with MIT License | 6 votes |
|
OrderHistoryTable = ({ items }) => {
const styles = useStyles();
const { t } = useTranslation();
return (
<>
<Divider variant='fullWidth' />
<Table>
<TableHead>
<TableRow classes={{ root: styles.tableHeader }}>
<TableCell style={{ width: '22%' }} className={styles.tableCell}>
{t('common.product')}
</TableCell>
<TableCell style={{ width: '25%' }} className={styles.tableCell} />
<TableCell style={{ width: '15%' }} className={styles.tableCell}>
{t('common.size')}
</TableCell>
<TableCell style={{ width: '15%' }} className={styles.tableCell}>
{t('common.price')}
</TableCell>
<TableCell style={{ width: '12%' }} className={styles.tableCell}>
{t('common.quantity')}
</TableCell>
<TableCell style={{ width: '15%' }} className={styles.tableCell}>
{t('common.total')}
</TableCell>
</TableRow>
</TableHead>
<TableBody>{items}</TableBody>
</Table>
</>
);
}
Example #13
| Source File: ApplicationListPage.jsx From frontend with MIT License | 5 votes |
|
ApplicationPage = () => {
const classes = useStyles();
const [handlePageChange,
handleChangeRowsPerPage,
pagination, paginateData] = usePaginateHandlers(applications);
return (
<>
<Box mb={2}>
<Typography variant="h4">Applications</Typography>
</Box>
<Box>
<Paper elevation={2}>
<Table>
<TableHead>
<TableRow>
{columns.map((c) => <TableCell key={c.label}>{c.label}</TableCell>)}
</TableRow>
</TableHead>
<TableBody>
{paginateData.map((x) => (
<TableRow key={x.id}>
<TableCell>
{x.requestId}
</TableCell>
<TableCell>{x.firstName}</TableCell>
<TableCell>{x.lastName}</TableCell>
<TableCell>{x.phone}</TableCell>
<TableCell>{x.help}</TableCell>
<TableCell>
{x.status
? (
<Select
value={x.status}
classes={{ root: classes[x.status], select: classes[x.status] }}
>
<MenuItem value="on_hold">On hold</MenuItem>
<MenuItem value="in_progress">In progress</MenuItem>
<MenuItem value="receieved">Received</MenuItem>
<MenuItem value="closed">Closed</MenuItem>
</Select>
) : 'Pending'}
</TableCell>
<TableCell align="right">
{!x.approved && (
<>
<IconButton color="primary">
<Icon>check</Icon>
</IconButton>
<IconButton color="secondary">
<Icon>clear</Icon>
</IconButton>
</>
)}
</TableCell>
</TableRow>
))}
</TableBody>
<TableFooter>
<TableRow>
<TablePagination
count={applications.length}
onChangePage={handlePageChange}
page={pagination.page}
rowsPerPage={pagination.limit}
onChangeRowsPerPage={handleChangeRowsPerPage}
/>
</TableRow>
</TableFooter>
</Table>
</Paper>
</Box>
</>
);
}
Example #14
| Source File: FreshnessBlip.jsx From archeage-tools with The Unlicense | 5 votes |
|
render() {
const { name, profitLevels } = this.props;
const standard = profitLevels.filter(pL => !pL.aged);
const aged = profitLevels.filter(pL => pL.aged);
const hasAged = aged.length > 0;
return (
<Tooltip
title={<Table size="small" className="freshness-table">
<TableHead>
<TableRow>
<TableCell colSpan={hasAged ? 4 : 2} align="center" className={`freshness ${name}`}>
{name} Packs
</TableCell>
</TableRow>
</TableHead>
<TableBody>
{hasAged &&
<TableRow>
<TableCell colSpan={2} align="center">Regular</TableCell>
<TableCell colSpan={2} align="center">Aged</TableCell>
</TableRow>}
{standard.map((standardPL, i) => {
const agedPL = aged[i];
return (
<TableRow key={`profit-${name}-${standardPL.name}`} className="profit-row">
<TableCell>
{standardPL.name} Profit
</TableCell>
<TableCell>
{percentModifier(standardPL.modifier)} {standardPL.time}
</TableCell>
{hasAged && agedPL &&
<>
<TableCell>
{agedPL.name} Profit
</TableCell>
<TableCell>
{percentModifier(agedPL.modifier)} {agedPL.time}
</TableCell>
</>}
</TableRow>
);
})}
</TableBody>
</Table>}
classes={{ tooltip: 'freshness-tip-container' }}
>
<Typography variant="overline" className="freshness-tip">
<span className={`blip freshness ${name}`} /> {name}
</Typography>
</Tooltip>
);
}
Example #15
| Source File: positions.jsx From GraphVega with MIT License | 5 votes |
|
Positions = props => {
return (
<Row>
<Col sm={{span:12}}>
<Card>
<CardContent>
<Typography variant="h6" display="block" gutterBottom>
Positions
</Typography>
<Table>
<TableHead>
<TableRow>
<TableCell>TYPE</TableCell>
<TableCell>QTY</TableCell>
<TableCell>MARK</TableCell>
<TableCell>STRIKE</TableCell>
<TableCell>EXPIRY</TableCell>
<TableCell>IMP VOL</TableCell>
<TableCell>VEGA</TableCell>
<TableCell>THETA</TableCell>
<TableCell>DELTA</TableCell>
<TableCell>GAMMA</TableCell>
</TableRow>
</TableHead>
<TableBody>
{props.positions.map((option) => (
<TableRow>
<TableCell>
<Chip label={option.option_type} color={chipStyle(option.option_type)}/>
</TableCell>
<TableCell>{option.quantity}</TableCell>
<TableCell>{(option.bid + option.ask)/2}</TableCell>
<TableCell>{option.strike}</TableCell>
<TableCell>{expiry(option.expiration_date)}</TableCell>
<TableCell>{roundOne(option.greeks.smv_vol*100)}%</TableCell>
<TableCell>{option.greeks.vega}</TableCell>
<TableCell>{option.greeks.theta}</TableCell>
<TableCell>{option.greeks.delta}</TableCell>
<TableCell>{option.greeks.gamma}</TableCell>
</TableRow>
))}
{(props.quantity && props.quantity !== 0) ?
<TableRow>
<TableCell>
<Chip label={"shares"} />
</TableCell>
<TableCell>{props.quantity}</TableCell>
<TableCell>{(props.quote.ask + props.quote.bid)/2}</TableCell>
<TableCell>--</TableCell>
<TableCell>--</TableCell>
<TableCell>--</TableCell>
<TableCell>--</TableCell>
<TableCell>--</TableCell>
<TableCell>{props.quantity}</TableCell>
<TableCell>--</TableCell>
</TableRow>
: ""
}
</TableBody>
</Table>
</CardContent>
</Card>
</Col>
</Row>
)
}
Example #16
| Source File: Home.jsx From Edlib with GNU General Public License v3.0 | 5 votes |
|
Home = ({
onGoToDetails,
loading,
applications,
refetchApplications,
}) => {
const [createNew, setCreateNew] = React.useState(false);
return (
<Container maxWidth={false}>
<Grid component={Box} container paddingY={2}>
<Grid item>
<Breadcrumbs aria-label="breadcrumb">
<Link to="/">Edlib admin</Link>
<Link to="/settings">Settings</Link>
<Typography color="textPrimary">
External applications
</Typography>
</Breadcrumbs>
</Grid>
</Grid>
<Grid container component={Box} paddingBottom={2}>
<Grid item md={12}>
<Typography variant="h2">External applications</Typography>
</Grid>
</Grid>
<Grid container>
<Grid item md={12}>
<Paper>
<Box padding={2}>
<Button
variant="contained"
color="primary"
onClick={() => setCreateNew(true)}
>
Create new
</Button>
</Box>
{loading && <CircularProgress />}
{!loading && (
<Table>
<TableHead>
<TableRow>
<TableCell>Id</TableCell>
<TableCell>Name</TableCell>
</TableRow>
</TableHead>
<TableBody>
{applications.map(({ id, name }) => (
<TableRow
key={id}
hover
onClick={() => onGoToDetails(id)}
>
<TableCell width={260}>
{id}
</TableCell>
<TableCell>{name}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
)}
</Paper>
</Grid>
</Grid>
<CreateExternalApplication
isOpen={createNew}
onClose={() => setCreateNew(false)}
onAdded={() => {
setCreateNew(false);
refetchApplications();
}}
/>
</Container>
);
}
Example #17
| Source File: events.js From dscbppimt-official-website with MIT License | 5 votes |
|
function Events() {
const classes = useStyles()
const [ Events, setEvents] = useState([]);
const [ upcomingEvents, setUpcomingEvents ] = useState([])
const [ isLoading, setLoading ] = useState(false)
const URL = "https://dscbppimt-cms.herokuapp.com/files/"
useEffect(() => {
const today = new Date()
const todayDate = today.toISOString()
console.log(todayDate)
// 2020-10-11T09:10:30.698Z
setLoading(true);
Axios.get(`https://dscbppimt-cms.herokuapp.com/our-events?Date_gte=${todayDate}&_sort=Date:desc&_limit=2`).then(res => {
console.log(res.data);
setUpcomingEvents(res.data);
setLoading(false)
});
Axios.get(`https://dscbppimt-cms.herokuapp.com/our-events?Date_lt=${todayDate}&_sort=Date:desc`).then(res => {
console.log(res.data);
setEvents(res.data);
setLoading(false)
});
},[])
return (
<Layout>
<Box>
<Container style={{marginBottom : '4em'}}>
<Typography variant="h4" style={{fontWeight : '500', margin : '1em 0px'}}>Our Events</Typography>
<Grid container spacing={2}>
{isLoading ? <Skeleton variant="rect" width="100%" height="150px"/> : upcomingEvents.length !== 0 ? upcomingEvents.map(event => (
<Grid item xs={12} sm={6} md={12} key={event._id}>
<EventCard
Image={URL+(event.Image.formats.thumbnail.url)}
title={event.Title}
speaker={event.Speaker === 'None' ? null : event.Speaker }
description={event.Description}
date={event.Date}
data={event.Image}
register={event.Register}
learn={event.Learn}
/>
</Grid>
)) : <Container style={{width: '100%', textAlign: 'center', margin: '4em 0'}}><Typography align="center" >No Upcoming Events</Typography></Container>}
</Grid>
</Container>
</Box>
<Container style={{padding : '2em'}}>
<Box style={{display : 'flex', justifyContent : 'space-between'}}>
<Typography variant="h6">Past Events</Typography>
</Box>
<TableContainer component={Paper} className={classes.tableContainer}>
<Table className={classes.table} aria-label="simple table">
<TableHead>
<TableRow>
<TableCell align="center">Event</TableCell>
<TableCell align="center">Speaker</TableCell>
<TableCell align="center">Date</TableCell>
</TableRow>
</TableHead>
<TableBody>
{Events.map((row) => (
<TableRow key={row.Title}>
<TableCell component="th" scope="row" align="center">{row.Title}</TableCell>
<TableCell align="center">{row.Speaker}</TableCell>
<TableCell align="center">{row.Date}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
</Container>
</Layout>
)
}
Example #18
| Source File: SystemStatus.jsx From Edlib with GNU General Public License v3.0 | 5 votes |
|
SystemStatus = ({ name, loading, error, data }) => {
const [isExpanded, setIsExpanded] = React.useState(false);
if (loading) {
return (
<Paper>
<h2>{name}</h2>
</Paper>
);
}
if (error) {
return (
<Paper>
<Box display="flex" justifyContent="space-between">
<div>{name}</div>
<div>
<i className="fa fa-caret-down" />
</div>
</Box>
<Collapse in={isExpanded} timeout="auto">
<Typography>
Could not get service status. This might be because the
service is not set up properly or that you have no
internet connection.
</Typography>
</Collapse>
</Paper>
);
}
return (
<Paper>
<Box
display="flex"
justifyContent="space-between"
bgcolor={data.color + '.main'}
onClick={() => setIsExpanded(!isExpanded)}
>
<div>{name}</div>
<div>
<i className="fa fa-caret-down" />
</div>
</Box>
<Collapse in={isExpanded}>
<Table>
<TableHead>
<tr>
<th width={35} />
<th>Subservice name</th>
<th>Status</th>
<th>Parameters</th>
</tr>
</TableHead>
<TableBody>
{data.systems.map((s, index) => (
<TableRow key={index}>
<TableCell className={'bg-' + s.color} />
<TableCell>{s.name}</TableCell>
<TableCell>{s.statusMessage}</TableCell>
<TableCell>
{s.parameters &&
Object.entries(s.parameters).map(
([key, value]) => (
<div>
<strong>{key}: </strong>
{value}
</div>
)
)}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</Collapse>
</Paper>
);
}
Example #19
| Source File: order-table.js From horondi_client_fe with MIT License | 5 votes |
|
OrderTable = ({ items, user, cartOperations, promoCode }) => {
const { t, i18n } = useTranslation();
const language = i18n.language === 'ua' ? 0 : 1;
const styles = useStyles();
const [removeOneModalVisibility, setRemoveOneModalVisibility] = useState(false);
const [modalItem, setModalItem] = useState({});
const { removeFromCart } = cartOperations;
const cartItems = items.map((item) => (
<CartItem
key={item.id}
item={item}
language={language}
user={user}
setModalVisibility={setRemoveOneModalVisibility}
setModalItem={setModalItem}
cartOperations={cartOperations}
promoCode={promoCode}
/>
));
const onRemoveOneModalAction = (action) => {
if (action) {
removeFromCart(modalItem);
}
setRemoveOneModalVisibility(false);
};
return (
<div className={styles.root}>
{removeOneModalVisibility && (
<>
<Modal
message={t('cart.deleteItem')}
isOpen={removeOneModalVisibility}
onAction={onRemoveOneModalAction}
isCartModal
/>
</>
)}
<h2 className={styles.titleWrapper}>{t('cart.titleFilled')} </h2>
<div className={styles.table}>
<Table>
<TableHead>
<TableRow
classes={{
root: styles.tableHeader
}}
>
<TableCell>{t('cart.product')}</TableCell>
<TableCell>{t('cart.size')}</TableCell>
<TableCell>{t('cart.price')}</TableCell>
<TableCell>{t('cart.quantity')}</TableCell>
<TableCell>{t('cart.toPay')}</TableCell>
<TableCell>{t('cart.actions')}</TableCell>
</TableRow>
</TableHead>
<TableBody>{cartItems}</TableBody>
</Table>
</div>
</div>
);
}
Example #20
| Source File: CertificateListModal.js From akashlytics-deploy with GNU General Public License v3.0 | 5 votes |
|
export function CertificateListModal({ onClose, revokeCertificate }) {
const classes = useStyles();
const { validCertificates, localCert, selectedCertificate } = useCertificate();
return (
<Dialog open={true} onClose={onClose} maxWidth="md" fullWidth>
<DialogTitle>Certificates</DialogTitle>
<DialogContent dividers className={classes.dialogContent}>
<TableContainer>
<Table size="small">
<TableHead>
<TableRow>
<TableCell align="center">Selected</TableCell>
<TableCell align="center">Local cert</TableCell>
<TableCell align="center">Issued on</TableCell>
<TableCell align="center">Expires</TableCell>
<TableCell align="center">Serial</TableCell>
<TableCell align="center"></TableCell>
</TableRow>
</TableHead>
<TableBody>
{validCertificates.map((cert) => (
<TableRow key={cert.serial}>
<TableCell align="center">{cert.serial === selectedCertificate?.serial && <CheckIcon color="primary" />}</TableCell>
<TableCell align="center">{cert.parsed === localCert?.certPem && <CheckIcon color="primary" />}</TableCell>
<TableCell align="center">
<FormattedDate value={cert.pem.issuedOn} year="numeric" month="2-digit" day="2-digit" hour="2-digit" minute="2-digit" />
</TableCell>
<TableCell align="center">
<FormattedDate value={cert.pem.expiresOn} year="numeric" month="2-digit" day="2-digit" hour="2-digit" minute="2-digit" />
</TableCell>
<TableCell align="center">{cert.serial}</TableCell>
<TableCell align="center">
<Button onClick={() => revokeCertificate(cert)} color="secondary" size="small">
Revoke
</Button>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
</DialogContent>
<DialogActions>
<Button variant="contained" color="primary" onClick={onClose}>
Close
</Button>
</DialogActions>
</Dialog>
);
}
Example #21
| Source File: ViewTransactions.js From Pharma-Chain with MIT License | 5 votes |
|
export default function ViewTransactions(props) {
const classes = useStyles();
const [ account ] = useState(props.location.query.account);
const [ txnAddress ] = useState(props.location.query.address);
const [ web3 ] = useState(props.location.query.web3);
const [ details, setDetails ] = useState({});
const [ loading, isLoading ] = useState(true);
async function getTxnData() {
const transaction = new web3.eth.Contract(Transactions.abi, txnAddress);
let txns = await transaction.methods.getAllTransactions().call({ from: account });
const txnsList = txns.map(data => {
return (
<TableRow key={data[ 0 ]} className={classes.tableBodyRow}>
<TableCell multiline className={classes.tableCell} style={{ maxWidth: "75px" }}>{data[ 0 ]}</TableCell>
<TableCell multiline className={classes.tableCell} style={{ maxWidth: "50px" }}>{data[ 1 ]}</TableCell>
<TableCell multiline className={classes.tableCell} style={{ maxWidth: "50px" }}>{data[ 2 ]}</TableCell>
<TableCell multiline className={classes.tableCell} style={{ maxWidth: "75px" }}>{data[ 3 ]}</TableCell>
<TableCell multiline className={classes.tableCell} style={{ maxWidth: "10px" }}>{data[ 4 ]}</TableCell>
<TableCell multiline className={classes.tableCell} style={{ maxWidth: "10px" }}>{data[ 5 ]}</TableCell>
<TableCell multiline className={classes.tableCell} style={{ maxWidth: "40px" }}>{new Date(data[ 6 ] * 1000).toString()}</TableCell>
</TableRow>
)
});
setDetails(txnsList);
isLoading(false);
}
if (loading) {
getTxnData();
return (
<Loader></Loader>
);
} else {
return (
<Card>
<CardHeader color="danger">
<h4 className={classes.cardTitleWhite}>Transactions List</h4>
<p className={classes.cardCategoryWhite}>
View all transactions for this Medicine
</p>
</CardHeader>
<CardBody>
<div className={classes.tableResponsive}>
<Table className={classes.table}>
<TableHead className={classes[ "dangerTableHeader" ]}>
<TableRow className={classes.tableHeadRow}>
<TableCell className={classes.tableCell + " " + classes.tableHeadCell} style={{ maxWidth: "75px" }}>TxnHash</TableCell>
<TableCell className={classes.tableCell + " " + classes.tableHeadCell} style={{ maxWidth: "50px" }} >From</TableCell>
<TableCell className={classes.tableCell + " " + classes.tableHeadCell} style={{ maxWidth: "50px" }} >To</TableCell>
<TableCell className={classes.tableCell + " " + classes.tableHeadCell} style={{ maxWidth: "75px" }} >Previous TxnHash</TableCell>
<TableCell className={classes.tableCell + " " + classes.tableHeadCell} style={{ maxWidth: "10px" }} >Lat</TableCell>
<TableCell className={classes.tableCell + " " + classes.tableHeadCell} style={{ maxWidth: "10px" }} >Lng</TableCell>
<TableCell className={classes.tableCell + " " + classes.tableHeadCell} style={{ maxWidth: "40px" }} >Timestamp</TableCell>
</TableRow>
</TableHead>
<TableBody>
{details}
</TableBody>
</Table>
</div>
</CardBody>
</Card>
);
}
}
Example #22
| Source File: TableView.js From qasong with ISC License | 5 votes |
|
function TableView({
searchResults,
nowPlaying,
setNowPlaying,
queue,
setQueue,
setSearchTableViewMode,
}) {
return (
<Box
mt={4}
id="video-grid"
style={{ maxWidth: "1200px", margin: "0 auto 200px auto" }}
>
<Box m={2}>
<Typography>
Search Results for <i>{searchResults.searchTerm}</i>
</Typography>
<IconButton
edge="end"
title="toggle light/dark theme"
onClick={() => setSearchTableViewMode(false)}
target="_blank"
>
<GridOnIcon />
</IconButton>
</Box>
<Grid container justify="center" alignItems="center">
<TableContainer>
<Table>
<TableHead>
<TableRow>
<TableCell align="center">Play</TableCell>
<TableCell align="center">Queue</TableCell>
<TableCell>Name</TableCell>
<TableCell>Author</TableCell>
<TableCell>View Count</TableCell>
<TableCell align="center">Thumbnail</TableCell>
</TableRow>
</TableHead>
<TableBody>
{searchResults.results.map((video) => {
return (
<VideoRow
key={video.videoId}
video={video}
nowPlaying={nowPlaying}
setNowPlaying={setNowPlaying}
queue={queue}
setQueue={setQueue}
/>
);
})}
</TableBody>
</Table>
</TableContainer>
</Grid>
</Box>
);
}
Example #23
| Source File: HospitalList.jsx From frontend with MIT License | 5 votes |
|
HospitalList = () => {
const [requests, setRequests] = useState([]);
const getData = () => {
fetch(`${apiUrl}/resources`)
.then((x) => x.json())
.then((x) => x.list.filter((a) => a.name))
.then((x) => {
setRequests([...x]);
});
};
const [showAppModal, handleAppModal] = useState(false);
const [requestId, setRequestId] = useState(null);
const toggleModal = () => {
handleAppModal(!showAppModal);
};
const init = useRef(false);
useEffect(() => {
if (!init.current) {
getData();
init.current = true;
}
}, [init]);
return (
<Paper elevation={2}>
<TableFilter />
<Table>
<TableHead>
<TableRow>
{columns.map((col) => (
<TableCell key={col.label}>{col.label}</TableCell>
))}
</TableRow>
</TableHead>
<TableBody>
{requests.map((data) => (
<TableRow key={data.id}>
<TableCell>{data.beneficiary.name}</TableCell>
<TableCell>{data.name}</TableCell>
<TableCell>{data.quantity}</TableCell>
<TableCell>{data.deadline}</TableCell>
<TableCell>
<PersonCell person={data.contactPerson} />
</TableCell>
<TableCell>
<Button
color="secondary"
variant="contained"
onClick={() => {
setRequestId(data.id);
toggleModal(true);
}}
>
Apply
</Button>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
<VolunteerJoin open={showAppModal} id={requestId} onClose={toggleModal} />
</Paper>
);
}
Example #24
| Source File: Index.js From Designer-Client with GNU General Public License v3.0 | 5 votes |
|
export function UserIndex() {
const users = useSelector(state => state.users.items);
const loading = useSelector(state => state.users.loading);
const dispatch = useDispatch();
const [deleteModalOpen, setDeleteModalOpen] = useState(false);
const [selectedUserId, setSelectedUserId] = useState(-1);
useEffect(() => {
dispatch(userActions.index());
}, [])
const deleteBtnClick = (userId) => {
setSelectedUserId(userId)
setDeleteModalOpen(true);
}
const deleteUser = () => {
if(selectedUserId <= 0) return;
dispatch(userActions.unregistByAdmin(selectedUserId));
}
return (
<Container>
<PageTitle text={"담당자 관리"} align="left" />
<ActionDialog action={deleteUser} open={deleteModalOpen} setOpen={setDeleteModalOpen} titleText="사용자 탈퇴" actionText="삭제" cancelText="취소">
정말 사용자를 탈퇴 시키시겠습니까?
</ActionDialog>
<TableContainer component={Paper}>
<Table aria-label="custom pagination table">
<TableHead>
<TableRow>
<TableCell align="center">id</TableCell>
<TableCell align="center">Group</TableCell>
<TableCell align="center">로그인ID</TableCell>
<TableCell align="center">Email</TableCell>
<TableCell align="center">권한</TableCell>
<TableCell align="center">가입일</TableCell>
<TableCell/>
</TableRow>
</TableHead>
<TableBody>
{ loading &&
<TableLodingProgress colSpan={6}/>
}
{ !loading && users.length <= 0 &&
<TableEmptyRow colSpan={6} text={`관리가 가능한 사용자가 없습니다.`}/>
}
{ !loading && users.length > 0 && users.map( user => {
return (
<TableRow key={`users-index-table-row-${user.id}`}>
<TableCell align="center">{user.id}</TableCell>
<TableCell align="center">{user.group}</TableCell>
<TableCell align="center">{user.username}</TableCell>
<TableCell align="center">{user.email}</TableCell>
<TableCell align="center">{user.role}</TableCell>
<TableCell align="center">{user.createdAt}</TableCell>
<TableCell align="center">
<Button variant="outlined" size="small" color="primary" component={Link} to={{ pathname: `/users/${user.id}`, state: {user: user}}}>상세보기</Button>
<Button variant="outlined" size="small" color="secondary" onClick={() => deleteBtnClick(user.id)}>삭제</Button>
</TableCell>
</TableRow>
)
})}
</TableBody>
</Table>
</TableContainer>
<Box mt={4} alignItems="center" flexWrap="wrap" style={{textAlign: "center", display: "flex", alignItems: "center", justifyContent: "center"}}>
<Pagination count={100} showFirstButton showLastButton variant="outlined" shape="rounded" size="large" page={Number(1)}/>
</Box>
<Grid container direction="column" justify="flex-end" alignItems="flex-end">
<Grid item>
<Button variant="outlined" color="primary" component={Link} to='/users/new'>
신규 담당자 추가
</Button>
</Grid>
</Grid>
</Container>
)
}
Example #25
| Source File: SortableTable.js From covid-19 with MIT License | 5 votes |
|
SortableTable = (props) => {
const classes = useStyles();
const theme = useTheme();
const squish = useMediaQuery(theme.breakpoints.down('xs'));
const {columns, rows, defaultSortColumn} = props;
const [orderingBy, setOrderingBy] = React.useState(defaultSortColumn);
const [direction, setDirection] = React.useState(orderingBy.defaultDirection);
const sortFn = (a, b) =>
compareStable(
a, b, orderingBy.key, columns, direction === orderingBy.defaultDirection);
const sorted = [...rows].sort((a, b) =>
direction === 'asc' ? sortFn(a, b) : sortFn(b, a));
const createUpdateSort = (column) => () => {
setOrderingBy(column);
setDirection(
orderingBy === column
? opposite(direction) : column.defaultDirection);
};
return (
<Table size="small" className={squish ? classes.squishText : ''}>
<TableHead>
<TableRow>
{columns.map((column) =>
<TableCell key={column.key}>
<TableSortLabel
active={orderingBy.key === column.key}
direction={
orderingBy === column ? direction : column.defaultDirection}
hideSortIcon={squish}
onClick={createUpdateSort(column)}
>
{squish ? column.shortLabel || column.label : column.label}
</TableSortLabel>
</TableCell>
)}
</TableRow>
</TableHead>
<TableBody>
{sorted.map((row) =>
<TableRow key={row.id}>
{columns.map(({key, contextKey, renderShortNumber}) =>
<TableCell key={key}>
{render(row[key], renderShortNumber)}
{row[contextKey] && ` (${row[contextKey]})`}
</TableCell>
)}
</TableRow>
)}
</TableBody>
</Table>
);
}
Example #26
| Source File: BorderedTable.js From Designer-Client with GNU General Public License v3.0 | 5 votes |
|
/**
*
* @param {{container: Component, size: number, headers: string[], rows: Object[]}} props
*/
export default function BorderedTable({ container, size, headers, rows }) {
const classes = useStyles();
return (
<TableContainer component={container}>
<Table size={size}>
{headers && (
<TableHead>
<TableRow>
{headers.map((header) => {
return (
<TableCell key={`table-header-cell-${header}`} className={classes.borderedCell}>
{header}
</TableCell>
);
})}
</TableRow>
</TableHead>
)}
<TableBody>
{rows.map((row) => {
return (
<TableRow key={`table-row-${row[0]}`}>
{row.map((col) => {
return (
<TableCell className={classes.borderedCell} key={`table-cell-${col}`}>
{col}
</TableCell>
);
})}
</TableRow>
);
})}
</TableBody>
</Table>
</TableContainer>
);
}
Example #27
| Source File: AuditorsModal.js From akashlytics-deploy with GNU General Public License v3.0 | 5 votes |
|
AuditorsModal = ({ provider, onClose }) => {
const classes = useStyles();
const { auditors } = useAkash();
const onWebsiteClick = (event, website) => {
event.preventDefault();
event.stopPropagation();
window.electron.openUrl(website);
};
return (
<Dialog maxWidth="sm" open={true} onClose={onClose} fullWidth>
<DialogTitle>Audited Attributes</DialogTitle>
<DialogContent dividers className={classes.content}>
<TableContainer>
<Table size="small">
<TableHead>
<TableRow>
<TableCell className={classes.tableHead}>Key</TableCell>
<TableCell className={classes.tableHead}>Value</TableCell>
<TableCell className={classes.tableHead}>Auditors</TableCell>
</TableRow>
</TableHead>
<TableBody>
{provider.attributes.map((a) => {
return (
<TableRow key={a.key}>
<TableCell component="th" scope="row">
{a.key}
</TableCell>
<TableCell>{a.value}</TableCell>
<TableCell>
{a.auditedBy
.filter((x) => auditors.some((y) => y.address === x))
.map((x) => {
const auditor = auditors.find((y) => y.address === x);
return (
<div key={x}>
<Tooltip
classes={{ tooltip: classes.tooltip }}
arrow
interactive
title={
<div>
<LinkTo onClick={(event) => onWebsiteClick(event, auditor.website)} className={classes.websiteLink}>
{auditor.website}
</LinkTo>
<Address address={auditor.address} isCopyable />
</div>
}
>
<Chip label={auditor.name} size="small" className={classes.auditorChip} />
</Tooltip>
</div>
);
})}
</TableCell>
</TableRow>
);
})}
</TableBody>
</Table>
</TableContainer>
</DialogContent>
<DialogActions>
<Button autoFocus variant="contained" onClick={onClose} color="primary" size="small">
Close
</Button>
</DialogActions>
</Dialog>
);
}
Example #28
| Source File: index.js From iiitt with MIT License | 4 votes |
|
export default function VlaParticipants(props) {
const pathName = useLocation().pathname;
useEffect(() => {
document.getElementsByTagName("title")[0].innerHTML = "VLA | Participants";
}, []);
useEffect(() => {
return () => {
document.getElementsByTagName("title")[0].innerHTML = "IIIT Trichy";
};
}, []);
const [participants, setParticipants] = useState(undefined);
const [redirect, setRedirect] = useState(false);
useEffect(() => {
import(`../../json/${pathName.slice(1, pathName.length)}.json`)
.then((data) => setParticipants(data.data))
.catch(() => setRedirect(true));
}, []);
const classes = createStyles();
var ctr = 0;
return (
<div className="page-container">
<Navbar src="vla_navbar.json" homeRoute="/vla" />
<Grid container className="container">
<Grid item xs={false} sm={1} />
<Grid item xs={12} sm={10}>
{redirect ? (
<Redirect to="/404" />
) : (
<>
{participants && (
<TableContainer
component={Paper}
className={classes.table}
gutterBottom
>
<Table>
<TableHead>
<TableRow>
<TableCell
className={`${classes.tableHead} ${classes.tableCell}`}
>
S. No.
</TableCell>
<TableCell
className={`${classes.tableHead} ${classes.tableCell}`}
>
Name
</TableCell>
<TableCell
className={`${classes.tableHead} ${classes.tableCell}`}
>
Designation
</TableCell>
<TableCell
className={`${classes.tableHead} ${classes.tableCell}`}
>
Institute
</TableCell>
<TableCell
className={`${classes.tableHead} ${classes.tableCell}`}
>
State
</TableCell>
</TableRow>
</TableHead>
<TableBody>
{participants.map((participant) => {
ctr++;
return (
<TableRow className={classes.tableRow}>
<TableCell className={classes.tableCell}>
{ctr}
</TableCell>
<TableCell className={classes.tableCell}>
{participant.name}
</TableCell>
<TableCell className={classes.tableCell}>
{participant.designation}
</TableCell>
<TableCell className={classes.tableCell}>
{participant.institute}
</TableCell>
<TableCell className={classes.tableCell}>
{participant.state}
</TableCell>
</TableRow>
);
})}
</TableBody>
</Table>
</TableContainer>
)}
</>
)}
</Grid>
<Grid item xs={false} sm={1} />
</Grid>
<Footer />
</div>
);
}
Example #29
| Source File: filled-wishlist.js From horondi_client_fe with MIT License | 4 votes |
|
FilledWishlist = ({ items }) => {
const { userData } = useSelector(({ User }) => ({
userData: User.userData
}));
const [modalVisibility, setModalVisibility] = useState(false);
const [modalItem, setModalItem] = useState({});
const [wishlist, setWishlist] = useState(items || []);
const [similarProductsList, setSimilarProductsList] = useState([]);
const { cartOperations, isInCart } = useCart(userData);
const { t, i18n } = useTranslation();
const dispatch = useDispatch();
const [isLightTheme] = useContext(ThemeContext);
const language = i18n.language === 'ua' ? 0 : 1;
const styles = useStyles(isLightTheme);
const { wishlist: updatedWishlist, wishlistOperations } = useWishlist();
const { removeFromWishlist } = wishlistOperations;
useEffect(() => {
updatedWishlist && setWishlist([...updatedWishlist].reverse());
}, [updatedWishlist]);
useEffect(() => {
setSimilarProductsList(
items.map((item) => ({
productId: item._id
}))
);
}, [items]);
if (!wishlist.length) return <EmptyWishlist />;
const onModalAction = (action) => {
setModalVisibility(false);
if (action) {
removeFromWishlist(modalItem);
dispatch(setToastMessage(t('product.toastMessage.removedFromWishList')));
dispatch(setToastSettings(TOAST_SETTINGS));
}
};
return (
<>
<div className={styles.root}>
<div className={styles.title}>{t('wishlist.wishlistTitles.filled')}</div>
<div className={styles.table}>
<Table>
<TableHead>
<TableRow classes={{ root: styles.tableHeader }}>
<TableCell>{t('wishlist.wishlistTableFields.item')}</TableCell>
<TableCell>{t('wishlist.wishlistTableFields.price')}</TableCell>
<TableCell />
</TableRow>
</TableHead>
<TableBody>
{wishlist.map((item, i) => (
<WishlistItem
key={i}
item={item}
setModalVisibility={() => {
setModalVisibility(!modalVisibility);
}}
cartOperations={cartOperations}
isInCart={isInCart}
setModalItem={setModalItem}
/>
))}
</TableBody>
</Table>
</div>
{modalVisibility && (
<div>
<Modal
itemName={t(`${modalItem.translationsKey}.name`)}
message={t('modal.modalDeleteFromWishlistMessage')}
isOpen={modalVisibility}
onAction={onModalAction}
language={language}
/>
</div>
)}
</div>
<SimilarProducts cartList={similarProductsList} />
</>
);
}
