✨ 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:
@@ -106,6 +106,7 @@ const TaskLogsTable = (taskLogsData) => {
|
||||
onPageSizeChange: handlePageSizeChange,
|
||||
onPageChange: handlePageChange,
|
||||
}}
|
||||
hidePagination={true}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -26,6 +26,7 @@ import TaskLogsFilters from './TaskLogsFilters.jsx';
|
||||
import ColumnSelectorModal from './modals/ColumnSelectorModal.jsx';
|
||||
import ContentModal from './modals/ContentModal.jsx';
|
||||
import { useTaskLogsData } from '../../../hooks/task-logs/useTaskLogsData.js';
|
||||
import { createCardProPagination } from '../../../helpers/utils';
|
||||
|
||||
const TaskLogsPage = () => {
|
||||
const taskLogsData = useTaskLogsData();
|
||||
@@ -41,6 +42,13 @@ const TaskLogsPage = () => {
|
||||
type="type2"
|
||||
statsArea={<TaskLogsActions {...taskLogsData} />}
|
||||
searchArea={<TaskLogsFilters {...taskLogsData} />}
|
||||
paginationArea={createCardProPagination({
|
||||
currentPage: taskLogsData.activePage,
|
||||
pageSize: taskLogsData.pageSize,
|
||||
total: taskLogsData.logCount,
|
||||
onPageChange: taskLogsData.handlePageChange,
|
||||
onPageSizeChange: taskLogsData.handlePageSizeChange,
|
||||
})}
|
||||
t={taskLogsData.t}
|
||||
>
|
||||
<TaskLogsTable {...taskLogsData} />
|
||||
|
||||
Reference in New Issue
Block a user