feat: support column header in render

revolist · Jul 23, 2024 · ce67ac3 · ce67ac3
1 parent bf3395b
commit ce67ac3
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 10 deletions.
diff --git a/projects/angular-datagrid/src/lib/renderer.ts b/projects/angular-datagrid/src/lib/renderer.ts
@@ -3,7 +3,7 @@
  * Handles the rendering and lifecycle of Angular components within StencilJS using updated Angular APIs.
  */
 import { Injector, ComponentRef, Type, ApplicationRef, createComponent, EnvironmentInjector, inject } from '@angular/core';
-import { ColumnDataSchemaModel } from '@revolist/revogrid';
+import { ColumnDataSchemaModel, ColumnTemplateProp } from '@revolist/revogrid';
 
 export interface AngularElement extends HTMLElement {
   componentRef?: ComponentRef<any>;  // Reference to the Angular component
@@ -73,12 +73,12 @@ export const Template = (
   customProps?: any,
   injector = inject(Injector)
 ) => {
-  return (h: any, p: ColumnDataSchemaModel, addition?: any) => {
+  return (h: any, p: ColumnDataSchemaModel | ColumnTemplateProp, addition?: any) => {
     const props = customProps ? { ...customProps, ...p } : p;
     props.addition = addition;
     let lastEl: RenderedComponent<any> | null = null;
     return h('span', {
-      key: `${p.prop}-${p.rowIndex}`,
+      key: `${p.prop}-${p.rowIndex || 0}`,
       ref: (el: AngularElement | null) => {
         lastEl = TemplateConstructor(el, AngularComponent, props, injector, lastEl);
       }

diff --git a/projects/demo-standalone/src/app/app.component.ts b/projects/demo-standalone/src/app/app.component.ts
@@ -1,19 +1,33 @@
 import { Component } from '@angular/core';
-import { type ColumnRegular, Editor, type Editors, RevoGrid, Template } from 'angular-datagrid';
+import {
+  type ColumnRegular,
+  Editor,
+  type Editors,
+  RevoGrid,
+  Template,
+} from 'angular-datagrid';
 import { CellComponent } from './cell.component';
 import { EditorComponent } from './editor.component';
 
 @Component({
   selector: 'app-root',
   standalone: true,
   imports: [RevoGrid, EditorComponent, CellComponent],
-  template: `<revo-grid style="height: 200px; width: 200px" [filter]="true" [columns]="columns" [source]="source" [editors]="editors"></revo-grid>`
+  template: `<revo-grid
+    style="height: 200px; width: 200px"
+    [filter]="true"
+    [columns]="columns"
+    [source]="source"
+    [editors]="editors"
+  ></revo-grid>`,
 })
 export class AppComponent {
-  source: any[] = [  {
-    name: '1',
-    details: 'Item 1',
-  }];
+  source: any[] = [
+    {
+      name: '1',
+      details: 'Item 1',
+    },
+  ];
   columns: ColumnRegular[] = [];
   editors: Editors = {};
 
@@ -34,6 +48,7 @@ export class AppComponent {
         prop: 'name',
         name: 'First',
         editor: MY_EDITOR,
+        columnTemplate: Template(CellComponent),
         cellTemplate: Template(CellComponent),
       },
       {

diff --git a/projects/demo-standalone/src/app/cell.component.ts b/projects/demo-standalone/src/app/cell.component.ts
@@ -11,6 +11,6 @@ export class CellComponent {
   @Input() props!: ColumnDataSchemaModel;
 
   get value() {
-    return this.props.rowIndex;
+    return this.props.prop;
   }
 }