Merge pull request #550 from jbetancur/feature/500-fix-pagination

fixes #500 | add responsive paging
jbetancur · Apr 23, 2020 · 2606628 · 2606628
2 parents 33b5630 + fa425fa
commit 2606628
Show file tree

Hide file tree

Showing 12 changed files with 2,919 additions and 2,609 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-data-table-component",
-  "version": "6.7.1",
+  "version": "6.8.0",
   "description": "A declarative react based data table",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",
@@ -56,7 +56,7 @@
     "@babel/core": "^7.9.0",
     "@babel/preset-env": "^7.9.5",
     "@babel/preset-react": "^7.9.4",
-    "@material-ui/core": "^4.9.10",
+    "@material-ui/core": "^4.9.11",
     "@material-ui/icons": "^4.9.1",
     "@storybook/addon-actions": "^5.3.18",
     "@storybook/addon-console": "^1.2.1",
@@ -65,12 +65,12 @@
     "@storybook/addon-options": "^5.3.18",
     "@storybook/addon-storysource": "^5.3.18",
     "@storybook/react": "^5.3.18",
-    "@testing-library/react": "^10.0.2",
-    "@typescript-eslint/eslint-plugin": "^2.27.0",
-    "@typescript-eslint/parser": "^2.27.0",
+    "@testing-library/react": "^10.0.3",
+    "@typescript-eslint/eslint-plugin": "^2.29.0",
+    "@typescript-eslint/parser": "^2.29.0",
     "axios": "^0.19.2",
     "babel-eslint": "^10.1.0",
-    "babel-jest": "^25.3.0",
+    "babel-jest": "^25.4.0",
     "babel-loader": "^8.1.0",
     "babel-plugin-module-resolver": "^4.0.0",
     "babel-plugin-styled-components": "^1.10.7",
@@ -86,15 +86,15 @@
     "eslint-plugin-react": "^7.19.0",
     "eslint-plugin-react-hooks": "^3.0.0",
     "faker": "^4.1.0",
-    "jest": "^25.3.0",
+    "jest": "^25.4.0",
     "jest-styled-components": "^7.0.2",
     "lodash-es": "^4.17.15",
     "memoize-one": "^5.1.1",
     "moment": "^2.24.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "rimraf": "^3.0.2",
-    "rollup": "^2.6.1",
+    "rollup": "^2.7.2",
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-copy": "^3.3.0",
@@ -103,7 +103,7 @@
     "rollup-plugin-uglify": "^6.0.4",
     "rollup-plugin-visualizer": "^4.0.4",
     "styled-components": "^5.0.1",
-    "stylelint": "^13.3.2",
+    "stylelint": "^13.3.3",
     "stylelint-config-standard": "^20.0.0",
     "stylelint-config-styled-components": "^0.1.1",
     "stylelint-processor-styled-components": "^1.10.0",

diff --git a/src/DataTable/DataTable.js b/src/DataTable/DataTable.js
@@ -18,7 +18,7 @@ import TableColExpander from './TableColExpander';
 import { CellBase } from './Cell';
 import NoData from './NoDataWrapper';
 import NativePagination from './Pagination';
-import useDidUpdateEffect from './useDidUpdateEffect';
+import useDidUpdateEffect from '../hooks/useDidUpdateEffect';
 import { propTypes, defaultProps } from './propTypes';
 import { isEmpty, sort, decorateColumns, getSortDirection, getNumberOfPages, recalculatePage, isRowSelected } from './util';
 import { createStyles } from './styles';
@@ -390,17 +390,17 @@ const DataTable = memo(({
                 </TableBody>
               )}
             </Table>
-
-            {enabledPagination && (
-              <Pagination
-                onChangePage={handleChangePage}
-                onChangeRowsPerPage={handleChangeRowsPerPage}
-                rowCount={paginationTotalRows || data.length}
-                currentPage={currentPage}
-                rowsPerPage={rowsPerPage}
-              />
-            )}
           </TableWrapper>
+
+          {enabledPagination && (
+            <Pagination
+              onChangePage={handleChangePage}
+              onChangeRowsPerPage={handleChangeRowsPerPage}
+              rowCount={paginationTotalRows || data.length}
+              currentPage={currentPage}
+              rowsPerPage={rowsPerPage}
+            />
+          )}
         </ResponsiveWrapper>
       </DataTableProvider>
     </ThemeProvider>

diff --git a/src/DataTable/Pagination.js b/src/DataTable/Pagination.js
@@ -4,6 +4,8 @@ import styled from 'styled-components';
 import { useTableContext } from './DataTableContext';
 import Select from './Select';
 import { getNumberOfPages, detectRTL } from './util';
+import useWindowSize from '../hooks/useWindowSize';
+import { media, SMALL } from './media';
 
 const defaultComponentOptions = {
   rowsPerPageText: 'Rows per page:',
@@ -36,8 +38,13 @@ const Button = styled.button`
 
 const PageList = styled.div`
   display: flex;
+  align-items: center;
   border-radius: 4px;
   white-space: nowrap;
+  ${media.sm`
+    width: 100%;
+    justify-content: space-around;
+  `};
 `;
 
 const Span = styled.span`
@@ -70,6 +77,8 @@ const Pagination = ({
     paginationIconPrevious,
     paginationComponentOptions,
   } = useTableContext();
+  const windowSize = useWindowSize();
+  const shouldShow = windowSize.width > SMALL;
   const isRTL = detectRTL(direction);
   const numPages = getNumberOfPages(rowCount, rowsPerPage);
   const lastIndex = currentPage * rowsPerPage;
@@ -109,19 +118,25 @@ const Pagination = ({
     );
   }
 
+  const select = (
+    <Select onChange={handleRowsPerPage} defaultValue={rowsPerPage}>
+      {selectOptions}
+    </Select>
+  );
+
   return (
     <PaginationWrapper className="rdt_Pagination">
-      {!options.noRowsPerPage && (
+      {!options.noRowsPerPage && shouldShow && (
         <>
           <RowLabel>{options.rowsPerPageText}</RowLabel>
-          <Select onChange={handleRowsPerPage} defaultValue={rowsPerPage}>
-            {selectOptions}
-          </Select>
+          {select}
         </>
       )}
-      <Range>
-        {range}
-      </Range>
+      {shouldShow && (
+        <Range>
+          {range}
+        </Range>
+      )}
       <PageList>
         <Button
           id="pagination-first-page"
@@ -147,6 +162,8 @@ const Pagination = ({
           {paginationIconPrevious}
         </Button>
 
+        {!shouldShow && select}
+
         <Button
           id="pagination-next-page"
           type="button"