diff --git a/frontend/src/Editor/Components/Table/Pagination.jsx b/frontend/src/Editor/Components/Table/Pagination.jsx index 4d04dd9cd5..e4000761da 100644 --- a/frontend/src/Editor/Components/Table/Pagination.jsx +++ b/frontend/src/Editor/Components/Table/Pagination.jsx @@ -10,6 +10,8 @@ export const Pagination = function Pagination({ lastActivePageIndex, pageIndex, setPageIndex, + enablePrevButton, + enableNextButton, }) { const [pageCount, setPageCount] = useState(autoPageCount); @@ -58,7 +60,7 @@ export const Pagination = function Pagination({ {' '} @@ -73,7 +75,7 @@ export const Pagination = function Pagination({ {' '} diff --git a/frontend/src/Editor/Components/Table/Table.jsx b/frontend/src/Editor/Components/Table/Table.jsx index 1e28042129..22bf6d2e3a 100644 --- a/frontend/src/Editor/Components/Table/Table.jsx +++ b/frontend/src/Editor/Components/Table/Table.jsx @@ -84,6 +84,9 @@ export function Table({ parsedDisabledState, actionButtonRadius, actions, + enableNextButton, + enablePrevButton, + totalRecords, rowsPerPage, disabledSort, } = loadPropertiesAndStyles(properties, styles, darkMode, component); @@ -807,21 +810,20 @@ export function Table({
- {(clientSidePagination || serverSidePagination) && ( - - )} +
-
{showBulkUpdateActions && Object.keys(tableDetails.changeSet || {}).length > 0 ? ( <> @@ -840,7 +842,10 @@ export function Table({ ) : ( - {`${globalFilteredRows.length} Records`} + + {clientSidePagination && !serverSidePagination && `${globalFilteredRows.length} Records`} + {serverSidePagination && totalRecords ? `${totalRecords} Records` : ''} + )}
diff --git a/frontend/src/Editor/Components/Table/load-properties-and-styles.js b/frontend/src/Editor/Components/Table/load-properties-and-styles.js index a69199d2fd..7db2b40565 100644 --- a/frontend/src/Editor/Components/Table/load-properties-and-styles.js +++ b/frontend/src/Editor/Components/Table/load-properties-and-styles.js @@ -5,6 +5,10 @@ export default function loadPropertiesAndStyles(properties, styles, darkMode, co if (typeof serverSidePagination !== 'boolean') serverSidePagination = false; const serverSideSearch = properties.serverSideSearch ?? false; + const enableNextButton = properties.enableNextButton ?? true; + const enablePrevButton = properties.enablePrevButton ?? true; + + const totalRecords = properties.totalRecords ?? ''; const disabledSort = properties?.disabledSort ?? false; const serverSideSort = properties.serverSideSort ?? false; @@ -71,6 +75,9 @@ export default function loadPropertiesAndStyles(properties, styles, darkMode, co actionButtonRadius, loadingState, actions, + enableNextButton, + enablePrevButton, + totalRecords, rowsPerPage, disabledSort, }; diff --git a/frontend/src/Editor/Inspector/Components/Table.jsx b/frontend/src/Editor/Inspector/Components/Table.jsx index 17f849812e..efa010a23a 100644 --- a/frontend/src/Editor/Inspector/Components/Table.jsx +++ b/frontend/src/Editor/Inspector/Components/Table.jsx @@ -859,6 +859,9 @@ class TableComponent extends React.Component { const options = [ 'serverSidePagination', + ...(serverSidePagination ? ['enablePrevButton'] : []), + ...(serverSidePagination ? ['enableNextButton'] : []), + ...(serverSidePagination ? ['totalRecords'] : []), ...(clientSidePagination && !serverSidePagination ? ['rowsPerPage'] : []), 'serverSideSearch', 'showDownloadButton', diff --git a/frontend/src/Editor/WidgetManager/widgetConfig.js b/frontend/src/Editor/WidgetManager/widgetConfig.js index f48a638133..aaf2c70a85 100644 --- a/frontend/src/Editor/WidgetManager/widgetConfig.js +++ b/frontend/src/Editor/WidgetManager/widgetConfig.js @@ -148,6 +148,13 @@ export const widgets = [ schema: { type: 'boolean' }, }, }, + enableNextButton: { + type: 'toggle', + displayName: 'Enable next page button', + validation: { + schema: { type: 'boolean' }, + }, + }, disabledSort: { type: 'toggle', displayName: 'Disable sorting', @@ -155,6 +162,20 @@ export const widgets = [ schema: { type: 'boolean' }, }, }, + enablePrevButton: { + type: 'toggle', + displayName: 'Enable previous page button', + validation: { + schema: { type: 'boolean' }, + }, + }, + totalRecords: { + type: 'code', + displayName: 'Total records server side', + validation: { + schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] }, + }, + }, clientSidePagination: { type: 'toggle', displayName: 'Client-side pagination', @@ -358,6 +379,9 @@ export const widgets = [ }, rowsPerPage: { value: '{{10}}' }, serverSidePagination: { value: '{{false}}' }, + enableNextButton: { value: '{{true}}' }, + enablePrevButton: { value: '{{true}}' }, + totalRecords: { value: '' }, clientSidePagination: { value: '{{true}}' }, serverSideSort: { value: '{{false}}' }, displaySearchBox: { value: '{{true}}' },