@material-ui/lab#Pagination JavaScript Examples
The following examples show how to use
@material-ui/lab#Pagination.
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: order-history-pagination.js From horondi_client_fe with MIT License | 6 votes |
|
OrderHistoryPagination = ({ data }) => {
const styles = useStyles();
const [currentPage, quantityPages, changeHandler] = data;
const changeHandlerClick = (_, value) => {
changeHandler(value);
};
return (
<div className={styles.paginationDiv}>
<Pagination
count={quantityPages}
variant={TEXT_FIELD_VARIANT.OUTLINED}
shape={TEXT_FIELD_VARIANT.ROUNTED}
page={currentPage}
onChange={changeHandlerClick}
/>
</div>
);
}
Example #2
| Source File: index.js From flame-coach-web with MIT License | 5 votes |
|
ProductList = () => {
const classes = useStyles();
const [products] = useState(data);
return (
<Page
className={classes.root}
title="Products"
>
<Container maxWidth={false}>
<Toolbar />
<Box mt={3}>
<Grid
container
spacing={3}
>
{products.map((product) => (
<Grid
item
key={product.id}
lg={4}
md={6}
xs={12}
>
<ProductCard
className={classes.productCard}
product={product}
/>
</Grid>
))}
</Grid>
</Box>
<Box
mt={3}
display="flex"
justifyContent="center"
>
<Pagination
color="primary"
count={3}
size="small"
/>
</Box>
</Container>
</Page>
);
}
Example #3
| Source File: Dashboard.js From Registration-Login-and-CRUD-Action-using-MERN-stack with GNU General Public License v3.0 | 4 votes |
|
render() {
return (
<div>
{this.state.loading && <LinearProgress size={40} />}
<div>
<h2>Dashboard</h2>
<Button
className="button_style"
variant="contained"
color="primary"
size="small"
onClick={this.handleProductOpen}
>
Add Product
</Button>
<Button
className="button_style"
variant="contained"
size="small"
onClick={this.logOut}
>
Log Out
</Button>
</div>
{/* Edit Product */}
<Dialog
open={this.state.openProductEditModal}
onClose={this.handleProductClose}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<DialogTitle id="alert-dialog-title">Edit Product</DialogTitle>
<DialogContent>
<TextField
id="standard-basic"
type="text"
autoComplete="off"
name="name"
value={this.state.name}
onChange={this.onChange}
placeholder="Product Name"
required
/><br />
<TextField
id="standard-basic"
type="text"
autoComplete="off"
name="desc"
value={this.state.desc}
onChange={this.onChange}
placeholder="Description"
required
/><br />
<TextField
id="standard-basic"
type="number"
autoComplete="off"
name="price"
value={this.state.price}
onChange={this.onChange}
placeholder="Price"
required
/><br />
<TextField
id="standard-basic"
type="number"
autoComplete="off"
name="discount"
value={this.state.discount}
onChange={this.onChange}
placeholder="Discount"
required
/><br /><br />
<Button
variant="contained"
component="label"
> Upload
<input
id="standard-basic"
type="file"
accept="image/*"
name="file"
value={this.state.file}
onChange={this.onChange}
id="fileInput"
placeholder="File"
hidden
/>
</Button>
{this.state.fileName}
</DialogContent>
<DialogActions>
<Button onClick={this.handleProductEditClose} color="primary">
Cancel
</Button>
<Button
disabled={this.state.name == '' || this.state.desc == '' || this.state.discount == '' || this.state.price == ''}
onClick={(e) => this.updateProduct()} color="primary" autoFocus>
Edit Product
</Button>
</DialogActions>
</Dialog>
{/* Add Product */}
<Dialog
open={this.state.openProductModal}
onClose={this.handleProductClose}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<DialogTitle id="alert-dialog-title">Add Product</DialogTitle>
<DialogContent>
<TextField
id="standard-basic"
type="text"
autoComplete="off"
name="name"
value={this.state.name}
onChange={this.onChange}
placeholder="Product Name"
required
/><br />
<TextField
id="standard-basic"
type="text"
autoComplete="off"
name="desc"
value={this.state.desc}
onChange={this.onChange}
placeholder="Description"
required
/><br />
<TextField
id="standard-basic"
type="number"
autoComplete="off"
name="price"
value={this.state.price}
onChange={this.onChange}
placeholder="Price"
required
/><br />
<TextField
id="standard-basic"
type="number"
autoComplete="off"
name="discount"
value={this.state.discount}
onChange={this.onChange}
placeholder="Discount"
required
/><br /><br />
<Button
variant="contained"
component="label"
> Upload
<input
id="standard-basic"
type="file"
accept="image/*"
// inputProps={{
// accept: "image/*"
// }}
name="file"
value={this.state.file}
onChange={this.onChange}
id="fileInput"
placeholder="File"
hidden
required
/>
</Button>
{this.state.fileName}
</DialogContent>
<DialogActions>
<Button onClick={this.handleProductClose} color="primary">
Cancel
</Button>
<Button
disabled={this.state.name == '' || this.state.desc == '' || this.state.discount == '' || this.state.price == '' || this.state.file == null}
onClick={(e) => this.addProduct()} color="primary" autoFocus>
Add Product
</Button>
</DialogActions>
</Dialog>
<br />
<TableContainer>
<TextField
id="standard-basic"
type="search"
autoComplete="off"
name="search"
value={this.state.search}
onChange={this.onChange}
placeholder="Search by product name"
required
/>
<Table aria-label="simple table">
<TableHead>
<TableRow>
<TableCell align="center">Name</TableCell>
<TableCell align="center">Image</TableCell>
<TableCell align="center">Description</TableCell>
<TableCell align="center">Price</TableCell>
<TableCell align="center">Discount</TableCell>
<TableCell align="center">Action</TableCell>
</TableRow>
</TableHead>
<TableBody>
{this.state.products.map((row) => (
<TableRow key={row.name}>
<TableCell align="center" component="th" scope="row">
{row.name}
</TableCell>
<TableCell align="center"><img src={`http://localhost:2000/${row.image}`} width="70" height="70" /></TableCell>
<TableCell align="center">{row.desc}</TableCell>
<TableCell align="center">{row.price}</TableCell>
<TableCell align="center">{row.discount}</TableCell>
<TableCell align="center">
<Button
className="button_style"
variant="outlined"
color="primary"
size="small"
onClick={(e) => this.handleProductEditOpen(row)}
>
Edit
</Button>
<Button
className="button_style"
variant="outlined"
color="secondary"
size="small"
onClick={(e) => this.deleteProduct(row._id)}
>
Delete
</Button>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
<br />
<Pagination count={this.state.pages} page={this.state.page} onChange={this.pageChange} color="primary" />
</TableContainer>
</div>
);
}
Example #4
| Source File: product-list-page.js From horondi_client_fe with MIT License | 4 votes |
|
ProductListPage = ({ width }) => {
const { search } = useLocation();
const [searchParams, setSearchParams] = useState(new URLSearchParams(search));
const sortParamsFromQuery = searchParams.get(URL_QUERIES_NAME.sort);
const nameFilter = searchParams.get(URL_QUERIES_NAME.nameFilter);
const { t } = useTranslation();
const styles = useStyles();
const history = useHistory();
const [products, setProducts] = useState([]);
const [paginationParams, setPaginationParams] = useState({
pagesCount: 1,
currentPage: +searchParams.get(URL_QUERIES_NAME.page) || 1,
countPerPage: +searchParams.get(URL_QUERIES_NAME.countPerPage) || 9
});
const [sortParams, setSortParams] = useState(() => getSortParamsFromQuery(sortParamsFromQuery));
const [filterParams, setFilterParams] = useState(() => getFilterParamsFromQuery(searchParams));
const [filterMenuStatus, setFilterMenuStatus] = useState(false);
const { pagesCount, currentPage, countPerPage } = paginationParams;
const variables = {
...sortParams,
...filterParams,
search: nameFilter,
limit: Math.ceil(Math.abs(countPerPage)) || 9,
skip:
Math.ceil(Math.abs(currentPage)) > 1
? Math.ceil(Math.abs(countPerPage)) * (Math.ceil(Math.abs(currentPage)) - 1)
: 0
};
const handleDrawerToggle = () => {
setFilterMenuStatus((prevState) => !prevState);
};
const checkWidth = () => TEMPORARY_WIDTHS.find((element) => element === width);
const drawerVariant = checkWidth() ? DRAWER_TEMPORARY : DRAWER_PERMANENT;
const { data, loading, error } = useQuery(getFilteredProductsQuery, {
variables
});
useEffect(() => {
setSearchParams(new URLSearchParams(search));
}, [search]);
useEffect(() => {
setSortParams(() => getSortParamsFromQuery(sortParamsFromQuery));
setPaginationParams((prevState) => ({
...prevState,
currentPage: +searchParams.get(URL_QUERIES_NAME.page) || 1,
countPerPage: +searchParams.get(URL_QUERIES_NAME.countPerPage) || 9
}));
setFilterParams(getFilterParamsFromQuery(searchParams));
}, [searchParams, sortParamsFromQuery]);
const changeHandler = (_e, value) => {
searchParams.set(URL_QUERIES_NAME.page, value);
history.push(`?${searchParams.toString()}`);
};
const handleFilterShow = () => setFilterMenuStatus((prevState) => !prevState);
useEffect(() => {
if (data) {
setProducts(data.getProducts.items);
setPaginationParams((prevState) => ({
...prevState,
pagesCount: Math.ceil(data.getProducts.count / countPerPage)
}));
}
}, [data]);
const itemsToShow = () => {
if (products?.length > 0) {
return products.map((product) => <ProductListItem key={product._id} product={product} />);
}
return null;
};
const showedItems = itemsToShow();
const paginationToShow = (
<Pagination count={pagesCount} variant='outlined' page={currentPage} onChange={changeHandler} />
);
const paginationCondition = () => {
if (
(products?.length < countPerPage && Number(searchParams.get(URL_QUERIES_NAME.page)) === 1) ||
!showedItems.length
) {
return null;
}
return <div className={styles.paginationDiv}>{paginationToShow}</div>;
};
const productLoadedCondition = () => {
if (loading || error) {
return errorOrLoadingHandler(error, loading);
}
if (showedItems?.length) {
return (
<div className={styles.productsWrapper}>
<Grid container spacing={2} className={styles.productsDiv}>
{showedItems}
</Grid>
{paginationCondition()}
</div>
);
}
return (
<div className={styles.defaultBlock}>
<div>{t('productListPage.productNotFound')}</div>
<BackpackIcon className={styles.defaultBackpackIcon} />
</div>
);
};
return (
<Container maxWidth='lg'>
<div className={styles.root}>
<Typography className={styles.header}>{t('common.scrollbar.catalog')}</Typography>
<div className={styles.sortDiv}>
<ProductSort />
</div>
<div className={styles.filterButtonBlock}>
<Button className={styles.button} variant='contained' onClick={handleFilterShow}>
{t('common.showFilters')}
</Button>
</div>
<div className={styles.list}>
<Drawer
id='menuDrawer'
className={styles.drawer}
variant={drawerVariant}
open={filterMenuStatus}
onClose={handleDrawerToggle}
style={{ zIndex: 99999 }}
classes={{
paper: styles.drawerPaper
}}
>
<div className={styles.drawerContainer}>
<ProductFilter filterParams={filterParams} />
</div>
</Drawer>
<div className={styles.filterMenu}>
<ProductFilter filterParams={filterParams} />
</div>
{productLoadedCondition()}
</div>
</div>
</Container>
);
}
