Merge pull request #178 from material-table-core/fix-detail-panel-sho…

…wDetailPanelIcon-with-bulk-edit fix issue with showDetailPanelIcon and bulk edit
material-table-core · Apr 29, 2021 · ec2b2bd · ec2b2bd
2 parents ff2d31e + b961315
commit ec2b2bd
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 0 deletions.
diff --git a/__tests__/demo/demo-components/index.js b/__tests__/demo/demo-components/index.js
@@ -76,6 +76,62 @@ export function BulkEdit() {
   );
 }
 
+export function BulkEditWithDetailPanel() {
+  const [data, setData] = useState([
+    { name: 'joe', id: 1, age: 0, x: 'y' },
+    { name: 'nancy', id: 2, age: 1, x: 'b' }
+  ]);
+
+  const [columns] = useState([
+    { title: 'Name', field: 'name' },
+    { title: 'X', field: 'x' },
+    { title: 'Age', field: 'age' },
+    {
+      title: 'Identifier',
+      field: 'id'
+    }
+  ]);
+
+  return (
+    <div className="App">
+      <MaterialTable
+        title="Editable Preview"
+        columns={columns}
+        data={data}
+        options={{
+          showDetailPanelIcon: false
+        }}
+        detailPanel={(rowData) => {
+          return (
+            <iframe
+              width="100%"
+              height="315"
+              src="https://www.youtube.com/embed/C0DPdy98e4c"
+              frameborder="0"
+              allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+              allowfullscreen
+            />
+          );
+        }}
+        editable={{
+          onBulkUpdate: (changes) =>
+            new Promise((resolve, reject) => {
+              setTimeout(() => {
+                resolve();
+              }, 1000);
+            }),
+          onRowDelete: (oldData) =>
+            new Promise((resolve, reject) => {
+              setTimeout(() => {
+                resolve();
+              }, 1000);
+            })
+        }}
+      />
+    </div>
+  );
+}
+
 export function EditableRow(props) {
   const [isEditing, setIsEditing] = useState(false);
 

diff --git a/__tests__/demo/demo.js b/__tests__/demo/demo.js
@@ -23,6 +23,7 @@ import {
   Basic,
   OneDetailPanel,
   BulkEdit,
+  BulkEditWithDetailPanel,
   ExportData,
   CustomExport,
   EditableRow,
@@ -52,6 +53,9 @@ render(
     <h1>Bulk Edit</h1>
     <BulkEdit />
 
+    <h1>Bulk Edit With Detail Panel</h1>
+    <BulkEditWithDetailPanel />
+
     <h1>Hiding Columns</h1>
     <HidingColumns />
 

diff --git a/src/components/MTableEditRow/index.js b/src/components/MTableEditRow/index.js
@@ -160,6 +160,9 @@ function MTableEditRow(props) {
 
   function renderActions() {
     if (props.mode === 'bulk') {
+      if (props.detailPanel && !props.options.showDetailPanelIcon) {
+        return;
+      }
       return <TableCell padding="none" key="key-actions-column" />;
     }