Merge pull request #604 from bigcapitalhq/inconsistance-pagination-page-size

fix: inconsistance page size of paginated data tables

packages/webapp/src/components/Datatable/DataTable.tsx

@@ -60,7 +60,7 @@ export function DataTable(props) {
 
     // Pagination props.
     initialPageIndex = 0,
-    initialPageSize = 10,
+    initialPageSize = 20,
 
     updateDebounceTime = 200,
     selectionColumnWidth = 42,

packages/webapp/src/containers/Accounting/JournalsLanding/ManualJournalsDataTable.tsx

@@ -125,8 +125,9 @@ function ManualJournalsDataTable({
         loading={isManualJournalsLoading}
         headerLoading={isManualJournalsLoading}
         progressBarLoading={isManualJournalsFetching}
-        pagesCount={pagination.pagesCount}
         pagination={true}
+        initialPageSize={manualJournalsTableState.pageSize}
+        pagesCount={pagination.pagesCount}
         autoResetSortBy={false}
         autoResetPage={false}
         TableLoadingRenderer={TableSkeletonRows}

packages/webapp/src/containers/Customers/CustomersLanding/CustomersTable.tsx

@@ -136,6 +136,7 @@ function CustomersTable({
         sticky={true}
         spinnerProps={{ size: 30 }}
         pagination={true}
+        initialPageSize={customersTableState.pageSize}
         manualSortBy={true}
         manualPagination={true}
         pagesCount={pagination.pagesCount}

packages/webapp/src/containers/Expenses/ExpensesLanding/ExpenseDataTable.tsx

@@ -20,6 +20,7 @@ import withExpensesActions from './withExpensesActions';
 import withAlertsActions from '@/containers/Alert/withAlertActions';
 import withDrawerActions from '@/containers/Drawer/withDrawerActions';
 import withSettings from '@/containers/Settings/withSettings';
+import withExpenses from './withExpenses';
 
 import { ActionsMenu, useExpensesTableColumns } from './components';
 import { DRAWERS } from '@/constants/drawers';
@@ -39,6 +40,9 @@ function ExpensesDataTable({
 
   // #withSettings
   expensesTableSize,
+
+  // #withExpenses
+  expensesTableState
 }) {
   // Expenses list context.
   const {
@@ -116,6 +120,7 @@ function ExpensesDataTable({
         sticky={true}
         onFetchData={handleFetchData}
         pagination={true}
+        initialPageSize={expensesTableState.pageSize}
         manualSortBy={true}
         manualPagination={true}
         pagesCount={pagination.pagesCount}
@@ -147,4 +152,5 @@ export default compose(
   withSettings(({ expenseSettings }) => ({
     expensesTableSize: expenseSettings?.tableSize,
   })),
+  withExpenses(({ expensesTableState }) => ({ expensesTableState }))
 )(ExpensesDataTable);

packages/webapp/src/containers/InventoryAdjustments/InventoryAdjustmentTable.tsx

@@ -92,6 +92,7 @@ function InventoryAdjustmentDataTable({
       manualSortBy={true}
       selectionColumn={true}
       pagination={true}
+      initialPageSize={inventoryAdjustmentTableState.pageSize}
       pagesCount={pagination.pagesCount}
       autoResetSortBy={false}
       autoResetPage={false}

packages/webapp/src/containers/Items/ItemsDataTable.tsx

@@ -17,6 +17,7 @@ import withAlertsActions from '@/containers/Alert/withAlertActions';
 import withDialogActions from '@/containers/Dialog/withDialogActions';
 import withDrawerActions from '@/containers/Drawer/withDrawerActions';
 import withSettings from '@/containers/Settings/withSettings';
+import withItems from './withItems';
 
 import { useItemsListContext } from './ItemsListProvider';
 import { useItemsTableColumns, ItemsActionMenuList } from './components';
@@ -43,6 +44,9 @@ function ItemsDataTable({
   // #withSettings
   itemsTableSize,
 
+  // #withItems
+  itemsTableState,
+
   // #ownProps
   tableProps,
 }) {
@@ -137,6 +141,7 @@ function ItemsDataTable({
         sticky={true}
         rowClassNames={rowClassNames}
         pagination={true}
+        initialPageSize={itemsTableState.pageSize}
         manualSortBy={true}
         manualPagination={true}
         pagesCount={pagination.pagesCount}
@@ -174,4 +179,5 @@ export default compose(
   withSettings(({ itemsSettings }) => ({
     itemsTableSize: itemsSettings.tableSize,
   })),
+  withItems(({ itemsTableState }) => ({  itemsTableState }))
 )(ItemsDataTable);

packages/webapp/src/containers/Purchases/Bills/BillsLanding/BillsTable.tsx

@@ -130,6 +130,7 @@ function BillsDataTable({
         noInitialFetch={true}
         sticky={true}
         pagination={true}
+        initialPageSize={billsTableState.pageSize}
         pagesCount={pagination.pagesCount}
         TableLoadingRenderer={TableSkeletonRows}
         TableHeaderSkeletonRenderer={TableSkeletonHeader}

packages/webapp/src/containers/Purchases/CreditNotes/CreditNotesLanding/VendorsCreditNoteDataTable.tsx

@@ -17,6 +17,7 @@ import withAlertsActions from '@/containers/Alert/withAlertActions';
 import withDrawerActions from '@/containers/Drawer/withDrawerActions';
 import withDialogActions from '@/containers/Dialog/withDialogActions';
 import withVendorsCreditNotesActions from './withVendorsCreditNotesActions';
+import withVendorsCreditNotes from './withVendorsCreditNotes';
 import withSettings from '@/containers/Settings/withSettings';
 
 import { useVendorsCreditNoteTableColumns, ActionsMenu } from './components';
@@ -32,6 +33,9 @@ function VendorsCreditNoteDataTable({
   // #withVendorsCreditNotesActions
   setVendorsCreditNoteTableState,
 
+  // #withVendorCredits
+  vendorsCreditNoteTableState,
+
   // #withAlertsActions
   openAlert,
 
@@ -129,6 +133,7 @@ function VendorsCreditNoteDataTable({
         noInitialFetch={true}
         sticky={true}
         pagination={true}
+        initialPageSize={vendorsCreditNoteTableState.pageSize}
         pagesCount={pagination.pagesCount}
         TableLoadingRenderer={TableSkeletonRows}
         TableHeaderSkeletonRenderer={TableSkeletonHeader}
@@ -159,4 +164,7 @@ export default compose(
   withSettings(({ vendorsCreditNoteSetting }) => ({
     creditNoteTableSize: vendorsCreditNoteSetting?.tableSize,
   })),
+  withVendorsCreditNotes(({ vendorsCreditNoteTableState }) => ({
+    vendorsCreditNoteTableState,
+  })),
 )(VendorsCreditNoteDataTable);

packages/webapp/src/containers/Purchases/PaymentsMade/PaymentsLanding/PaymentMadesTable.tsx

@@ -112,6 +112,7 @@ function PaymentMadesTable({
         noInitialFetch={true}
         sticky={true}
         pagination={true}
+        initialPageSize={paymentMadesTableState.pageSize}
         pagesCount={pagination.pagesCount}
         autoResetSortBy={false}
         autoResetPage={false}

packages/webapp/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesDataTable.tsx

@@ -19,6 +19,7 @@ import withAlertsActions from '@/containers/Alert/withAlertActions';
 import withDrawerActions from '@/containers/Drawer/withDrawerActions';
 import withDialogActions from '@/containers/Dialog/withDialogActions';
 import withSettings from '@/containers/Settings/withSettings';
+import withCreditNotes from './withCreditNotes';
 
 import { useCreditNoteTableColumns, ActionsMenu } from './components';
 import { useCreditNoteListContext } from './CreditNotesListProvider';
@@ -44,6 +45,9 @@ function CreditNotesDataTable({
 
   // #withSettings
   creditNoteTableSize,
+
+  // #withCreditNotes
+  creditNoteTableState
 }) {
   const history = useHistory();
 
@@ -129,6 +133,7 @@ function CreditNotesDataTable({
         noInitialFetch={true}
         sticky={true}
         pagination={true}
+        initialPageSize={creditNoteTableState.pageSize}
         pagesCount={pagination.pagesCount}
         TableLoadingRenderer={TableSkeletonRows}
         TableHeaderSkeletonRenderer={TableSkeletonHeader}
@@ -159,4 +164,5 @@ export default compose(
   withSettings(({ creditNoteSettings }) => ({
     creditNoteTableSize: creditNoteSettings?.tableSize,
   })),
+  withCreditNotes(({ creditNoteTableState }) => ({ creditNoteTableState }))
 )(CreditNotesDataTable);

packages/webapp/src/containers/Sales/Estimates/EstimatesLanding/EstimatesDataTable.tsx

@@ -9,6 +9,7 @@ import withAlertsActions from '@/containers/Alert/withAlertActions';
 import withDrawerActions from '@/containers/Drawer/withDrawerActions';
 import withDialogActions from '@/containers/Dialog/withDialogActions';
 import withSettings from '@/containers/Settings/withSettings';
+import withEstimates from './withEstimates';
 
 import { TABLES } from '@/constants/tables';
 import {
@@ -42,6 +43,9 @@ function EstimatesDataTable({
 
   // #withSettings
   estimatesTableSize,
+
+  // #withEstimates
+  estimatesTableState
 }) {
   const history = useHistory();
 
@@ -141,6 +145,7 @@ function EstimatesDataTable({
         selectionColumn={true}
         sticky={true}
         pagination={true}
+        initialPageSize={estimatesTableState.pageSize}
         manualPagination={true}
         pagesCount={pagination.pagesCount}
         TableLoadingRenderer={TableSkeletonRows}
@@ -174,4 +179,5 @@ export default compose(
   withSettings(({ estimatesSettings }) => ({
     estimatesTableSize: estimatesSettings?.tableSize,
   })),
+  withEstimates(({ estimatesTableState }) => ({ estimatesTableState }))
 )(EstimatesDataTable);

packages/webapp/src/containers/Sales/Invoices/InvoicesLanding/InvoicesDataTable.tsx

@@ -144,6 +144,7 @@ function InvoicesDataTable({
         noInitialFetch={true}
         sticky={true}
         pagination={true}
+        initialPageSize={invoicesTableState.pageSize}
         manualPagination={true}
         pagesCount={pagination.pagesCount}
         autoResetSortBy={false}

packages/webapp/src/containers/Sales/PaymentsReceived/PaymentsLanding/PaymentsReceivedTable.tsx

@@ -33,6 +33,9 @@ function PaymentsReceivedDataTable({
   // #withPaymentsReceivedActions
   setPaymentReceivesTableState,
 
+  // #withPaymentsReceived
+  paymentReceivesTableState,
+
   // #withAlertsActions
   openAlert,
 
@@ -124,6 +127,7 @@ function PaymentsReceivedDataTable({
         autoResetSortBy={false}
         autoResetPage={false}
         pagination={true}
+        initialPageSize={paymentReceivesTableState.pageSize}
         pagesCount={pagination.pagesCount}
         TableLoadingRenderer={TableSkeletonRows}
         TableHeaderSkeletonRenderer={TableSkeletonHeader}

packages/webapp/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsTable.tsx

@@ -130,6 +130,7 @@ function ReceiptsDataTable({
         noInitialFetch={true}
         sticky={true}
         pagination={true}
+        initialPageSize={receiptTableState.pageSize}
         pagesCount={pagination.pagesCount}
         manualPagination={true}
         autoResetSortBy={false}

packages/webapp/src/containers/Vendors/VendorsLanding/VendorsTable.tsx

@@ -137,6 +137,7 @@ function VendorsTable({
         expandable={false}
         sticky={true}
         pagination={true}
+        initialPageSize={vendorsTableState.pageSize}
         manualSortBy={true}
         pagesCount={pagination.pagesCount}
         autoResetSortBy={false}