@mui/material#TablePagination JavaScript Examples
The following examples show how to use
@mui/material#TablePagination.
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: pagination.js From react-table-library with MIT License | 5 votes |
|
Component = () => {
const data = { nodes };
const materialTheme = getTheme(DEFAULT_OPTIONS);
const theme = useTheme(materialTheme);
const pagination = usePagination(data, {
state: {
page: 0,
size: 2,
},
onChange: onPaginationChange,
});
function onPaginationChange(action, state) {
console.log(action, state);
}
const COLUMNS = [
{ label: 'Task', renderCell: (item) => item.name },
{
label: 'Deadline',
renderCell: (item) =>
item.deadline.toLocaleDateString('en-US', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
}),
},
{ label: 'Type', renderCell: (item) => item.type },
{
label: 'Complete',
renderCell: (item) => item.isComplete.toString(),
},
{ label: 'Tasks', renderCell: (item) => item.nodes?.length },
];
return (
<>
<CompactTable columns={COLUMNS} data={data} theme={theme} pagination={pagination} />
<br />
<Stack spacing={10}>
<TablePagination
count={data.nodes.length}
page={pagination.state.page}
rowsPerPage={pagination.state.size}
rowsPerPageOptions={[1, 2, 5]}
onRowsPerPageChange={(event) =>
pagination.fns.onSetSize(parseInt(event.target.value, 10))
}
onPageChange={(event, page) => pagination.fns.onSetPage(page)}
/>
</Stack>
<br />
<DocumentationSee anchor={'Features/' + key} />
</>
);
}
Example #3
| Source File: PaginationTable.jsx From matx-react with MIT License | 5 votes |
|
PaginationTable = () => {
const [page, setPage] = useState(0);
const [rowsPerPage, setRowsPerPage] = useState(5);
const handleChangePage = (_, newPage) => {
setPage(newPage);
};
const handleChangeRowsPerPage = (event) => {
setRowsPerPage(+event.target.value);
setPage(0);
};
return (
<Box width="100%" overflow="auto">
<StyledTable>
<TableHead>
<TableRow>
<TableCell align="left">Name</TableCell>
<TableCell align="center">Company</TableCell>
<TableCell align="center">Start Date</TableCell>
<TableCell align="center">Status</TableCell>
<TableCell align="center">Amount</TableCell>
<TableCell align="right">Action</TableCell>
</TableRow>
</TableHead>
<TableBody>
{subscribarList
.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
.map((subscriber, index) => (
<TableRow key={index}>
<TableCell align="left">{subscriber.name}</TableCell>
<TableCell align="center">{subscriber.company}</TableCell>
<TableCell align="center">{subscriber.date}</TableCell>
<TableCell align="center">{subscriber.status}</TableCell>
<TableCell align="center">${subscriber.amount}</TableCell>
<TableCell align="right">
<IconButton>
<Icon color="error">close</Icon>
</IconButton>
</TableCell>
</TableRow>
))}
</TableBody>
</StyledTable>
<TablePagination
sx={{ px: 2 }}
page={page}
component="div"
rowsPerPage={rowsPerPage}
count={subscribarList.length}
onPageChange={handleChangePage}
rowsPerPageOptions={[5, 10, 25]}
onRowsPerPageChange={handleChangeRowsPerPage}
nextIconButtonProps={{ "aria-label": "Next Page" }}
backIconButtonProps={{ "aria-label": "Previous Page" }}
/>
</Box>
);
}
Example #4
| Source File: ResourcePage.jsx From Edlib with GNU General Public License v3.0 | 4 votes |
|
ResourcePage = ({ filters, showDeleteButton = false }) => {
const { t } = useTranslation();
const theme = useTheme();
const forceGridView = useMediaQuery(theme.breakpoints.down(1400));
const [filtersExpanded, setFiltersExpanded] = React.useState(false);
const [sortingOrder, setSortingOrder] = React.useState(useDefaultOrder());
const [page, setPage] = React.useState(0);
const [pageSize, setPageSize] = React.useState(40);
const [_isGridView, setIsGridView] = React.useState(false);
const filterUtils = FilterUtils(filters);
const isGridView = forceGridView || _isGridView;
const { error, loading, resources, pagination, refetch, filterCount } =
useGetResources(
React.useMemo(
() => ({
limit: pageSize,
offset: page * pageSize,
resourceCapabilities: ['view'],
orderBy: sortingOrder,
...(filters && filters.requestData),
}),
[page, sortingOrder, filters && filters.requestData, pageSize]
)
);
React.useEffect(() => {
setPage(0);
}, [sortingOrder, filters.requestData]);
const setSearch = React.useCallback(
(searchText) => {
filters.setSearchInput(searchText);
if (sortingOrder !== resourceOrders.RELEVANT_DESC) {
setSortingOrder(resourceOrders.RELEVANT_DESC);
}
},
[filters, sortingOrder, setSortingOrder]
);
const sortOrderDropDown = (
<FormControl variant="outlined">
<InputLabel>{t('Sortering')}</InputLabel>
<Select
MenuProps={{
style: { zIndex: 2051 },
anchorOrigin: {
vertical: 'bottom',
horizontal: 'center',
},
transformOrigin: {
vertical: 'top',
horizontal: 'center',
},
}}
value={sortingOrder}
onChange={(e) => setSortingOrder(e.target.value)}
label={getOrderText(t, sortingOrder)}
>
{[
resourceOrders.RELEVANT_DESC,
resourceOrders.VIEWS_DESC,
resourceOrders.VIEWS_ASC,
resourceOrders.UPDATED_AT_DESC,
resourceOrders.UPDATED_AT_ASC,
].map((value, index) => (
<MenuItem key={index} value={value}>
{getOrderText(t, value)}
</MenuItem>
))}
</Select>
</FormControl>
);
return (
<StyledResourcePage>
<Box
sx={[
{
backgroundColor: 'white',
boxShadow: '5px 0 5px 0 rgba(0, 0, 0, 0.16)',
overflowY: 'auto',
position: {
xs: 'absolute',
md: 'initial',
},
right: {
xs: '110%',
md: 'initial',
},
zIndex: {
xs: 2,
md: 'initial',
},
},
filtersExpanded && {
width: '100vw',
right: 'unset',
left: 0,
},
]}
>
<ResourceFilters filters={filters} filterCount={filterCount} />
</Box>
<Box
onClick={() => setFiltersExpanded(false)}
sx={[
{
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0,
backgroundColor: 'rgba(0, 0, 0, 0.5)',
zIndex: 1,
cursor: 'pointer',
},
filtersExpanded && {
display: {
xs: 'block',
md: 'none',
},
},
!filtersExpanded && {
display: 'none',
},
]}
/>
<div className="pageContent">
<div className="contentOptions">
<Box display="flex" paddingRight={1}>
<Box
paddingRight={1}
style={{
width: 400,
}}
>
<TextField
fullWidth
label={t('Søk')}
variant="outlined"
value={filters.searchInput}
onChange={(e) => setSearch(e.target.value)}
InputProps={{
endAdornment: (
<InputAdornment position="end">
<Icon>
<SearchIcon />
</Icon>
</InputAdornment>
),
}}
/>
</Box>
<div
style={{
width: 200,
}}
>
<LanguageDropdown
language={
filters.languages.length !== 0
? filters.languages[0]
: null
}
setLanguage={(value) =>
filters.languages.setValue(
value ? [value] : []
)
}
/>
</div>
</Box>
<div>{sortOrderDropDown}</div>
</div>
<Box
pt={1}
sx={{
display: {
xs: 'block',
md: 'none',
},
}}
>
<Button
color="primary"
variant="contained"
onClick={() => setFiltersExpanded(!filtersExpanded)}
startIcon={<TuneIcon />}
>
{t('filter', { count: 2 })}
</Button>
</Box>
<Box
display="flex"
flexDirection="row"
justifyContent="space-between"
pt={1}
>
<Box>
<FilterChips
chips={filterUtils.getChipsFromFilters()}
/>
</Box>
<Box>
{!forceGridView && (
<IconButton
onClick={() => setIsGridView(!isGridView)}
size="large"
>
{isGridView ? <ListIcon /> : <ViewModuleIcon />}
</IconButton>
)}
</Box>
</Box>
<Content>
<div style={{ marginTop: 20 }}>
{loading && <Spinner />}
{error && <div>{t('Noe skjedde')}</div>}
{!loading && !error && resources && !isGridView && (
<ResourceTable
totalCount={pagination.totalCount}
resources={resources}
refetch={refetch}
showDeleteButton={showDeleteButton}
sortingOrder={sortingOrder}
setSortingOrder={setSortingOrder}
/>
)}
{!loading && !error && resources && isGridView && (
<CardView
totalCount={pagination.totalCount}
resources={resources}
refetch={refetch}
showDeleteButton={showDeleteButton}
/>
)}
</div>
{pagination && (
<PaginationWrapper>
<TablePagination
component="div"
count={pagination.totalCount}
page={page}
onPageChange={(e, page) => {
setPage(page);
}}
rowsPerPage={pageSize}
onRowsPerPageChange={(e, pageSize) => {
setPageSize(pageSize);
setPage(0);
}}
rowsPerPageOptions={[40]}
/>
</PaginationWrapper>
)}
</Content>
</div>
</StyledResourcePage>
);
}
Example #5
| Source File: UserDataArea.js From react-saas-template with MIT License | 4 votes |
|
function CustomTable(props) {
const { pushMessageToSnackbar, classes, targets, setTargets } = props;
const [order, setOrder] = useState("asc");
const [orderBy, setOrderBy] = useState(null);
const [page, setPage] = useState(0);
const [isDeleteTargetDialogOpen, setIsDeleteTargetDialogOpen] = useState(
false
);
const [deleteTargetDialogRow, setDeleteTargetDialogRow] = useState(null);
const [isDeleteTargetLoading, setIsDeleteTargetLoading] = useState(false);
const handleRequestSort = useCallback(
(__, property) => {
const _orderBy = property;
let _order = "desc";
if (orderBy === property && order === "desc") {
_order = "asc";
}
setOrder(_order);
setOrderBy(_orderBy);
},
[setOrder, setOrderBy, order, orderBy]
);
const deleteTarget = useCallback(() => {
setIsDeleteTargetLoading(true);
setTimeout(() => {
setIsDeleteTargetDialogOpen(false);
setIsDeleteTargetLoading(false);
const _targets = [...targets];
const index = _targets.findIndex(
(element) => element.id === deleteTargetDialogRow.id
);
_targets.splice(index, 1);
setTargets(_targets);
pushMessageToSnackbar({
text: "Your friend has been removed",
});
}, 1500);
}, [
setIsDeleteTargetDialogOpen,
setIsDeleteTargetLoading,
pushMessageToSnackbar,
setTargets,
deleteTargetDialogRow,
targets,
]);
const handleChangePage = useCallback(
(_, page) => {
setPage(page);
},
[setPage]
);
const handleDeleteTargetDialogClose = useCallback(() => {
setIsDeleteTargetDialogOpen(false);
}, [setIsDeleteTargetDialogOpen]);
const handleDeleteTargetDialogOpen = useCallback(
(row) => {
setIsDeleteTargetDialogOpen(true);
setDeleteTargetDialogRow(row);
},
[setIsDeleteTargetDialogOpen, setDeleteTargetDialogRow]
);
const toggleTarget = useCallback(
(row) => {
const _targets = [...targets];
const index = _targets.findIndex((element) => element.id === row.id);
row.isActivated = !row.isActivated;
_targets[index] = row;
if (row.isActivated) {
pushMessageToSnackbar({
text: "The row is now activated",
});
} else {
pushMessageToSnackbar({
text: "The row is now deactivated",
});
}
setTargets(_targets);
},
[pushMessageToSnackbar, targets, setTargets]
);
return (
<Accordion>
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
<Typography>Some user data</Typography>
</AccordionSummary>
<ConfirmationDialog
open={isDeleteTargetDialogOpen}
title="Confirmation"
content={
deleteTargetDialogRow ? (
<span>
{"Do you really want to remove the friend "}
<b>{deleteTargetDialogRow.name}</b>
{" from your list?"}
</span>
) : null
}
onClose={handleDeleteTargetDialogClose}
onConfirm={deleteTarget}
loading={isDeleteTargetLoading}
/>
<Box width="100%">
<div className={classes.tableWrapper}>
{targets.length > 0 ? (
<Table aria-labelledby="tableTitle">
<EnhancedTableHead
order={order}
orderBy={orderBy}
onRequestSort={handleRequestSort}
rowCount={targets.length}
rows={rows}
/>
<TableBody>
{stableSort(targets, getSorting(order, orderBy))
.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
.map((row, index) => (
<TableRow hover tabIndex={-1} key={index}>
<TableCell
component="th"
scope="row"
className={classes.firstData}
>
<Avatar
className={classes.avatar}
src={row.profilePicUrl}
/>
</TableCell>
<TableCell component="th" scope="row">
{row.name}
</TableCell>
<TableCell component="th" scope="row">
{row.number1}
</TableCell>
<TableCell component="th" scope="row">
{row.number2}
</TableCell>
<TableCell component="th" scope="row">
{row.number3}
</TableCell>
<TableCell component="th" scope="row">
{row.number4}
</TableCell>
<TableCell component="th" scope="row">
<Box display="flex" justifyContent="flex-end">
{row.isActivated ? (
<IconButton
className={classes.iconButton}
onClick={() => {
toggleTarget(row);
}}
aria-label="Pause"
size="large">
<PauseCircleOutlineIcon
className={classes.blackIcon}
/>
</IconButton>
) : (
<IconButton
className={classes.iconButton}
color="primary"
onClick={() => {
toggleTarget(row);
}}
aria-label="Resume"
size="large">
<PlayCirlceOutlineIcon />
</IconButton>
)}
<IconButton
className={classes.iconButton}
onClick={() => {
handleDeleteTargetDialogOpen(row);
}}
aria-label="Delete"
size="large">
<DeleteIcon className={classes.blackIcon} />
</IconButton>
</Box>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
) : (
<Box m={2}>
<HighlightedInformation>
No friends added yet.
</HighlightedInformation>
</Box>
)}
</div>
<div className={classes.alignRight}>
<TablePagination
component="div"
count={targets.length}
rowsPerPage={rowsPerPage}
page={page}
backIconButtonProps={{
"aria-label": "Previous Page",
}}
nextIconButtonProps={{
"aria-label": "Next Page",
}}
onPageChange={handleChangePage}
classes={{
select: classes.dNone,
selectIcon: classes.dNone,
actions: targets.length > 0 ? classes.dBlock : classes.dNone,
caption: targets.length > 0 ? classes.dBlock : classes.dNone,
}}
labelRowsPerPage=""
/>
</div>
</Box>
</Accordion>
);
}
Example #6
| Source File: PostContent.js From react-saas-template with MIT License | 4 votes |
|
function PostContent(props) {
const {
pushMessageToSnackbar,
setPosts,
posts,
openAddPostModal,
classes,
} = props;
const [page, setPage] = useState(0);
const [isDeletePostDialogOpen, setIsDeletePostDialogOpen] = useState(false);
const [isDeletePostDialogLoading, setIsDeletePostDialogLoading] = useState(
false
);
const closeDeletePostDialog = useCallback(() => {
setIsDeletePostDialogOpen(false);
setIsDeletePostDialogLoading(false);
}, [setIsDeletePostDialogOpen, setIsDeletePostDialogLoading]);
const deletePost = useCallback(() => {
setIsDeletePostDialogLoading(true);
setTimeout(() => {
const _posts = [...posts];
const index = _posts.find((element) => element.id === deletePost.id);
_posts.splice(index, 1);
setPosts(_posts);
pushMessageToSnackbar({
text: "Your post has been deleted",
});
closeDeletePostDialog();
}, 1500);
}, [
posts,
setPosts,
setIsDeletePostDialogLoading,
pushMessageToSnackbar,
closeDeletePostDialog,
]);
const onDelete = useCallback(() => {
setIsDeletePostDialogOpen(true);
}, [setIsDeletePostDialogOpen]);
const handleChangePage = useCallback(
(__, page) => {
setPage(page);
},
[setPage]
);
const printImageGrid = useCallback(() => {
if (posts.length > 0) {
return (
<Box p={1}>
<Grid container spacing={1}>
{posts
.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
.map((post) => (
<Grid item xs={6} sm={4} md={3} key={post.id}>
<SelfAligningImage
src={post.src}
title={post.name}
timeStamp={post.timestamp}
options={[
{
name: "Delete",
onClick: () => {
onDelete(post);
},
icon: <DeleteIcon />,
},
]}
/>
</Grid>
))}
</Grid>
</Box>
);
}
return (
<Box m={2}>
<HighlightedInformation>
No posts added yet. Click on "NEW" to create your first one.
</HighlightedInformation>
</Box>
);
}, [posts, onDelete, page]);
return (
<Paper>
<Toolbar className={classes.toolbar}>
<Typography variant="h6">Your Posts</Typography>
<Button
variant="contained"
color="secondary"
onClick={openAddPostModal}
disableElevation
>
Add Post
</Button>
</Toolbar>
<Divider />
{printImageGrid()}
<TablePagination
component="div"
count={posts.length}
rowsPerPage={rowsPerPage}
page={page}
backIconButtonProps={{
"aria-label": "Previous Page",
}}
nextIconButtonProps={{
"aria-label": "Next Page",
}}
onPageChange={handleChangePage}
classes={{
select: classes.dNone,
selectIcon: classes.dNone,
actions: posts.length > 0 ? classes.dBlock : classes.dNone,
caption: posts.length > 0 ? classes.dBlock : classes.dNone,
}}
labelRowsPerPage=""
/>
<ConfirmationDialog
open={isDeletePostDialogOpen}
title="Confirmation"
content="Do you really want to delete the post?"
onClose={closeDeletePostDialog}
loading={isDeletePostDialogLoading}
onConfirm={deletePost}
/>
</Paper>
);
}
Example #7
| Source File: SubscriptionTable.js From react-saas-template with MIT License | 4 votes |
|
function SubscriptionTable(props) {
const { transactions, theme, classes } = props;
const [page, setPage] = useState(0);
const handleChangePage = useCallback(
(_, page) => {
setPage(page);
},
[setPage]
);
if (transactions.length > 0) {
return (
<div className={classes.tableWrapper}>
<Table aria-labelledby="tableTitle">
<EnhancedTableHead rowCount={transactions.length} rows={rows} />
<TableBody>
{transactions
.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
.map((transaction, index) => (
<TableRow hover tabIndex={-1} key={index}>
<TableCell
component="th"
scope="row"
className={classes.firstData}
>
{transaction.description}
</TableCell>
<TableCell component="th" scope="row">
{transaction.balanceChange > 0 ? (
<ColorfulChip
label={`+${currencyPrettyPrint(
transaction.balanceChange
)}`}
color={theme.palette.secondary.main}
/>
) : (
<ColorfulChip
label={currencyPrettyPrint(transaction.balanceChange)}
color={theme.palette.error.dark}
/>
)}
</TableCell>
<TableCell component="th" scope="row">
{unixToDateString(transaction.timestamp)}
</TableCell>
<TableCell component="th" scope="row">
{transaction.paidUntil
? unixToDateString(transaction.paidUntil)
: ""}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
<TablePagination
component="div"
count={transactions.length}
rowsPerPage={rowsPerPage}
page={page}
backIconButtonProps={{
"aria-label": "Previous Page"
}}
nextIconButtonProps={{
"aria-label": "Next Page"
}}
onPageChange={handleChangePage}
classes={{
select: classes.dNone,
selectIcon: classes.dNone,
actions: transactions.length > 0 ? classes.dBlock : classes.dNone,
caption: transactions.length > 0 ? classes.dBlock : classes.dNone
}}
labelRowsPerPage=""
/>
</div>
);
}
return (
<div className={classes.contentWrapper}>
<HighlightedInformation>
No transactions received yet.
</HighlightedInformation>
</div>
);
}
Example #8
| 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>
);
}
Example #9
| Source File: showreel.js From react-table-library with MIT License | 4 votes |
|
Component = () => {
const [data, setData] = React.useState({ nodes });
//* Theme *//
const materialTheme = getTheme({
...DEFAULT_OPTIONS,
striped: true,
highlightOnHover: true,
});
const customTheme = {
Table: `
--data-table-library_grid-template-columns: 70px repeat(5, minmax(0, 1fr));
margin: 16px 0px;
`,
};
const theme = useTheme([materialTheme, customTheme]);
//* Resize *//
const resize = { resizerHighlight: '#dee2e6' };
//* Pagination *//
const pagination = usePagination(data, {
state: {
page: 0,
size: 2,
},
onChange: onPaginationChange,
});
function onPaginationChange(action, state) {
console.log(action, state);
}
//* Search *//
const [search, setSearch] = React.useState('');
useCustom('search', data, {
state: { search },
onChange: onSearchChange,
});
function onSearchChange(action, state) {
console.log(action, state);
pagination.fns.onSetPage(0);
}
//* Filter *//
const [isHide, setHide] = React.useState(false);
useCustom('filter', data, {
state: { isHide },
onChange: onFilterChange,
});
function onFilterChange(action, state) {
console.log(action, state);
pagination.fns.onSetPage(0);
}
//* Select *//
const select = useRowSelect(data, {
onChange: onSelectChange,
});
function onSelectChange(action, state) {
console.log(action, state);
}
//* Tree *//
const tree = useTree(
data,
{
onChange: onTreeChange,
},
{
clickType: TreeExpandClickTypes.ButtonClick,
treeYLevel: 1,
treeIcon: {
margin: '4px',
iconDefault: null,
iconRight: <FaChevronRight />,
iconDown: <FaChevronDown />,
},
},
);
function onTreeChange(action, state) {
console.log(action, state);
}
//* Sort *//
const sort = useSort(
data,
{
onChange: onSortChange,
},
{
sortIcon: {
iconDefault: null,
iconUp: <FaChevronUp />,
iconDown: <FaChevronDown />,
},
sortFns: {
TASK: (array) => array.sort((a, b) => a.name.localeCompare(b.name)),
DEADLINE: (array) => array.sort((a, b) => a.deadline - b.deadline),
TYPE: (array) => array.sort((a, b) => a.type.localeCompare(b.type)),
COMPLETE: (array) => array.sort((a, b) => a.isComplete - b.isComplete),
TASKS: (array) => array.sort((a, b) => (a.nodes || []).length - (b.nodes || []).length),
},
},
);
function onSortChange(action, state) {
console.log(action, state);
}
//* Drawer *//
const [drawerId, setDrawerId] = React.useState(null);
const [edited, setEdited] = React.useState('');
const handleEdit = (event) => {
setEdited(event.target.value);
};
const handleCancel = () => {
setEdited('');
setDrawerId(null);
};
const handleSave = () => {
const node = findNodeById(data.nodes, drawerId);
const editedNode = { ...node, name: edited };
const nodes = insertNode(data.nodes, editedNode);
setData({
nodes,
});
setEdited('');
setDrawerId(null);
};
//* Modal *//
const [modalOpened, setModalOpened] = React.useState(false);
//* Custom Modifiers *//
let modifiedNodes = data.nodes;
// search
modifiedNodes = modifiedNodes.filter((node) =>
node.name.toLowerCase().includes(search.toLowerCase()),
);
// filter
modifiedNodes = isHide ? modifiedNodes.filter((node) => !node.isComplete) : modifiedNodes;
//* Columns *//
const COLUMNS = [
{
label: 'Task',
renderCell: (item) => item.name,
resize,
sort: { sortKey: 'TASK' },
select: {
renderHeaderCellSelect: () => (
<Checkbox
size="small"
checked={select.state.all}
indeterminate={!select.state.all && !select.state.none}
onChange={select.fns.onToggleAll}
/>
),
renderCellSelect: (item) => (
<Checkbox
size="small"
checked={select.state.ids.includes(item.id)}
onChange={() => select.fns.onToggleById(item.id)}
/>
),
},
tree: true,
},
{
label: 'Deadline',
renderCell: (item) =>
item.deadline.toLocaleDateString('en-US', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
}),
resize,
sort: { sortKey: 'DEADLINE' },
},
{ label: 'Type', renderCell: (item) => item.type, resize, sort: { sortKey: 'TYPE' } },
{
label: 'Complete',
renderCell: (item) => item.isComplete.toString(),
resize,
sort: { sortKey: 'COMPLETE' },
},
{
label: 'Tasks',
renderCell: (item) => (
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<span>{item.nodes?.length}</span>
<IconButton onClick={() => setDrawerId(item.id)}>
<FaPen size={14} />
</IconButton>
</div>
),
resize,
sort: { sortKey: 'TASKS' },
},
];
return (
<>
<Modal open={modalOpened} onClose={() => setModalOpened(false)}>
<Box
style={{
position: 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
width: 500,
backgroundColor: '#ffffff',
border: '1px solid #e0e0e0',
borderRadius: '4px',
padding: '10px',
}}
>
<Typography variant="h6" component="h2">
"Not all features included here, but we got ..."
</Typography>
<FormGroup>
<FormControlLabel control={<Checkbox checked />} label="Resize" />
<FormControlLabel control={<Checkbox checked />} label="Sort" />
<FormControlLabel control={<Checkbox checked />} label="Search" />
<FormControlLabel control={<Checkbox checked />} label="Filter" />
<FormControlLabel control={<Checkbox checked />} label="Select" />
<FormControlLabel control={<Checkbox checked />} label="Tree" />
<FormControlLabel control={<Checkbox checked />} label="Drawer on Edit" />
<FormControlLabel control={<Checkbox checked />} label="Pagination" />
</FormGroup>
</Box>
</Modal>
{/* Form */}
<Stack spacing={1} direction="row">
<Button variant="contained" onClick={() => setModalOpened(true)}>
Features?
</Button>
<TextField
label="Search Task"
value={search}
onChange={(event) => setSearch(event.target.value)}
/>
<FormControlLabel
control={
<Checkbox checked={isHide} onChange={(event) => setHide(event.target.checked)} />
}
label="Hide Complete"
/>
</Stack>
{/* Table */}
<CompactTable
columns={COLUMNS}
data={{ ...data, nodes: modifiedNodes }}
theme={theme}
layout={{ custom: true }}
select={select}
tree={tree}
sort={sort}
pagination={pagination}
/>
<br />
<Stack spacing={10}>
<TablePagination
count={modifiedNodes.length}
page={pagination.state.page}
rowsPerPage={pagination.state.size}
rowsPerPageOptions={[1, 2, 5]}
onRowsPerPageChange={(event) =>
pagination.fns.onSetSize(parseInt(event.target.value, 10))
}
onPageChange={(event, page) => pagination.fns.onSetPage(page)}
/>
</Stack>
<Drawer
open={drawerId}
onClose={handleCancel}
title="Edit"
anchor="right"
PaperProps={{
sx: { width: '50%', padding: '20px' },
}}
>
<Stack spacing={1}>
<TextField
label="Name"
value={edited || fromTreeToList(data.nodes).find((node) => node.id === drawerId)?.name}
onChange={handleEdit}
autoFocus
/>
<Button variant="outlined" onClick={handleCancel}>
Cancel
</Button>
<Button variant="contained" onClick={handleSave}>
Save
</Button>
</Stack>
</Drawer>
</>
);
}
