Add support for corner header renderer

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

Author: ibdafna

ipydatagrid/datagrid.py

@@ -216,6 +216,8 @@ class DataGrid(DOMWidget):
         Default renderer to use for cell rendering
     header_renderer : CellRenderer (default: TextRenderer)
         Renderer to use for header cell rendering
+    corner_renderer : CellRenderer (default: TextRenderer)
+        Renderer to use for corner header cell rendering
     selection_mode : {'row', 'column', 'cell', 'none'} (default: 'none')
         Selection mode used when user clicks on grid or makes selections
         programmatically.
@@ -314,6 +316,9 @@ class DataGrid(DOMWidget):
     header_renderer = Instance(CellRenderer, allow_none=True).tag(
         sync=True, **widget_serialization
     )
+    corner_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)

js/datagrid.ts

@@ -56,6 +56,7 @@ export class DataGridModel extends DOMWidgetModel {
       headerVisibility: 'all',
       _data: {},
       renderers: {},
+      corner_renderer: null,
       default_renderer: null,
       header_renderer: null,
       selection_mode: 'none',
@@ -238,6 +239,7 @@ export class DataGridModel extends DOMWidgetModel {
     ...DOMWidgetModel.serializers,
     transforms: { deserialize: unpack_models as any },
     renderers: { deserialize: unpack_models as any },
+    corner_renderer: { 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 },
@@ -444,7 +446,13 @@ export class DataGridView extends DOMWidgetView {
     });
 
     this.model.on_some_change(
-      ['header_renderer', 'default_renderer', 'renderers', 'grid_style'],
+      [
+        'corner_renderer',
+        'header_renderer',
+        'default_renderer',
+        'renderers',
+        'grid_style',
+      ],
       () => {
         this.updateRenderers()
           .then(this.updateGridStyle.bind(this))
@@ -476,6 +484,9 @@ export class DataGridView extends DOMWidgetView {
     if (this.header_renderer) {
       this.stopListening(this.header_renderer, 'renderer-changed');
     }
+    if (this.corner_renderer) {
+      this.stopListening(this.corner_renderer, 'renderer-changed');
+    }
     for (const key in this.renderers) {
       this.stopListening(this.renderers[key], 'renderer-changed');
     }
@@ -498,6 +509,23 @@ export class DataGridView extends DOMWidgetView {
       ),
     );
 
+    const corner_renderer = this.model.get('corner_renderer');
+    if (corner_renderer) {
+      promises.push(
+        this.create_child_view(corner_renderer).then(
+          (cornerRendererView: any) => {
+            this.corner_renderer = cornerRendererView;
+
+            this.listenTo(
+              this.corner_renderer,
+              'renderer-changed',
+              this.updateGridRenderers.bind(this),
+            );
+          },
+        ),
+      );
+    }
+
     const header_renderer = this.model.get('header_renderer');
     if (header_renderer) {
       promises.push(
@@ -577,6 +605,11 @@ export class DataGridView extends DOMWidgetView {
       columnHeaderRenderer = this.header_renderer.renderer;
     }
 
+    let cornerHeaderRenderer = null;
+    if (this.corner_renderer) {
+      cornerHeaderRenderer = this.corner_renderer.renderer;
+    }
+
     const renderers: Dict<CellRenderer> = {};
     Object.entries(this.renderers).forEach(([name, rendererView]) => {
       renderers[name] = rendererView.renderer;
@@ -587,6 +620,10 @@ export class DataGridView extends DOMWidgetView {
     if (columnHeaderRenderer) {
       this.grid.columnHeaderRenderer = columnHeaderRenderer;
     }
+
+    if (cornerHeaderRenderer) {
+      this.grid.cornerHeaderRenderer = cornerHeaderRenderer;
+    }
     this.grid.renderers = renderers;
   }
 
@@ -608,6 +645,7 @@ export class DataGridView extends DOMWidgetView {
   }
 
   renderers: Dict<CellRendererView>;
+  corner_renderer: CellRendererView;
   default_renderer: CellRendererView;
   header_renderer: CellRendererView;
   grid: FeatherGrid;

js/feathergrid.ts

@@ -424,6 +424,39 @@ export class FeatherGrid extends Widget {
     return this._columnHeaderRenderer;
   }
 
+  set cornerHeaderRenderer(renderer: CellRenderer) {
+    const textRenderer = renderer as TextRenderer;
+
+    // HeaderRenderer adds the filter dialogue box overlay
+    this._cornerHeaderRenderer = new HeaderRenderer({
+      textOptions: {
+        font: textRenderer.font,
+        wrapText: textRenderer.wrapText,
+        elideDirection: textRenderer.elideDirection,
+        textColor: textRenderer.textColor,
+        backgroundColor:
+          this.grid.style.headerBackgroundColor ||
+          textRenderer.backgroundColor ||
+          Theme.getBackgroundColor(),
+        verticalAlignment: textRenderer.verticalAlignment,
+        horizontalAlignment: textRenderer.horizontalAlignment,
+        format: textRenderer.format,
+      },
+      isLightTheme: this._isLightTheme,
+      grid: this.grid,
+    });
+
+    if (!this.grid) {
+      return;
+    }
+
+    this._updateHeaderRenderer();
+  }
+
+  get cornerHeaderRenderer(): CellRenderer {
+    return this._cornerHeaderRenderer;
+  }
+
   set renderers(renderers: Dict<CellRenderer>) {
     this._renderers = renderers;
 
@@ -607,6 +640,18 @@ export class FeatherGrid extends Widget {
       isLightTheme: this._isLightTheme,
       grid: this.grid,
     });
+
+    this._cornerHeaderRenderer = new HeaderRenderer({
+      textOptions: {
+        textColor: Theme.getFontColor(1),
+        backgroundColor:
+          this.grid.style.headerBackgroundColor || Theme.getBackgroundColor(2),
+        horizontalAlignment: 'left',
+        verticalAlignment: 'center',
+      },
+      isLightTheme: this._isLightTheme,
+      grid: this.grid,
+    });
   }
 
   copyToClipboard(): void {
@@ -893,9 +938,17 @@ export class FeatherGrid extends Widget {
     this.grid.cellRenderers.update({
       'column-header': this._columnHeaderRenderer,
     });
-    // Treating corner header as column header for rendering purposes
+    // Treating corner-header as column-header if a value has not
+    // been passed for the former.
+    let hasCornerRenderer = false;
+    if (this.backboneModel) {
+      hasCornerRenderer = this.backboneModel.get('corner_renderer') !== null;
+    }
+
     this.grid.cellRenderers.update({
-      'corner-header': this._columnHeaderRenderer,
+      'corner-header': hasCornerRenderer
+        ? this._cornerHeaderRenderer
+        : this._columnHeaderRenderer,
     });
   }
 
@@ -1027,6 +1080,7 @@ export class FeatherGrid extends Widget {
   private _renderers: Dict<CellRenderer> = {};
   private _defaultRenderer: CellRenderer;
   private _columnHeaderRenderer: CellRenderer;
+  private _cornerHeaderRenderer: CellRenderer;
   private _rowHeaderRenderer: CellRenderer;
   private _defaultRendererSet = false;
   private _cellClicked = new Signal<this, FeatherGrid.ICellClickedEvent>(this);