BIG-118: feat: hide the pagination before table has minimum items length.

src/components/DataTable.js

@@ -196,6 +196,8 @@ export default function DataTable(props) {
 
 DataTable.defaultProps = {
   pagination: false,
+  hidePaginationNoPages: true,
+
   size: null,
   spinnerProps: { size: 30 },
 

src/components/Datatable/TablePagination.js

@@ -14,12 +14,15 @@ export default function TablePagination() {
       pageCount,
       state: { pageIndex, pageSize },
     },
-    props: { pagination, loading, onPaginationChange },
+    props: { pagination, loading, onPaginationChange, hidePaginationNoPages },
   } = useContext(TableContext);
 
-  const triggerOnPaginationChange = useCallback((payload) => {
+  const triggerOnPaginationChange = useCallback(
-    saveInvoke(onPaginationChange, payload)
+    (payload) => {
-  }, [onPaginationChange]);
+      saveInvoke(onPaginationChange, payload);
+    },
+    [onPaginationChange],
+  );
 
   // Handles the page changing.
   const handlePageChange = useCallback(
@@ -45,8 +48,14 @@ export default function TablePagination() {
     [gotoPage, setPageSize, triggerOnPaginationChange],
   );
 
+  // Detarmines when display the pagination.
+  const showPagination =
+    pagination &&
+    ((hidePaginationNoPages && pageCount > 1) || !hidePaginationNoPages) &&
+    !loading;
+
   return (
-    <If condition={pagination && !loading}>
+    showPagination && (
       <Pagination
         currentPage={pageIndex + 1}
         total={pageSize * pageCount}
@@ -54,6 +63,6 @@ export default function TablePagination() {
         onPageChange={handlePageChange}
         onPageSizeChange={handlePageSizeChange}
       />
-    </If>
+    )
   );
 }

src/containers/Customers/CustomersLanding/CustomersActionsBar.js

@@ -89,7 +89,7 @@ function CustomerActionsBar({
 
   // Handle table row size change.
   const handleTableRowSizeChange = (size) => {
-    addSetting('custoemrs', 'tableSize', size);
+    addSetting('customers', 'tableSize', size);
   };
 
   return (

src/containers/Settings/withSettings.js

@@ -14,7 +14,7 @@ export default (mapState) => {
       itemsSettings: state.settings.data.items,
       expenseSettings: state.settings.data.expenses,
       accountsSettings: state.settings.data.accounts,
-      customersSettings: state.settings.data.custoemrs,
+      customersSettings: state.settings.data.customers,
       vendorsSettings: state.settings.data.vendors,
     };
     return mapState ? mapState(mapped, state, props) : mapped;

src/store/settings/settings.reducer.js

@@ -43,6 +43,9 @@ const initialState = {
     vendors: {
       tableSize: 'medium',
     },
+    accounts: {
+      tableSize: 'medium'
+    }
   },
 };