fix: edit mode with fixed columns breaks table layout (#498)

material-table-core · Mar 5, 2022 · 58cdfa4 · 58cdfa4
1 parent 8e7f715
commit 58cdfa4
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 2 deletions.
diff --git a/__tests__/demo/demo-components/index.js b/__tests__/demo/demo-components/index.js
@@ -1164,3 +1164,70 @@ export function TableWithSummary() {
     />
   );
 }
+
+export function FixedColumnWithEdit() {
+  const [data, setData] = useState([
+    { name: 'jack', id: 1 },
+    { name: 'nancy', id: 2 }
+  ]);
+  const columns = [
+    { field: 'id', title: 'Id', editable: 'never', width: 100 },
+    { field: 'firstName', title: 'First Name', width: 200 },
+    { field: 'lastName', title: 'Last Name', width: 200 },
+    { field: 'lastName', title: 'Last Name', width: 200 },
+    { field: 'lastName', title: 'Last Name', width: 200 },
+    { field: 'lastName', title: 'Last Name', width: 200 }
+  ];
+
+  return (
+    <MaterialTable
+      data={data}
+      columns={columns}
+      options={{
+        fixedColumns: { left: 1, right: 0 }
+      }}
+      editable={{
+        onRowAddCancelled: (rowData) => console.log('Row adding cancelled'),
+        onRowUpdateCancelled: (rowData) => console.log('Row editing cancelled'),
+        onRowAdd: (newData) => {
+          return new Promise((resolve, reject) => {
+            setTimeout(() => {
+              newData.id = 'uuid-' + Math.random() * 10000000;
+              setData([...data, newData]);
+              resolve();
+            }, 1000);
+          });
+        },
+        onRowUpdate: (newData, oldData) => {
+          return new Promise((resolve, reject) => {
+            setTimeout(() => {
+              const dataUpdate = [...data];
+              // In dataUpdate, find target
+              const target = dataUpdate.find(
+                (el) => el.id === oldData.tableData.id
+              );
+              const index = dataUpdate.indexOf(target);
+              dataUpdate[index] = newData;
+              setData([...dataUpdate]);
+              resolve();
+            }, 1000);
+          });
+        },
+        onRowDelete: (oldData) => {
+          return new Promise((resolve, reject) => {
+            setTimeout(() => {
+              const dataDelete = [...data];
+              const target = dataDelete.find(
+                (el) => el.id === oldData.tableData.id
+              );
+              const index = dataDelete.indexOf(target);
+              dataDelete.splice(index, 1);
+              setData([...dataDelete]);
+              resolve();
+            }, 1000);
+          });
+        }
+      }}
+    />
+  );
+}
diff --git a/__tests__/demo/demo.js b/__tests__/demo/demo.js
@@ -43,7 +43,8 @@ import {
   SelectionOnRowClick,
   DetailPanelRemounting,
   TreeData,
-  TableWithSummary
+  TableWithSummary,
+  FixedColumnWithEdit
 } from './demo-components';
 import { I1353, I1941, I122 } from './demo-components/RemoteData';
 import { Table, TableCell, TableRow, Paper } from '@material-ui/core';
@@ -159,6 +160,8 @@ render(
         <I122 />
       </li>
     </ol>
+    <h1>Fixed Column with Row Edits</h1>
+    <FixedColumnWithEdit />
   </div>,
   document.querySelector('#app')
 );
diff --git a/src/material-table.js b/src/material-table.js
@@ -1253,7 +1253,7 @@ export default class MaterialTable extends React.Component {
                             top: 0,
                             left: 0,
                             boxShadow: '2px 0px 15px rgba(125,147,178,.25)',
-                            overflowX: 'hidden',
+                            overflowX: 'visible',
                             zIndex: 11
                           }}
                         >