[ Improvement ] :: Table widget (#4092)

* fix :: resizing columns lead to sorting bugfix

* table width set to 100% always

* fix :: if filter is applied- download filtered data only

* add option to change number of results per page - client side pagination

* style fix

* removing space

* added option to show total records in serverside pagination , disableing navigation buttons

* number type

* name update

* updating position and conditional  adding of new properties

* fix :: name change , only visible on clientside pagination

* fix :: removing scrollbar table

* updated with for borderless table

* fix :: removing scrollbar on 100 % width

* fix :: sort bug

* remove rowsper page on server side pagination

* update fix:: enable next and prev buttons - pagination

* fix :: name change , default set to true for server side pagination buttons

* Have enablePrevButton and enableNextButton fallback to true

Co-authored-by: Sherfin Shamsudeen <sherfin94@gmail.com>

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({
       <button
         className={`btn btn-sm btn-light ${pageIndex === 1 ? 'cursor-not-allowed' : ''}`}
         onClick={() => goToPreviousPage()}
-        disabled={pageIndex === 1}
+        disabled={pageIndex === 1 || !enablePrevButton}
       >
         {'<'}
       </button>{' '}
@@ -73,7 +75,7 @@ export const Pagination = function Pagination({
       <button
         className={`btn btn-light btn-sm ${!autoCanNextPage && !serverSide ? 'cursor-not-allowed' : ''}`}
         onClick={() => goToNextPage()}
-        disabled={!autoCanNextPage && !serverSide}
+        disabled={(!autoCanNextPage && !serverSide) || !enableNextButton}
       >
         {'>'}
       </button>{' '}

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({
         <div className="card-footer d-flex align-items-center jet-table-footer justify-content-center">
           <div className="table-footer row gx-0">
             <div className="col">
-              {(clientSidePagination || serverSidePagination) && (
-                <Pagination
-                  lastActivePageIndex={pageIndex}
-                  serverSide={serverSidePagination}
-                  autoGotoPage={gotoPage}
-                  autoCanNextPage={canNextPage}
-                  autoPageCount={pageCount}
-                  autoPageOptions={pageOptions}
-                  onPageIndexChanged={onPageIndexChanged}
-                  pageIndex={paginationInternalPageIndex}
-                  setPageIndex={setPaginationInternalPageIndex}
-                />
-              )}
+              <Pagination
+                lastActivePageIndex={pageIndex}
+                serverSide={serverSidePagination}
+                autoGotoPage={gotoPage}
+                autoCanNextPage={canNextPage}
+                autoPageCount={pageCount}
+                autoPageOptions={pageOptions}
+                onPageIndexChanged={onPageIndexChanged}
+                pageIndex={paginationInternalPageIndex}
+                setPageIndex={setPaginationInternalPageIndex}
+                enableNextButton={enableNextButton}
+                enablePrevButton={enablePrevButton}
+              />
             </div>
-
             <div className="col d-flex justify-content-end">
               {showBulkUpdateActions && Object.keys(tableDetails.changeSet || {}).length > 0 ? (
                 <>
@@ -840,7 +842,10 @@ export function Table({
                   </button>
                 </>
               ) : (
-                <span>{`${globalFilteredRows.length} Records`}</span>
+                <span>
+                  {clientSidePagination && !serverSidePagination && `${globalFilteredRows.length} Records`}
+                  {serverSidePagination && totalRecords ? `${totalRecords} Records` : ''}
+                </span>
               )}
             </div>
           </div>

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

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

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