Merge pull request #577 from jbetancur/fix/574

fix pagination issues when used with enclosing flex | performance

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-data-table-component",
-  "version": "6.9.1",
+  "version": "6.9.2",
   "description": "A declarative react based data table",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",

src/DataTable/TableColCheckbox.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { useTableContext } from './DataTableContext';
@@ -25,19 +25,18 @@ const TableColCheckbox = ({ head }) => {
     keyField,
     mergeSelections,
   } = useTableContext();
-
   const indeterminate = selectedRows.length > 0 && !allSelected;
   const rows = selectableRowDisabled ? data.filter(row => !selectableRowDisabled(row)) : data;
   const isDisabled = rows.length === 0;
   const rowCount = data.length;
 
-  const handleSelectAll = () => dispatch({
+  const handleSelectAll = useCallback(() => dispatch({
     type: 'SELECT_ALL_ROWS',
     rows,
     rowCount,
     mergeSelections,
     keyField,
-  });
+  }), [dispatch, keyField, mergeSelections, rowCount, rows]);
 
   return (
     <TableColStyle className="rdt_TableCol" head={head} noPadding>

src/DataTable/TableWrapper.js

@@ -3,7 +3,6 @@ import styled from 'styled-components';
 const TableWrapper = styled.div`
   position: relative;
   width: 100%;
-  height: 100%;
   ${props => props.theme.tableWrapper.style};
 `;