@mui/material#TableContainer JavaScript Examples
The following examples show how to use
@mui/material#TableContainer.
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 fireact with MIT License | 6 votes |
|
DataTable = ({columns, rows, totalRows, pageSize, page, handlePageChane, handlePageSizeChange}) => {
return (
<>
<TableContainer component={Paper}>
<Table aria-label="simple table">
<TableHead>
<TableRow>
{columns.map((c,i) =>
<TableCell key={i} style={c.style}>{c.name}</TableCell>
)}
</TableRow>
</TableHead>
<TableBody>
{rows.map((r, i) =>
<TableRow key={i}>
{columns.map((c, k) =>
<TableCell key={k}>{r[c.field]}</TableCell>
)}
</TableRow>
)}
</TableBody>
</Table>
</TableContainer>
<TablePagination
rowsPerPageOptions={[10,20,50,100]}
component="div"
count={totalRows}
rowsPerPage={pageSize}
page={page}
onPageChange={handlePageChane}
onRowsPerPageChange={handlePageSizeChange}
/>
</>
)
}
Example #2
| Source File: Status.js From admin-web with GNU Affero General Public License v3.0 | 5 votes |
|
render() {
const { classes, t, vhosts } = this.props;
const { snackbar, data, interval, vhost } = this.state;
const { connections, serverZones, filterZones } = data;
return (
<TableViewContainer
headline={t("Live Status") + (data.hostName ? ' - ' + data.hostName : '')}
subtitle={t('livestatus_sub')}
href="https://docs.grommunio.com/admin/administration.html#live-status"
snackbar={snackbar}
onSnackbarClose={() => this.setState({ snackbar: '' })}
>
<TextField
select
value={vhost}
label="Vhost"
className={classes.tf}
onChange={this.handleChange('vhost')}
>
{vhosts.map((host, key) =>
<MenuItem value={host} key={key}>{host}</MenuItem>
)}
</TextField>
<TextField
select
value={interval}
label={t("Update interval")}
className={classes.tf}
onChange={this.handleIntervalChange}
>
<MenuItem value={1000}>1 {t("second")}</MenuItem>
<MenuItem value={2000}>2 {t("seconds")}</MenuItem>
<MenuItem value={3000}>3 {t("seconds")}</MenuItem>
<MenuItem value={5000}>5 {t("seconds")}</MenuItem>
<MenuItem value={10000}>10 {t("seconds")}</MenuItem>
</TextField>
<Typography variant="h2" className={classes.pageTitle}>
{t("Connections")}
</Typography>
<Typography variant="caption" className={classes.subtitle}>
Current active connections being processed
</Typography>
<Connections data={connections || {}} />
<Typography variant="h2" className={classes.pageTitle}>
{t("Requests")}
</Typography>
<Typography variant="caption" className={classes.subtitle}>
All processed requests by the services
</Typography>
<Requests data={connections || {}} />
<div className={classes.logViewer}>
<TableContainer component={Paper} className={classes.paper}>
<div style={{ marginBottom: 8 }}>
<Typography variant="h5">
{t("Host details")}
</Typography>
<Typography variant="caption">
Detailed and summarized overview over all requests
</Typography>
</div>
<ServerZones serverZones={this.toSortedArray(serverZones || {})} />
<FilterZones filterZones={filterZones || {}} />
</TableContainer>
</div>
</TableViewContainer>
);
}
Example #3
| Source File: User.js From Django-REST-Framework-React-BoilerPlate with MIT License | 4 votes |
|
export default function User() {
const userLogin = useSelector((state) => state.userLogin);
const { userInfo } = userLogin;
const listUser = useSelector((state) => state.listUser);
const { loading, error, USERLIST } = listUser;
const [page, setPage] = useState(0);
const [order, setOrder] = useState('asc');
const [selected, setSelected] = useState([]);
const [orderBy, setOrderBy] = useState('name');
const [filterName, setFilterName] = useState('');
const [rowsPerPage, setRowsPerPage] = useState(5);
const handleRequestSort = (event, property) => {
const isAsc = orderBy === property && order === 'asc';
setOrder(isAsc ? 'desc' : 'asc');
setOrderBy(property);
};
const handleSelectAllClick = (event) => {
if (event.target.checked) {
const newSelecteds = USERLIST.map((n) => n.name);
setSelected(newSelecteds);
return;
}
setSelected([]);
};
const handleClick = (event, name) => {
const selectedIndex = selected.indexOf(name);
let newSelected = [];
if (selectedIndex === -1) {
newSelected = newSelected.concat(selected, name);
} else if (selectedIndex === 0) {
newSelected = newSelected.concat(selected.slice(1));
} else if (selectedIndex === selected.length - 1) {
newSelected = newSelected.concat(selected.slice(0, -1));
} else if (selectedIndex > 0) {
newSelected = newSelected.concat(selected.slice(0, selectedIndex), selected.slice(selectedIndex + 1));
}
setSelected(newSelected);
};
const handleChangePage = (event, newPage) => {
setPage(newPage);
};
const handleChangeRowsPerPage = (event) => {
setRowsPerPage(parseInt(event.target.value, 10));
setPage(0);
};
const handleFilterByName = (event) => {
setFilterName(event.target.value);
};
const emptyRows = page > 0 ? Math.max(0, (1 + page) * rowsPerPage - USERLIST.length) : 0;
const filteredUsers = applySortFilter(USERLIST, getComparator(order, orderBy), filterName);
const isUserNotFound = filteredUsers.length === 0;
return (
<Page title="User">
<Container>
{userInfo ? <UsersListCall /> : null}
<Stack direction="row" alignItems="center" justifyContent="space-between" mb={5}>
<Typography variant="h4" gutterBottom>
User
</Typography>
<Button variant="contained" component={RouterLink} to="#" startIcon={<Iconify icon="eva:plus-fill" />}>
New User
</Button>
</Stack>
<Card>
<UserListToolbar numSelected={selected.length} filterName={filterName} onFilterName={handleFilterByName} />
{error ? (
<Alert severity="error">
<AlertTitle>List Loading Error</AlertTitle>
{error}
</Alert>
) : null}
{loading ? (
<Box sx={{ width: '100%' }}>
<LinearProgress />
</Box>
) : null}
<Scrollbar>
<TableContainer sx={{ minWidth: 800 }}>
<Table>
<UserListHead
order={order}
orderBy={orderBy}
headLabel={TABLE_HEAD}
rowCount={USERLIST.length}
numSelected={selected.length}
onRequestSort={handleRequestSort}
onSelectAllClick={handleSelectAllClick}
/>
<TableBody>
{filteredUsers.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((row) => {
const { id, name, role, status, company, avatarUrl, isVerified } = row;
const isItemSelected = selected.indexOf(name) !== -1;
return (
<TableRow
hover
key={id}
tabIndex={-1}
role="checkbox"
selected={isItemSelected}
aria-checked={isItemSelected}
>
<TableCell padding="checkbox">
<Checkbox checked={isItemSelected} onChange={(event) => handleClick(event, name)} />
</TableCell>
<TableCell component="th" scope="row" padding="none">
<Stack direction="row" alignItems="center" spacing={2}>
<Avatar alt={name} src={avatarUrl} />
<Typography variant="subtitle2" noWrap>
{name}
</Typography>
</Stack>
</TableCell>
<TableCell align="left">{company}</TableCell>
<TableCell align="left">{role}</TableCell>
<TableCell align="left">{isVerified ? 'Yes' : 'No'}</TableCell>
<TableCell align="left">
<Label variant="ghost" color={(status === 'banned' && 'error') || 'success'}>
{sentenceCase(status)}
</Label>
</TableCell>
<TableCell align="right">
<UserMoreMenu />
</TableCell>
</TableRow>
);
})}
{emptyRows > 0 && (
<TableRow style={{ height: 53 * emptyRows }}>
<TableCell colSpan={6} />
</TableRow>
)}
</TableBody>
{isUserNotFound && (
<TableBody>
<TableRow>
<TableCell align="center" colSpan={6} sx={{ py: 3 }}>
<SearchNotFound searchQuery={filterName} />
</TableCell>
</TableRow>
</TableBody>
)}
</Table>
</TableContainer>
</Scrollbar>
<TablePagination
rowsPerPageOptions={[5, 10, 25]}
component="div"
count={USERLIST.length}
rowsPerPage={rowsPerPage}
page={page}
onPageChange={handleChangePage}
onRowsPerPageChange={handleChangeRowsPerPage}
/>
</Card>
</Container>
</Page>
);
}
