Refactor/merge css grids

projects/ngx-datatable/src/lib/components/body/body-group-wrapper.component.scss

@@ -1,9 +1,11 @@
 :host {
-  display: flex;
-  flex-direction: column;
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-column: 1 / -1;
 }
 
 .datatable-group-header {
+  grid-column: 1 / -1;
   inset-inline-start: 0;
   position: sticky;
 }

projects/ngx-datatable/src/lib/components/body/body-row-def.component.scss

@@ -0,0 +1,5 @@
+:host {
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-column: 1 / -1;
+}

projects/ngx-datatable/src/lib/components/body/body-row-def.component.ts

@@ -2,13 +2,16 @@ import { NgTemplateOutlet } from '@angular/common';
 import {
   Component,
   Directive,
+  effect,
+  ElementRef,
   inject,
   InjectionToken,
   Injector,
   OnInit,
   TemplateRef,
   ViewContainerRef,
-  input
+  input,
+  booleanAttribute
 } from '@angular/core';
 
 import { RowOrGroup } from '../../types/public.types';
@@ -26,14 +29,47 @@ import { RowOrGroup } from '../../types/public.types';
       [ngTemplateOutlet]="rowDef.rowDefInternal().rowTemplate"
       [ngTemplateOutletContext]="rowContext"
     />
