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

fix: inconsistance page size of paginated data tables
2026-02-16 12:50:38 +00:00 · 2024-08-14 22:14:03 +02:00
parent ee96dc68cc 9f4de8115f
commit bbbd96f159
15 changed files with 46 additions and 2 deletions
--- a/packages/webapp/src/components/Datatable/DataTable.tsx
+++ b/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,
--- a/packages/webapp/src/containers/Accounting/JournalsLanding/ManualJournalsDataTable.tsx
+++ b/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}
--- a/packages/webapp/src/containers/Customers/CustomersLanding/CustomersTable.tsx
+++ b/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}
--- a/packages/webapp/src/containers/Expenses/ExpensesLanding/ExpenseDataTable.tsx
+++ b/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);
--- a/packages/webapp/src/containers/InventoryAdjustments/InventoryAdjustmentTable.tsx
+++ b/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}
--- a/packages/webapp/src/containers/Items/ItemsDataTable.tsx
+++ b/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);
--- a/packages/webapp/src/containers/Purchases/Bills/BillsLanding/BillsTable.tsx
+++ b/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}
--- a/packages/webapp/src/containers/Purchases/CreditNotes/CreditNotesLanding/VendorsCreditNoteDataTable.tsx
+++ b/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);
--- a/packages/webapp/src/containers/Purchases/PaymentsMade/PaymentsLanding/PaymentMadesTable.tsx
+++ b/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}
--- a/packages/webapp/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesDataTable.tsx
+++ b/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);
--- a/packages/webapp/src/containers/Sales/Estimates/EstimatesLanding/EstimatesDataTable.tsx
+++ b/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);
--- a/packages/webapp/src/containers/Sales/Invoices/InvoicesLanding/InvoicesDataTable.tsx
+++ b/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}
--- a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentsLanding/PaymentsReceivedTable.tsx
+++ b/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}
--- a/packages/webapp/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsTable.tsx
+++ b/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}
--- a/packages/webapp/src/containers/Vendors/VendorsLanding/VendorsTable.tsx
+++ b/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}