Merge pull request #40 from easeq/master

0.6.4

Author: easeq

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@flipbyte/redux-datatable",
-    "version": "0.6.3",
+    "version": "0.6.4",
     "description": "React-Redux data table",
     "main": "lib/index.js",
     "module": "es/index.js",
@@ -25,7 +25,7 @@
         "react-dom": "^16.8.6",
         "rxjs": "^6.4.0",
         "prop-types": "^15.6.2",
-        "react-redux": "^6.0.1",
+        "react-redux": "^7.1.0",
         "redux": "^4.0.1",
         "styled-components": "^4.2.0",
         "redux-observable": "^1.1.0",
@@ -47,7 +47,7 @@
         "path-to-regexp": "^3.0.0",
         "react": "^16.8.6",
         "react-dom": "^16.8.6",
-        "react-redux": "^6.0.1",
+        "react-redux": "^7.1.0",
         "redux": "^4.0.1",
         "redux-logger": "^3.0.6",
         "redux-observable": "^1.1.0",

package.json

@@ -1,5 +1,5 @@
 import _ from 'lodash';
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useMemo } from 'react';
 import { connect } from 'react-redux';
 
 import Layout from './containers/Layout';
@@ -38,17 +38,21 @@ const ReduxDatatable = ({ config = {}, reducerName, tableData = {}, action, thun
         columns: [ visibleColumnIds, setVisibleColumnIds ],
         editing: [ isEditing, setIsEditing ],
         printing: [ isPrinting, setIsPrinting ],
-        paginationProps: calculatePaginationProps(tableData.query, config.components.Limiter.default || 10),
         minWidth,
         state,
         scroller: [ scrollData, setScrollData ],
         width: [ tableWidth, setTableWidth ],
-        visibleColumns: visibleColumnIds.reduce((result, currentIndex) => {
-            const { [currentIndex]: column } = columns;
-            return [ ...result, column ];
-        }, [])
+        paginationProps: useMemo(() => (
+            calculatePaginationProps(tableData.query, config.components.Limiter.default || 10)
+        ), [ tableData.query ]),
+        visibleColumns: useMemo(() => (
+            visibleColumnIds.reduce((result, currentIndex) => {
+                const { [currentIndex]: column } = columns;
+                return [ ...result, column ];
+            }, [])
+        ), [ visibleColumnIds ])
     };
-    
+
     // Fetch data and populate table on first load.
     useEffect(() => {
         loadData();