- client: fix table pagination

client/src/components/Settings/Dhcp/Leases.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import ReactTable from 'react-table';
 import { Trans, withNamespaces } from 'react-i18next';
+import { SMALL_TABLE_DEFAULT_PAGE_SIZE } from '../../../helpers/constants';
 
 class Leases extends Component {
     cellWrap = ({ value }) => (
@@ -36,8 +37,9 @@ class Leases extends Component {
                         Cell: this.cellWrap,
                     },
                 ]}
-                pageSize={100}
-                showPagination={true}
+                pageSize={SMALL_TABLE_DEFAULT_PAGE_SIZE}
+                showPageSizeOptions={false}
+                showPagination={leases.length > SMALL_TABLE_DEFAULT_PAGE_SIZE}
                 noDataText={t('dhcp_leases_not_found')}
                 minRows={6}
                 className="-striped -highlight card-table-overflow"

client/src/components/Settings/Dhcp/StaticLeases/index.js

@@ -2,6 +2,7 @@ import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import ReactTable from 'react-table';
 import { Trans, withNamespaces } from 'react-i18next';
+import { SMALL_TABLE_DEFAULT_PAGE_SIZE } from '../../../../helpers/constants';
 
 import Modal from './Modal';
 
@@ -16,7 +17,7 @@ class StaticLeases extends Component {
 
     handleSubmit = (data) => {
         this.props.addStaticLease(data);
-    }
+    };
 
     handleDelete = (ip, mac, hostname = '') => {
         const name = hostname || ip;
@@ -24,7 +25,7 @@ class StaticLeases extends Component {
         if (window.confirm(this.props.t('delete_confirm', { key: name }))) {
             this.props.removeStaticLease({ ip, mac, hostname });
         }
-    }
+    };
 
     render() {
         const {
@@ -74,7 +75,7 @@ class StaticLeases extends Component {
                                             }
                                         >
                                             <svg className="icons">
-                                                <use xlinkHref="#delete" />
+                                                <use xlinkHref="#delete"/>
                                             </svg>
                                         </button>
                                     </div>
@@ -82,8 +83,9 @@ class StaticLeases extends Component {
                             },
                         },
                     ]}
-                    pageSize={100}
-                    showPagination={true}
+                    pageSize={SMALL_TABLE_DEFAULT_PAGE_SIZE}
+                    showPageSizeOptions={false}
+                    showPagination={staticLeases.length > SMALL_TABLE_DEFAULT_PAGE_SIZE}
                     noDataText={t('dhcp_static_leases_not_found')}
                     className="-striped -highlight card-table-overflow"
                     minRows={6}

client/src/helpers/constants.js

@@ -402,6 +402,9 @@ export const DEFAULT_LOGS_FILTER = {
 export const DEFAULT_LANGUAGE = 'en';
 
 export const TABLE_DEFAULT_PAGE_SIZE = 100;
+
+export const SMALL_TABLE_DEFAULT_PAGE_SIZE = 20;
+
 export const RESPONSE_FILTER = {
     ALL: 'all',
     FILTERED: 'filtered',