-  }`
+  }`,
+  styleUrl: './body-row-def.component.scss'
 })
 export class DatatableRowDefComponent {
+  private host = inject<ElementRef<HTMLElement>>(ElementRef).nativeElement;
   rowDef = inject(ROW_DEF_TOKEN);
   rowContext = {
     ...this.rowDef.rowDefInternal(),
     disabled: this.rowDef.rowDefInternalDisabled()
   };
+
+  /**
+   * When `true`, clones of this row get the measured column widths stamped onto them.
+   * The clone is detached from the table grid, it has no parent tracks to inherit.
+   */
+  readonly preserveColumnWidthsOnClone = input(false, { transform: booleanAttribute });
+
+  constructor() {
+    effect(onCleanup => {
+      if (!this.preserveColumnWidthsOnClone()) {
+        return;
+      }
+      const originalCloneNode = this.host.cloneNode;
+      this.host.cloneNode = (deep?: boolean) => {
+        const clone = originalCloneNode.call(this.host, deep) as HTMLElement;
+        const gridTemplateColumns = this.measureGridTemplateColumns();
+        if (gridTemplateColumns) {
+          clone.style.gridTemplateColumns = gridTemplateColumns;
+        }
+        return clone;
+      };
+      onCleanup(() => (this.host.cloneNode = originalCloneNode));
+    });
+  }
+
+  private measureGridTemplateColumns(): string {
+    const cells = this.host.querySelectorAll<HTMLElement>('datatable-body-cell');
+    return Array.from(cells)
+      .map(cell => `${cell.getBoundingClientRect().width}px`)
+      .join(' ');
+  }
 }
 
 @Directive({

projects/ngx-datatable/src/lib/components/body/body-row-wrapper.component.scss

@@ -1,8 +1,10 @@
 :host {
-  display: flex;
-  flex-direction: column;
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-column: 1 / -1;
 }
 
 .datatable-row-detail {
+  grid-column: 1 / -1;
   overflow-y: hidden;
 }

projects/ngx-datatable/src/lib/components/body/body-row.component.scss

@@ -2,7 +2,8 @@
 
 :host {
   display: grid;
-  grid-template-columns: var(--ngx-datatable-grid-template-columns);
+  grid-template-columns: subgrid;
+  grid-column: 1 / -1;
   grid-template-rows: minmax(0, 1fr);
   outline: none;
 

projects/ngx-datatable/src/lib/components/body/body-row.component.spec.ts

@@ -12,7 +12,7 @@ describe('DataTableBodyRowComponent', () => {
   @Component({
     imports: [DataTableBodyRowComponent],
     template: `
-      <div [style.--ngx-datatable-grid-template-columns]="gridTemplate()">
+      <div style="display: grid" [style.grid-template-columns]="gridTemplate()">
         <datatable-body-row
           ariaRowCheckboxMessage=""
           [cssClasses]="{}"

projects/ngx-datatable/src/lib/components/body/body.component.scss

@@ -1,19 +1,30 @@
 :host {
   position: relative;
   z-index: 10;
-  display: block;
-  grid-area: body;
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-column: 1 / -1;
+  grid-row: 2;
   min-block-size: 0;
 }
 
-datatable-scroller {
-  display: block;
+datatable-scroller,
+.datatable-row-render-wrapper {
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-column: 1 / -1;
+  align-content: start;
 
   :host-context(ngx-datatable.fixed-row) & {
     white-space: nowrap;
   }
 }
 
+.custom-loading-indicator-wrapper,
+ghost-loader {
+  grid-column: 1 / -1;
+}
+
 [hidden] {
   display: none !important; // stylelint-disable-line declaration-no-important
 }

projects/ngx-datatable/src/lib/components/body/body.component.ts

@@ -158,7 +158,7 @@ import { DataTableSummaryRowComponent } from './summary/summary-row.component';
           </datatable-row-wrapper>
         </ng-template>
 
-        <div [style.transform]="renderOffset()">
+        <div class="datatable-row-render-wrapper" [style.transform]="renderOffset()">
           @for (group of rowsToRender(); track rowTrackingFn(i, group); let i = $index) {
             @if (!group && ghostLoadingIndicator()) {
               <ghost-loader [columns]="columns" [pageSize]="1" [rowHeight]="rowHeight()" />

projects/ngx-datatable/src/lib/components/body/summary/summary-row.component.scss

@@ -1,7 +1,15 @@
 :host {
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-column: 1 / -1;
+
   &.sticky {
     position: sticky;
     inset-block-start: 0;
     z-index: 2;
   }
 }
+
+.datatable-body-row {
+  grid-column: 1 / -1;
+}

projects/ngx-datatable/src/lib/components/datatable.component.html

@@ -87,7 +87,7 @@
         <datatable-progress />
       </ng-content>
       <ng-content select="[empty-content]" ngProjectAs="[empty-content]">
-        <div role="row">
+        <div role="row" class="datatable-empty-row">
           <div
             role="cell"
             class="empty-row"

projects/ngx-datatable/src/lib/components/datatable.component.scss

@@ -14,11 +14,8 @@
 
 .datatable-grid {
   display: grid;
-  grid-template-columns: auto;
+  grid-template-columns: var(--ngx-datatable-grid-template-columns, auto);
   grid-template-rows: auto 1fr;
-  grid-template-areas:
-    'header'
-    'body';
   position: relative;
   max-inline-size: 100%;
   min-block-size: 0;
@@ -33,3 +30,7 @@
   overflow-y: auto;
   flex: 1 1 0;
 }
+
+.datatable-empty-row {
+  grid-column: 1 / -1;
+}

projects/ngx-datatable/src/lib/components/header/header.component.scss

@@ -1,16 +1,19 @@
 @use '../shared';
 
 :host {
-  display: block;
-  grid-area: header;
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-column: 1 / -1;
+  grid-row: 1;
   position: sticky;
   inset-block-start: 0;
   z-index: 11;
 }
 
 .datatable-header-inner {
   display: grid;
-  grid-template-columns: var(--ngx-datatable-grid-template-columns);
+  grid-template-columns: subgrid;
+  grid-column: 1 / -1;
 
   :host-context(ngx-datatable.fixed-header) & {
     white-space: nowrap;

projects/ngx-datatable/src/lib/components/header/header.component.spec.ts

@@ -16,9 +16,8 @@ describe('DataTableHeaderComponent', () => {
 
   const applyMockGridTemplate = (): void => {
     fixture.nativeElement.style.width = 'max-content';
-    fixture.nativeElement.style.setProperty(
-      '--ngx-datatable-grid-template-columns',
-      gridColumnTemplate(columnsByPinArr(componentRef.instance.columns()))
+    fixture.nativeElement.style.gridTemplateColumns = gridColumnTemplate(
+      columnsByPinArr(componentRef.instance.columns())
     );
   };
 

src/app/drag-drop/drag-drop.component.ts

@@ -45,7 +45,11 @@ import { DataService } from '../data.service';
         (cdkDropListDropped)="drop($event)"
       >
         <ng-template rowDef>
-          <datatable-row-def cdkDrag cdkDragPreviewContainer="parent" />
+          <datatable-row-def
+            cdkDrag
+            cdkDragPreviewContainer="parent"
+            [preserveColumnWidthsOnClone]="true"
+          />
         </ng-template>
       </ngx-datatable>
     </div>