Add support for column auto resize

Signed-off-by: Itay Dafna <[email protected]>

Author: ibdafna

ipydatagrid/datagrid.py

@@ -238,6 +238,14 @@ class DataGrid(DOMWidget):
         Dict to specify custom column sizes
         The keys (strings) indicate the names of the columns
         The values (integers) indicate the widths
+    auto_fit_columns : Bool (default: True)
+        Specify whether column width should automatically be
+        determined by the grid
+    auto_fit_params : Dict (default: {"area":"all", "padding":30, "numCols":None})
+        Specify column auto fit parameters. Supported parameters:
+        1) area: where to resize column widths - 'row-header', 'body' or 'all' (default)
+        2) padding: add padding to resized column widths (15 pixels by default)
+        3) numCols: cap the number of columns to be resized (None)
     grid_style : Dict of {propertyName: string | VegaExpr | Dict}
         Dict to specify global grid styles.
         The keys (strings) indicate the styling property
@@ -331,6 +339,9 @@ class DataGrid(DOMWidget):
     editable = Bool(False).tag(sync=True)
     column_widths = Dict({}).tag(sync=True)
     grid_style = Dict(allow_none=True).tag(sync=True, **widget_serialization)
+    auto_fit_columns = Bool(False).tag(sync=True)
+    auto_fit_params = Dict(dict(area="all", padding=30, numCols=None), 
+        allow_none=False).tag(sync=True, **widget_serialization)
 
     def __init__(self, dataframe, **kwargs):
         # Setting default index name if not explicitly

js/datagrid.ts

@@ -469,13 +469,48 @@ export class DataGridView extends DOMWidgetView {
       this.grid.editable = this.model.get('editable');
     });
 
+    this.model.on_some_change(
+      ['auto_fit_columns', 'auto_fit_params'],
+      () => {
+        this.handleColumnAutoFit();
+      },
+      this,
+    );
+
+    if (this.model.get('auto_fit_columns')) {
+      this.handleColumnAutoFit();
+    }
+
     return this.updateRenderers().then(() => {
       this.updateGridStyle();
       this.updateGridRenderers();
       this.pWidget.addWidget(this.grid);
     });
   }
 
+  private handleColumnAutoFit() {
+    // Check whether we need to auto-fit or revert to base size.
+    const shouldAutoFit = this.model.get('auto_fit_columns');
+    if (!shouldAutoFit) {
+      this.grid.baseColumnSize = this.model.get('base_column_size');
+      // Terminate call here if not auto-fitting.
+      return;
+    }
+
+    // Retrieve user-defined auto-fit params
+    let { area, padding, numCols } = this.model.get('auto_fit_params');
+
+    // Data validation on params
+    area = area ?? 'all';
+    padding = padding ?? 30;
+    numCols = numCols ?? undefined;
+    console.log(area, padding, numCols);
+
+    // Call resize function
+    //@ts-ignore
+    this.grid.grid.fitColumnNames(area, padding, numCols);
+  }
+
   private updateRenderers() {
     // Unlisten to previous renderers
     if (this.default_renderer) {