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 index 84978e17e..2ff3a9181 100644 --- 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 index 919ee17cc..c38fd8be7 100644 --- 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 { 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);