[DataGrid] Fix display of row count and selected rows on mobile (#508)

* Enable Row Count and Selected Rows on mobile * Hide RowCount and SelectedRowCount if paginationComponent is provided * Hide Row count and Selected rows on mobile if Pagination is available * Hide Total rows when there is pagination, remove select and label from TablePagination * Update packages/grid/_modules_/grid/components/pagination.tsx Co-authored-by: Olivier Tassinari <olivier.tassinari@gmail.com> * Adjust class names * Swap Total Row and rows selected places * Update footer breakpoint to "sm" * Fix formatting * Fix responsive styles Co-authored-by: Olivier Tassinari <olivier.tassinari@gmail.com>
mui · Nov 4, 2020 · 1071158 · 1071158
1 parent 4c3a779
commit 1071158
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 12 deletions.
diff --git a/packages/grid/_modules_/grid/components/default-footer.tsx b/packages/grid/_modules_/grid/components/default-footer.tsx
@@ -7,6 +7,7 @@ import { ApiContext } from './api-context';
 import { RowCount } from './row-count';
 import { SelectedRowCount } from './selected-row-count';
 import { GridFooter } from './styled-wrappers/GridFooter';
+import { classnames } from '../utils';
 
 export interface DefaultFooterProps {
   paginationComponent: React.ReactNode;
@@ -24,12 +25,25 @@ export const DefaultFooter = React.forwardRef<HTMLDivElement, DefaultFooterProps
       return null;
     }
 
+    const isPaginationAvailable = !!paginationComponent;
+    const showRowCount = !options.hideFooterRowCount && !isPaginationAvailable && (
+      <RowCount rowCount={totalRowCount} />
+    );
+    const showSelectedRowCount = !options.hideFooterSelectedRowCount && (
+      <SelectedRowCount selectedRowCount={selectedRowCount} />
+    );
+    const justifyItemsEnd = !selectedRowCount && !options.hideFooterSelectedRowCount;
+
     return (
-      <GridFooter ref={ref}>
-        {!options.hideFooterRowCount && <RowCount rowCount={totalRowCount} />}
-        {!options.hideFooterSelectedRowCount && (
-          <SelectedRowCount selectedRowCount={selectedRowCount} />
-        )}
+      <GridFooter
+        ref={ref}
+        className={classnames({
+          'MuiDataGrid-footer-paginationAvailable': isPaginationAvailable,
+          'MuiDataGrid-footer-justifyContentEnd': justifyItemsEnd,
+        })}
+      >
+        {showSelectedRowCount}
+        {showRowCount}
         {paginationComponent}
       </GridFooter>
     );

diff --git a/packages/grid/_modules_/grid/components/pagination.tsx b/packages/grid/_modules_/grid/components/pagination.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import TablePagination from '@material-ui/core/TablePagination';
+import { makeStyles, Theme } from '@material-ui/core/styles';
 
 export interface PaginationComponentProps {
   pageCount: number;
@@ -11,6 +12,25 @@ export interface PaginationComponentProps {
   rowsPerPageOptions?: number[];
 }
 
+// Used to hide the drop down select from the TablePaginagion
+const useStyles = makeStyles((theme: Theme) => ({
+  caption: {
+    display: 'none',
+    [theme.breakpoints.up('md')]: {
+      display: 'block',
+    },
+    '& ~ &': {
+      display: 'block',
+    },
+  },
+  input: {
+    display: 'none',
+    [theme.breakpoints.up('md')]: {
+      display: 'block',
+    },
+  },
+}));
+
 export const Pagination: React.FC<PaginationComponentProps> = ({
   setPage,
   setPageSize,
@@ -19,6 +39,7 @@ export const Pagination: React.FC<PaginationComponentProps> = ({
   currentPage,
   rowsPerPageOptions,
 }) => {
+  const classes = useStyles();
   const onPageSizeChange = React.useCallback(
     (event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => {
       const newPageSize = Number(event.target.value);
@@ -36,6 +57,7 @@ export const Pagination: React.FC<PaginationComponentProps> = ({
 
   return (
     <TablePagination
+      classes={classes}
       component="div"
       count={rowCount}
       page={currentPage - 1}

diff --git a/packages/grid/_modules_/grid/components/styled-wrappers/GridRootStyles.ts b/packages/grid/_modules_/grid/components/styled-wrappers/GridRootStyles.ts
@@ -206,18 +206,26 @@ export const useStyles = makeStyles(
         '& .MuiDataGrid-cellCenter': {
           textAlign: 'center',
         },
+        '& .MuiDataGrid-rowCount, & .MuiDataGrid-selectedRowCount': {
+          alignItems: 'center',
+          display: 'flex',
+          margin: theme.spacing(0, 2),
+        },
         '& .MuiDataGrid-footer': {
           display: 'flex',
           justifyContent: 'space-between',
           alignItems: 'center',
           minHeight: 52, // Match TablePagination min height
-        },
-        '& .MuiDataGrid-rowCount, & .MuiDataGrid-selectedRowCount': {
-          alignItems: 'center',
-          display: 'none',
-          margin: theme.spacing(0, 2),
-          [theme.breakpoints.up('md')]: {
-            display: 'flex',
+          '&.MuiDataGrid-footer-paginationAvailable': {
+            '& .MuiDataGrid-rowCount, & .MuiDataGrid-selectedRowCount': {
+              visibility: 'hidden',
+              [theme.breakpoints.up('md')]: {
+                visibility: 'visible',
+              },
+            },
+          },
+          '&.MuiDataGrid-footer-justifyContentEnd': {
+            justifyContent: 'flex-end',
           },
         },
         '& .MuiDataGrid-colCell-dropZone .MuiDataGrid-colCell-draggable': {