Allow for handsontable resizing

Author: SylvainCorlay

ipysheet/sheet.py

@@ -1,4 +1,6 @@
 import ipywidgets as widgets
+from ipywidgets.widgets.widget_layout import LayoutTraitType
+
 import traitlets
 from traitlets import Unicode, CInt, List, Tuple, Instance, Union, Dict, Bool, Any
 
@@ -100,6 +102,8 @@ class Sheet(widgets.DOMWidget):
     row_resizing = Bool(True).tag(sync=True)
     search_token = Unicode('').tag(sync=True)
 
+    layout = LayoutTraitType(kw=dict(height='auto', width='auto')).tag(sync=True, **widgets.widget_serialization)
+
     def __getitem__(self, item):
         '''Gets a previously created cell at row and column
 

js/css/custom.css

@@ -1,13 +1,20 @@
-.wtHolder {
-  width: auto !important;
-  height: auto !important;
-}
-
-.handsontable .jupyter-widgets {
-    width: 100%;
-    height: 100%;
-}
-
+/* handsontable layout*/
+
+/* These properties can be overridden with the Layout widget.
+ *
+ *  - overflow: hidden;
+ *   the first parent element with defined dimension and overflow: hidden is considered as the container for the spreadsheet
+ *
+ *  - height: 250px;
+ *   we used a fixed value in pixels for the the natural height because `auto` yields a zero-height table in the Jupyter notebook.
+ *
+ */
+.handsontable.jupyter-widgets {
+   overflow: hidden;
+   height: 250px;
+}
+
+/* handsontable theme */
 .p-Widget .handsontable .table caption + thead tr:first-child th,
 .p-Widget .handsontable .table caption + thead tr:first-child td,
 .p-Widget .handsontable .table colgroup + thead tr:first-child th,

js/src/sheet.ts

@@ -276,6 +276,8 @@ let SheetView = widgets.DOMWidgetView.extend({
     render: function() {
         // this.widget_view_promises = {}
         this.widget_views = {}
+        this.el.classList.add("handsontable");
+        this.el.classList.add("jupyter-widgets");
         this.table_container = document.createElement('div');
         this.el.appendChild(this.table_container);
         // promise used for unittesting
@@ -334,7 +336,7 @@ let SheetView = widgets.DOMWidgetView.extend({
                     // good, the previous widget_view should be reused
                 } else {
                     // we have a leftover view from the previous run
-                    widget_view.remove()
+                    widget_view.remove();
                 }
             }
         }