Expose column header renderer trait in ipydatagrid (#158)

* add header_renderer trait to ipydatagrid backend

* add columnHeaderRenderer (header_renderer) to ipydatagrid frontend model

* add custom columnHeaderRenderer support to feathergrid

Author: ibdafna

ipydatagrid/datagrid.py

@@ -196,6 +196,8 @@ class DataGrid(DOMWidget):
         column name, and value specifies the renderer
     default_renderer : CellRenderer (default: TextRenderer)
         Default renderer to use for cell rendering
+    header_renderer : CellRenderer (default: TextRenderer)
+        Renderer to use for header cell rendering
     selection_mode : {'row', 'column', 'cell', 'none'} (default: 'none')
         Selection mode used when user clicks on grid or makes selections
         programmatically.
@@ -246,6 +248,7 @@ class DataGrid(DOMWidget):
 
     renderers = Dict(Instance(CellRenderer)).tag(sync=True, **widget_serialization)
     default_renderer = Instance(CellRenderer).tag(sync=True, **widget_serialization)
+    header_renderer = Instance(CellRenderer, allow_none=True).tag(sync=True, **widget_serialization)
     selection_mode = Enum(default_value='none', values=['row', 'column', 'cell', 'none']).tag(sync=True)
     selections = List(Dict).tag(sync=True, **widget_serialization)
     editable = Bool(False).tag(sync=True)

src/datagrid.ts

@@ -51,6 +51,7 @@ export class DataGridModel extends DOMWidgetModel {
       _data: {},
       renderers: {},
       default_renderer: null,
+      header_renderer: null,
       selection_mode: 'none',
       selections: [],
       editable: false,
@@ -221,6 +222,7 @@ export class DataGridModel extends DOMWidgetModel {
     transforms: { deserialize: unpack_models as any },
     renderers: { deserialize: unpack_models as any },
     default_renderer: { deserialize: unpack_models as any },
+    header_renderer: { deserialize: unpack_models as any },
     _data: { deserialize: unpack_data as any },
   };
 
@@ -366,7 +368,7 @@ export class DataGridView extends DOMWidgetView {
     });
 
     this.model.on_some_change(
-      ['default_renderer', 'renderers'],
+      ['header_renderer', 'default_renderer', 'renderers'],
       () => {
         this.updateRenderers().then(this.updateGridRenderers.bind(this));
       },
@@ -394,6 +396,9 @@ export class DataGridView extends DOMWidgetView {
     if (this.default_renderer) {
       this.stopListening(this.default_renderer, 'renderer-changed');
     }
+    if (this.header_renderer) {
+      this.stopListening(this.header_renderer, 'renderer-changed');
+    }
     for (const key in this.renderers) {
       this.stopListening(this.renderers[key], 'renderer-changed');
     }
@@ -416,6 +421,23 @@ export class DataGridView extends DOMWidgetView {
       ),
     );
 
+    const header_renderer = this.model.get('header_renderer');
+    if (header_renderer) {
+      promises.push(
+        this.create_child_view(header_renderer).then(
+          (headerRendererView: any) => {
+            this.header_renderer = headerRendererView;
+
+            this.listenTo(
+              this.header_renderer,
+              'renderer-changed',
+              this.updateGridRenderers.bind(this),
+            );
+          },
+        ),
+      );
+    }
+
     const renderer_promises: Dict<Promise<any>> = {};
     _.each(
       this.model.get('renderers'),
@@ -460,11 +482,21 @@ export class DataGridView extends DOMWidgetView {
 
   private updateGridRenderers() {
     const defaultRenderer = this.default_renderer.renderer;
+    let columnHeaderRenderer = null;
+    if (this.header_renderer) {
+      columnHeaderRenderer = this.header_renderer.renderer;
+    }
+
     const renderers: Dict<CellRenderer> = {};
     Object.entries(this.renderers).forEach(([name, rendererView]) => {
       renderers[name] = rendererView.renderer;
     });
+
     this.grid.defaultRenderer = defaultRenderer;
+    // Set column header renderer only if received from backend
+    if (columnHeaderRenderer) {
+      this.grid.columnHeaderRenderer = columnHeaderRenderer;
+    }
     this.grid.renderers = renderers;
   }
 
@@ -487,6 +519,7 @@ export class DataGridView extends DOMWidgetView {
 
   renderers: Dict<CellRendererView>;
   default_renderer: CellRendererView;
+  header_renderer: CellRendererView;
   grid: FeatherGrid;
   pWidget: JupyterPhosphorPanelWidget;
   model: DataGridModel;

src/feathergrid.ts

@@ -216,7 +216,7 @@ export class FeatherGrid extends Widget {
       font: '12px sans-serif',
       textColor: Theme.getFontColor(),
       backgroundColor: Theme.getBackgroundColor(),
-      horizontalAlignment: 'left',
+      horizontalAlignment: 'center',
       verticalAlignment: 'center',
     });
 
@@ -270,7 +270,6 @@ export class FeatherGrid extends Widget {
     }
 
     this.grid.dataModel = this._dataModel;
-    this._updateHeaderRenderer();
     this._filterDialog.model = this._dataModel;
     this._updateColumnWidths();
   }
@@ -387,6 +386,20 @@ export class FeatherGrid extends Widget {
     return this._defaultRenderer;
   }
 
+  set columnHeaderRenderer(renderer: CellRenderer) {
+    this._columnHeaderRenderer = renderer;
+
+    if (!this.grid) {
+      return;
+    }
+
+    this._updateGridRenderers();
+  }
+
+  get columnHeaderRenderer(): CellRenderer {
+    return this._columnHeaderRenderer;
+  }
+
   set renderers(renderers: Dict<CellRenderer>) {
     this._renderers = renderers;
 
@@ -490,8 +503,6 @@ export class FeatherGrid extends Widget {
   }
 
   public updateGridStyle() {
-    this._updateHeaderRenderer();
-
     if (!this._defaultRendererSet) {
       this._defaultRenderer = new TextRenderer({
         font: '12px sans-serif',
@@ -509,6 +520,13 @@ export class FeatherGrid extends Widget {
       verticalAlignment: 'center',
     });
 
+    this._columnHeaderRenderer = new TextRenderer({
+      textColor: Theme.getFontColor(1),
+      backgroundColor: Theme.getBackgroundColor(2),
+      horizontalAlignment: 'left',
+      verticalAlignment: 'center',
+    });
+
     const scrollShadow = {
       size: 4,
       color1: Theme.getBorderColor(1, 1.0),
@@ -769,6 +787,13 @@ export class FeatherGrid extends Widget {
 
   private _updateGridRenderers() {
     this.grid.cellRenderers.update({ body: this._rendererResolver.bind(this) });
+    this.grid.cellRenderers.update({
+      'column-header': this._columnHeaderRenderer,
+    });
+    // Treating corner header as column header for rendering purposes
+    this.grid.cellRenderers.update({
+      'corner-header': this._columnHeaderRenderer,
+    });
     this.grid.cellRenderers.update({
       'row-header': this._rendererResolver.bind(this),
     });
@@ -811,21 +836,6 @@ export class FeatherGrid extends Widget {
     }
   }
 
-  private _updateHeaderRenderer() {
-    const headerRenderer = new HeaderRenderer({
-      textOptions: {
-        textColor: Theme.getFontColor(1),
-        backgroundColor: Theme.getBackgroundColor(2),
-        horizontalAlignment: 'center',
-      },
-      isLightTheme: this._isLightTheme,
-      grid: this.grid,
-    });
-
-    this.grid.cellRenderers.update({ 'column-header': headerRenderer });
-    this.grid.cellRenderers.update({ 'corner-header': headerRenderer });
-  }
-
   private _createCommandRegistry(): CommandRegistry {
     const commands = new CommandRegistry();
     commands.addCommand(FeatherGridContextMenu.CommandID.SortAscending, {
@@ -950,6 +960,7 @@ export class FeatherGrid extends Widget {
   private _editable: boolean;
   private _renderers: Dict<CellRenderer> = {};
   private _defaultRenderer: CellRenderer;
+  private _columnHeaderRenderer: CellRenderer;
   private _rowHeaderRenderer: CellRenderer;
   private _defaultRendererSet = false;
   private _cellClicked = new Signal<this, FeatherGrid.ICellClickedEvent>(this);