✨ refactor: move table pagination to CardPro footer for consistent layout
Implement unified pagination system by moving pagination from CardTable to CardPro footer area, ensuring consistent visual layout across all table pages. ## Changes Made ### Core Components - **CardPro**: Add `paginationArea` prop to display pagination in card footer - **CardTable**: Add `hidePagination` prop to control internal pagination visibility - **utils.js**: Add `createCardProPagination` helper with responsive design - Mobile: small size + showQuickJumper + showTotal - Desktop: default size + showTotal only ### Table Pages Updated - Users table (type1): Add external pagination control - Channels table (type3): Move pagination to CardPro footer - Tokens table (type1): Implement unified pagination layout - Redemptions table (type1): Apply consistent pagination pattern - Usage-logs table (type2): Migrate to external pagination - MJ-logs table (type2): Update pagination configuration - Task-logs table (type2): Standardize pagination approach ### Bug Fixes - Fix CardTable desktop pagination visibility when hidePagination=true - Standardize data access pattern across all table components - Remove redundant data destructuring in users table for consistency ## Benefits - ✅ Consistent pagination position across all tables - ✅ Better visual hierarchy with fixed footer pagination - ✅ Responsive design optimized for mobile and desktop - ✅ Unified codebase with reusable pagination utility - ✅ Backward compatible with existing table functionality ## Files Modified - `web/src/components/common/ui/CardPro.js` - `web/src/components/common/ui/CardTable.js` - `web/src/helpers/utils.js` - `web/src/components/table/*/index.jsx` (7 tables) - `web/src/components/table/*/*.jsx` (7 table components)
This commit is contained in:
@@ -26,6 +26,7 @@ import UsersDescription from './UsersDescription.jsx';
|
||||
import AddUserModal from './modals/AddUserModal.jsx';
|
||||
import EditUserModal from './modals/EditUserModal.jsx';
|
||||
import { useUsersData } from '../../../hooks/users/useUsersData';
|
||||
import { createCardProPagination } from '../../../helpers/utils';
|
||||
|
||||
const UsersPage = () => {
|
||||
const usersData = useUsersData();
|
||||
@@ -104,6 +105,13 @@ const UsersPage = () => {
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
paginationArea={createCardProPagination({
|
||||
currentPage: usersData.activePage,
|
||||
pageSize: usersData.pageSize,
|
||||
total: usersData.userCount,
|
||||
onPageChange: usersData.handlePageChange,
|
||||
onPageSizeChange: usersData.handlePageSizeChange,
|
||||
})}
|
||||
t={t}
|
||||
>
|
||||
<UsersTable {...usersData} />
|
||||
|
||||
Reference in New Issue
Block a user