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}}' },