fix(ngrid): column header sticky rows index is wrong

shlomiassaf · Dec 4, 2020 · c122e9d · c122e9d
1 parent c15e52d
commit c122e9d
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 5 deletions.
diff --git a/apps/ngrid-docs-app/content/demos/complex-demo1/complex-demo1.component.ts b/apps/ngrid-docs-app/content/demos/complex-demo1/complex-demo1.component.ts
@@ -40,7 +40,7 @@ export class ComplexDemo1Example {
   columns = columnFactory()
     .default({ width: '100px', reorder: true, resize: true})
     .table(
-      // { header: { type: 'sticky' } },
+      { header: { type: 'sticky' } },
       { prop: 'drag_and_drop_handle', type: 'drag_and_drop_handle', minWidth: 48, width: '', maxWidth: 48, wontBudge: true },
       { prop: 'selection',  minWidth: 48, width: '', maxWidth: 48, wontBudge: true },
       { prop: 'id', pIndex: true, sort: true, width: '40px', wontBudge: true },
@@ -54,7 +54,7 @@ export class ComplexDemo1Example {
       { prop: 'gender', width: '50px' },
       { prop: 'birthdate', type: 'date' },
       { prop: 'bio' },
-      // { prop: 'settings.avatar', width: '40px' },
+      { prop: 'settings.avatar', width: '40px' },
       { prop: 'settings.background' },
       { prop: 'settings.timezone' },
       { prop: 'settings.emailFrequency', editable: true },
@@ -70,7 +70,7 @@ export class ComplexDemo1Example {
       { id: 'rere123f', label: 'FOOTER2' },
     )
     .headerGroup(
-      // { type: 'row' },
+      { type: 'row' },
       {
         prop: 'name',
         span: 7,
@@ -81,7 +81,7 @@ export class ComplexDemo1Example {
       { id: 'rere123', label: 'HEADER2' },
     )
     .headerGroup(
-      // { type: 'sticky' },
+      { type: 'sticky' },
       {
         prop: 'name',
         span: 3,

diff --git a/libs/ngrid/src/lib/grid/meta-rows/meta-row.service.ts b/libs/ngrid/src/lib/grid/meta-rows/meta-row.service.ts
@@ -74,14 +74,19 @@ export class PblNgridMetaRowService<T = any> {
     const rowDef = metaRow.meta;
     if (rowDef === columnStore.headerColumnDef) {
       if (metaRow.gridWidthRow === true) {
+        // This is a dummy row used to measure width and get width resize notifications
         this.gridWidthRow = { rowDef, el: metaRow.element };
         this.header.all.push(rowDef);
       } else {
-        this.addToSection(this.header, metaRow, columnStore.metaFooterRows.length);
+        // This is the main header column row, it doesn't have an index but we will assign as if it's the last
+        // so other features will be able to sort by physical location
+        this.addToSection(this.header, metaRow, columnStore.metaHeaderRows.length);
       }
     } else if (rowDef === columnStore.footerColumnDef) {
+      // This is the main footer column row
       this.addToSection(this.footer, metaRow, 0);
     } else {
+      // All meta rows
       let index = header.findIndex( h => h.rowDef === rowDef );
       if (index > -1) {
         this.addToSection(this.header, metaRow, index);