diff --git a/lib/core/src/lib/datatable/components/datatable/datatable.component.scss b/lib/core/src/lib/datatable/components/datatable/datatable.component.scss
index c34c554ab5..4870d11779 100644
--- a/lib/core/src/lib/datatable/components/datatable/datatable.component.scss
+++ b/lib/core/src/lib/datatable/components/datatable/datatable.component.scss
@@ -382,17 +382,6 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
min-height: inherit;
}
- .adf-datatable-header, .adf-datatable-body {
- .adf-datatable-cell-data {
- flex-grow: 0;
- flex-shrink: 1;
-
- &:not(:has(~ .adf-datatable-cell-data)) {
- flex-grow: 1;
- }
- }
- }
-
/* stylelint-disable-next-line no-duplicate-selectors */
.adf-datatable-cell,
.adf-datatable-cell-header {
diff --git a/lib/core/src/lib/datatable/components/datatable/datatable.component.spec.ts b/lib/core/src/lib/datatable/components/datatable/datatable.component.spec.ts
index 84a73a5b05..099fb08890 100644
--- a/lib/core/src/lib/datatable/components/datatable/datatable.component.spec.ts
+++ b/lib/core/src/lib/datatable/components/datatable/datatable.component.spec.ts
@@ -1738,20 +1738,20 @@ describe('Column Resizing', () => {
});
});
- it('should display resize handle for each column, but not for the last one, by default', () => {
+ it('should display resize handle for each column by default', () => {
dataTable.isResizingEnabled = true;
fixture.detectChanges();
- expect(getResizeHandlersCount()).toBe(1);
+ expect(getResizeHandlersCount()).toBe(2);
});
- it('should NOT display resize handle for the column when the column has resizable param set to false and column is not the last one', () => {
+ it('should NOT display resize handle for the column when the column has resizable param set to false', () => {
dataTable.isResizingEnabled = true;
dataTableSchema[0].resizable = false;
dataTable.data = new ObjectDataTableAdapter([...data], [...dataTableSchema]);
fixture.detectChanges();
- expect(getResizeHandlersCount()).toBe(0);
+ expect(getResizeHandlersCount()).toBe(1);
});
it('should display resize handle when the feature is Enabled [isResizingEnabled=true]', () => {
@@ -1885,7 +1885,7 @@ describe('Column Resizing', () => {
fixture.detectChanges();
const headerColumns: HTMLElement[] = fixture.debugElement.nativeElement.querySelectorAll('.adf-datatable-cell-header');
- expect(headerColumns[0].style.flexBasis).toBe('125px');
+ expect(headerColumns[0].style.flex).toBe('0 1 125px');
}));
it('should set the column header to 100px on resizing when its width goes below 100', fakeAsync(() => {
@@ -1894,7 +1894,7 @@ describe('Column Resizing', () => {
fixture.detectChanges();
const headerColumns: HTMLElement[] = fixture.debugElement.nativeElement.querySelectorAll('.adf-datatable-cell-header');
- expect(headerColumns[0].style.flexBasis).toBe('100px');
+ expect(headerColumns[0].style.flex).toBe('0 1 100px');
}));
it('should set the style of all the table cells under the resizing header on resizing', fakeAsync(() => {
@@ -1906,8 +1906,8 @@ describe('Column Resizing', () => {
const firstCell: HTMLElement = tableBody.querySelector('[data-automation-id="name1"]');
const secondCell: HTMLElement = tableBody.querySelector('[data-automation-id="name2"]');
- expect(firstCell.style.flexBasis).toBe('130px');
- expect(secondCell.style.flexBasis).toBe('130px');
+ expect(firstCell.style.flex).toBe('0 1 130px');
+ expect(secondCell.style.flex).toBe('0 1 130px');
}));
it('should set the style of all the table cells under the resizing header to 100px on resizing when its width goes below 100', fakeAsync(() => {
@@ -1919,8 +1919,8 @@ describe('Column Resizing', () => {
const firstCell: HTMLElement = tableBody.querySelector('[data-automation-id="name1"]');
const secondCell: HTMLElement = tableBody.querySelector('[data-automation-id="name2"]');
- expect(firstCell.style.flexBasis).toBe('100px');
- expect(secondCell.style.flexBasis).toBe('100px');
+ expect(firstCell.style.flex).toBe('0 1 100px');
+ expect(secondCell.style.flex).toBe('0 1 100px');
}));
it('should unblur the body and set the resizing to false upon resizing ends', () => {
diff --git a/lib/core/src/lib/datatable/components/datatable/datatable.component.ts b/lib/core/src/lib/datatable/components/datatable/datatable.component.ts
index cb59a0ac50..c0a520485b 100644
--- a/lib/core/src/lib/datatable/components/datatable/datatable.component.ts
+++ b/lib/core/src/lib/datatable/components/datatable/datatable.component.ts
@@ -971,8 +971,8 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges,
this.updateColumnsWidths();
}
- getFlexBasisValue({ width = 0 }: DataColumn): string {
- return `${width < DataTableComponent.MINIMUM_COLUMN_SIZE ? DataTableComponent.MINIMUM_COLUMN_SIZE : width}px`;
+ getFlexValue({ width = 0 }: DataColumn): string {
+ return `0 1 ${width < DataTableComponent.MINIMUM_COLUMN_SIZE ? DataTableComponent.MINIMUM_COLUMN_SIZE : width}px`;
}
filterDisabledColumns(index: number, _drag: CdkDrag, drop: CdkDropList): boolean {