update

packages/app/src/components/PageEditor/HandsontableModal.jsx

@@ -17,6 +17,7 @@ import ExpandOrContractButton from '../ExpandOrContractButton';
 import MarkdownTableDataImportForm from './MarkdownTableDataImportForm';
 
 import styles from './HandsontableModal.module.scss';
+import 'handsontable/dist/handsontable.full.min.css';
 
 const DEFAULT_HOT_HEIGHT = 300;
 const MARKDOWNTABLE_TO_HANDSONTABLE_ALIGNMENT_SYMBOL_MAPPING = {
@@ -441,8 +442,8 @@ export default class HandsontableModal extends React.PureComponent {
         backdrop="static"
         keyboard={false}
         size="lg"
-        // eslint-disable-next-line max-len
-        className={`${styles['grw-handsontable']} ${styles['handsontable-modal']} handsontable-modal ${this.state.isWindowExpanded && `grw-modal-expanded ${styles['grw-modal-expanded']}`}`}
+        className={`handsontable-modal ${styles['handsontable-modal']} ${styles['grw-handsontable']}
+          ${this.state.isWindowExpanded && `grw-modal-expanded ${styles['grw-modal-expanded']}`}`}
       >
         <ModalHeader tag="h4" toggle={this.cancel} close={buttons} className="bg-primary text-light">
           Edit Table

packages/app/src/components/PageEditor/HandsontableModal.module.scss

@@ -1,40 +1,24 @@
+.grw-handsontable :global {
+  .handsontable {
+    position: relative;
 
-.handsontable :global {
-  .handsontableInput {
-    max-width: 290px !important;
-  }
+    .handsontableInput {
+      max-width: 290px !important;
+    }
+
+    td {
+      word-break: break-all;
+    }
 
-  td {
-    word-break: break-all;
+    th {
+      text-align: inherit;
+    }
   }
 }
 
+// expand .hot-table-container (with flexbox)
 .grw-modal-expanded :global {
-  // expand .hot-table-container (with flexbox)
   .hot-table-container {
     flex: 1;
   }
 }
-
-// Prevent handsontable/handsontable #2937 (Manual column resize does not work when handsontable is loaded inside Bootstrap 3.0 Modal)
-// see https://github.com/handsontable/handsontable/issues/2937#issuecomment-287390111
-.modal.in .modal-dialog {
-  &.handsontable-modal :global {
-    transform: none;
-
-    .data-import-button {
-      position: relative;
-      padding-right: 35px;
-      padding-left: 10px;
-
-      i:before {
-        position: absolute;
-        top: 6px;
-        right: 8px;
-        font-size: 20px;
-      }
-    }
-  }
-}
-
-

packages/app/src/styles/_handsontable.scss

@@ -1,39 +1,39 @@
-.grw-handsontable :global {
-  .handsontable {
-    position: relative;
+// .grw-handsontable :global {
+//   .handsontable {
+//     position: relative;
 
-    .handsontableInput{
-      max-width: 290px !important;
-    }
+//     .handsontableInput{
+//       max-width: 290px !important;
+//     }
 
-    td {
-      word-break: break-all;
-    }
-  }
-}
+//     td {
+//       word-break: break-all;
+//     }
+//   }
+// }
 
-.handsontable-modal.grw-modal-expanded {
-  // expand .hot-table-container (with flexbox)
-  .hot-table-container {
-    flex: 1;
-  }
-}
+// .handsontable-modal.grw-modal-expanded {
+//   // expand .hot-table-container (with flexbox)
+//   .hot-table-container {
+//     flex: 1;
+//   }
+// }
 
-// Prevent handsontable/handsontable #2937 (Manual column resize does not work when handsontable is loaded inside Bootstrap 3.0 Modal)
-// see https://github.com/handsontable/handsontable/issues/2937#issuecomment-287390111
-.modal.in .modal-dialog.handsontable-modal {
-  transform: none;
+// // Prevent handsontable/handsontable #2937 (Manual column resize does not work when handsontable is loaded inside Bootstrap 3.0 Modal)
+// // see https://github.com/handsontable/handsontable/issues/2937#issuecomment-287390111
+// .modal.in .modal-dialog.handsontable-modal {
+//   transform: none;
 
-  .data-import-button {
-    position: relative;
-    padding-right: 35px;
-    padding-left: 10px;
+//   .data-import-button {
+//     position: relative;
+//     padding-right: 35px;
+//     padding-left: 10px;
 
-    i:before {
-      position: absolute;
-      top: 6px;
-      right: 8px;
-      font-size: 20px;
-    }
-  }
-}
+//     i:before {
+//       position: absolute;
+//       top: 6px;
+//       right: 8px;
+//       font-size: 20px;
+//     }
+//   }
+// }

packages/app/src/styles/style-app.scss

@@ -44,7 +44,7 @@
 @import 'editor-attachment';
 @import 'editor-navbar';
 @import 'page-content-footer';
-@import 'handsontable';
+// @import 'handsontable';
 @import 'layout';
 @import 'login';
 @import 'me';

packages/app/src/styles/style-next.scss

@@ -147,3 +147,22 @@
   }
 
 }
+
+// Prevent handsontable/handsontable #2937 (Manual column resize does not work when handsontable is loaded inside Bootstrap 3.0 Modal)
+// see https://github.com/handsontable/handsontable/issues/2937#issuecomment-287390111
+.modal.in .modal-dialog.handsontable-modal {
+  transform: none;
+
+  .data-import-button {
+    position: relative;
+    padding-right: 35px;
+    padding-left: 10px;
+
+    i:before {
+      position: absolute;
+      top: 6px;
+      right: 8px;
+      font-size: 20px;
+    }
+  }
+}