Initial dev on DataTable component.

This commit is contained in:
Mike Cao 2023-08-25 11:54:44 -07:00
parent 7107336b49
commit d6a27b8e99
19 changed files with 223 additions and 53 deletions

View file

@ -1,14 +1,15 @@
import styles from './Pager.module.css';
import classNames from 'classnames';
import { Button, Flexbox, Icon, Icons } from 'react-basics';
import useMessages from 'components/hooks/useMessages';
import styles from './Pager.module.css';
export function Pager({ page, pageSize, count, onPageChange }) {
export function Pager({ page, pageSize, count, onPageChange, className }) {
const { formatMessage, labels } = useMessages();
const maxPage = Math.ceil(count / pageSize);
const maxPage = pageSize && count ? Math.ceil(count / pageSize) : 0;
const lastPage = page === maxPage;
const firstPage = page === 1;
if (count === 0) {
if (count === 0 || !maxPage) {
return null;
}
@ -24,7 +25,7 @@ export function Pager({ page, pageSize, count, onPageChange }) {
}
return (
<Flexbox justifyContent="center" className={styles.container}>
<Flexbox justifyContent="center" className={classNames(styles.container, className)}>
<Button onClick={() => handlePageChange(-1)} disabled={firstPage}>
<Icon rotate={90}>
<Icons.ChevronDown />