From 544f6c403f83d775ddcee42fade6210b1b8cba22 Mon Sep 17 00:00:00 2001 From: Kiran Ashok Date: Thu, 13 Oct 2022 17:21:14 +0530 Subject: [PATCH] [ 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 --- .../Editor/Components/Table/Pagination.jsx | 6 ++-- .../src/Editor/Components/Table/Table.jsx | 35 +++++++++++-------- .../Table/load-properties-and-styles.js | 7 ++++ .../src/Editor/Inspector/Components/Table.jsx | 3 ++ .../src/Editor/WidgetManager/widgetConfig.js | 24 +++++++++++++ 5 files changed, 58 insertions(+), 17 deletions(-) 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}}' },