marmelab · djhi · Oct 18, 2019 · Oct 17, 2019
diff --git a/examples/demo/public/index.html b/examples/demo/public/index.html
@@ -132,17 +132,6 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
-  <script>
-    (function (i, s, o, g, r, a, m) {
-      i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
-        (i[r].q = i[r].q || []).push(arguments)
-      }, i[r].l = 1 * new Date(); a = s.createElement(o),
-        m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
-    })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
-
-    ga('create', 'UA-46201426-1', 'auto');
-    ga('send', 'pageview');
-  </script>
 </body>
 
 </html>
diff --git a/examples/demo/src/orders/OrderList.js b/examples/demo/src/orders/OrderList.js
@@ -98,7 +98,12 @@ class TabbedDatagrid extends React.Component {
                 ) : (
                     <div>
                         {filterValues.status === 'ordered' && (
-                            <Datagrid {...props} ids={this.state.ordered}>
+                            <Datagrid
+                                {...props}
+                                ids={this.state.ordered}
+                                optimized
+                                rowClick="edit"
+                            >
                                 <DateField source="date" showTime />
                                 <TextField source="reference" />
                                 <CustomerReferenceField />
@@ -111,7 +116,6 @@ class TabbedDatagrid extends React.Component {
                                     }}
                                     className={classes.total}
                                 />
-                                <EditButton />
                             </Datagrid>
                         )}
                         {filterValues.status === 'delivered' && (

diff --git a/examples/demo/src/reviews/ReviewListDesktop.js b/examples/demo/src/reviews/ReviewListDesktop.js
@@ -29,6 +29,7 @@ const ReviewListDesktop = props => {
             rowClick="edit"
             rowStyle={rowStyle}
             classes={{ headerRow: classes.headerRow }}
+            optimized
             {...props}
         >
             <DateField source="date" />

diff --git a/examples/demo/src/visitors/SegmentsField.js b/examples/demo/src/visitors/SegmentsField.js
@@ -4,7 +4,12 @@ import { useTranslate } from 'react-admin';
 import segments from '../segments/data';
 
 const styles = {
-    main: { display: 'flex', flexWrap: 'wrap' },
+    main: {
+        display: 'flex',
+        flexWrap: 'wrap',
+        marginTop: -8,
+        marginBottom: -8,
+    },
     chip: { margin: 4 },
 };
 

diff --git a/examples/demo/src/visitors/VisitorList.js b/examples/demo/src/visitors/VisitorList.js
@@ -46,7 +46,7 @@ const VisitorList = props => {
             {isXsmall ? (
                 <MobileGrid />
             ) : (
-                <Datagrid>
+                <Datagrid optimized rowClick="edit">
                     <CustomerLinkField />
                     <DateField source="last_seen" type="date" />
                     <NumberField
@@ -61,7 +61,6 @@ const VisitorList = props => {
                     <DateField source="latest_purchase" showTime />
                     <BooleanField source="has_newsletter" label="News." />
                     <SegmentsField />
-                    <EditButton />
                 </Datagrid>
             )}
         </List>

diff --git a/examples/simple/src/posts/PostList.js b/examples/simple/src/posts/PostList.js
@@ -90,6 +90,8 @@ const usePostListActionToolbarStyles = makeStyles({
     toolbar: {
         alignItems: 'center',
         display: 'flex',
+        marginTop: -1,
+        marginBottom: -1,
     },
 });
 
@@ -134,7 +136,7 @@ const PostList = props => {
                     }
                 />
             ) : (
-                <Datagrid rowClick={rowClick} expand={PostPanel}>
+                <Datagrid rowClick={rowClick} expand={PostPanel} optimized>
                     <TextField source="id" />
                     <TextField source="title" cellClassName={classes.title} />
                     <DateField

diff --git a/examples/simple/src/users/UserList.js b/examples/simple/src/users/UserList.js
@@ -56,6 +56,7 @@ const UserList = ({ permissions, ...props }) => (
             <Datagrid
                 rowClick={rowClick(permissions)}
                 expand={<UserEditEmbedded />}
+                optimized
             >
                 <TextField source="id" />
                 <TextField source="name" />

diff --git a/packages/ra-ui-materialui/src/list/Datagrid.js b/packages/ra-ui-materialui/src/list/Datagrid.js
@@ -23,31 +23,17 @@ const useStyles = makeStyles(theme => ({
         tableLayout: 'auto',
     },
     thead: {},
-    tbody: {
-        height: 'inherit',
-    },
+    tbody: {},
     headerRow: {},
-    headerCell: {
-        height: 42,
-        minHeight: 42,
-        padding: '0 12px',
-        '&:last-child': {
-            padding: '0 12px',
-        },
-    },
+    headerCell: {},
     checkbox: {},
     row: {},
     clickableRow: {
         cursor: 'pointer',
     },
     rowEven: {},
     rowOdd: {},
-    rowCell: {
-        padding: '0 12px',
-        '&:last-child': {
-            padding: '0 12px',
-        },
-    },
+    rowCell: {},
     expandHeader: {
         padding: 0,
         width: theme.spacing(6),
@@ -122,6 +108,7 @@ function Datagrid({ classes: classesOverride, ...props }) {
         rowStyle,
         selectedIds,
         setSort,
+        size = 'small',
         total,
         version,
         ...rest
@@ -161,6 +148,7 @@ function Datagrid({ classes: classesOverride, ...props }) {
                 expand={expand}
                 hasBulkActions={hasBulkActions}
                 nbChildren={React.Children.count(children)}
+                size={size}
             />
         );
     }
@@ -182,6 +170,7 @@ function Datagrid({ classes: classesOverride, ...props }) {
     return (
         <Table
             className={classnames(classes.table, className)}
+            size={size}
             {...sanitizeListRestProps(rest)}
         >
             <TableHead className={classes.thead}>
@@ -195,7 +184,7 @@ function Datagrid({ classes: classesOverride, ...props }) {
                         />
                     )}
                     {hasBulkActions && (
-                        <TableCell padding="none">
+                        <TableCell padding="checkbox">
                             <Checkbox
                                 className="select-all"
                                 color="primary"
@@ -221,7 +210,6 @@ function Datagrid({ classes: classesOverride, ...props }) {
                                 key={field.props.source || index}
                                 resource={resource}
                                 updateSort={updateSort}
-                                padding="none"
                             />
                         ) : null
                     )}

diff --git a/packages/ra-ui-materialui/src/list/DatagridLoading.js b/packages/ra-ui-materialui/src/list/DatagridLoading.js
@@ -32,8 +32,9 @@ const DatagridLoading = ({
     hasBulkActions,
     nbChildren,
     nbFakeLines = 5,
+    size,
 }) => (
-    <Table className={classnames(classes.table, className)}>
+    <Table className={classnames(classes.table, className)} size={size}>
         <TableHead>
             <TableRow className={classes.row}>
                 {expand && (
@@ -44,7 +45,7 @@ const DatagridLoading = ({
                 )}
                 {hasBulkActions && (
                     <TableCell
-                        padding="none"
+                        padding="checkbox"
                         className={classes.expandIconCell}
                     >
                         <Checkbox
@@ -59,9 +60,6 @@ const DatagridLoading = ({
                         variant="head"
                         className={classes.headerCell}
                         key={key}
-                        padding={
-                            !!expand || hasBulkActions ? 'none' : undefined
-                        }
                     >
                         <Placeholder />
                     </TableCell>
@@ -87,7 +85,7 @@ const DatagridLoading = ({
                     )}
                     {hasBulkActions && (
                         <TableCell
-                            padding="none"
+                            padding="checkbox"
                             className={classes.expandIconCell}
                         >
                             <Checkbox
@@ -98,13 +96,7 @@ const DatagridLoading = ({
                         </TableCell>
                     )}
                     {times(nbChildren, key2 => (
-                        <TableCell
-                            padding={
-                                !!expand || hasBulkActions ? 'none' : undefined
-                            }
-                            className={classes.rowCell}
-                            key={key2}
-                        >
+                        <TableCell className={classes.rowCell} key={key2}>
                             <Placeholder />
                         </TableCell>
                     ))}

diff --git a/packages/ra-ui-materialui/src/list/DatagridRow.js b/packages/ra-ui-materialui/src/list/DatagridRow.js
@@ -134,7 +134,7 @@ const DatagridRow = ({
                     </TableCell>
                 )}
                 {hasBulkActions && (
-                    <TableCell padding="none">
+                    <TableCell padding="checkbox">
                         <Checkbox
                             color="primary"
                             className={`select-item ${classes.checkbox}`}
@@ -152,9 +152,6 @@ const DatagridRow = ({
                                 classes.rowCell
                             )}
                             record={record}
-                            padding={
-                                !!expand || hasBulkActions ? 'none' : undefined
-                            }
                             {...{ field, basePath, resource }}
                         />
                     ) : null

diff --git a/packages/ra-ui-materialui/src/list/SingleFieldList.js b/packages/ra-ui-materialui/src/list/SingleFieldList.js
@@ -7,9 +7,14 @@ import { linkToRecord } from 'ra-core';
 
 import Link from '../Link';
 
-const useStyles = makeStyles({
-    root: { display: 'flex', flexWrap: 'wrap' },
-});
+const useStyles = makeStyles(theme => ({
+    root: {
+        display: 'flex',
+        flexWrap: 'wrap',
+        marginTop: -theme.spacing(1),
+        marginBottom: -theme.spacing(1),
+    },
+}));
 
 // useful to prevent click bubbling in a datagrid with rowClick
 const stopPropagation = e => e.stopPropagation();