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 bb32c90ce2..a8d366dc12 100644
--- a/lib/core/src/lib/datatable/components/datatable/datatable.component.scss
+++ b/lib/core/src/lib/datatable/components/datatable/datatable.component.scss
@@ -390,6 +390,17 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
min-width: $data-table-cell-min-width-2;
}
+ .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 {
@@ -404,11 +415,6 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
box-sizing: content-box;
}
- &:last-child {
- padding-right: 15px;
- box-sizing: content-box;
- }
-
.adf-datatable-cell-container {
overflow: hidden;
min-height: inherit;
@@ -436,6 +442,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
.adf-datatable-actions-menu {
margin-left: auto;
justify-content: end;
+ padding-right: 15px;
}
.adf-cell-value {
@@ -626,7 +633,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
.adf-datatable__header--sorted-asc,
.adf-datatable__header--sorted-desc {
color: var(--adf-theme-foreground-text-color);
- padding-right: 0.5rem;
+ padding-right: 0.25rem;
&::after {
@include typo-icon;
@@ -661,10 +668,10 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
align-items: center;
margin: 0 2px;
padding: 0 8px;
- column-gap: 5px;
.adf-datatable-cell-header-drag-icon-placeholder {
- min-width: 15px;
+ padding: 0;
+ margin: 0;
}
&--hovered {
@@ -674,19 +681,15 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
}
.adf-datatable-cell-header-drag-icon {
- position: absolute;
- top: 0;
- bottom: 0;
- right: 10px;
- margin: auto;
- color: #ccc;
+ margin-left: auto;
cursor: move;
- width: 24px;
- height: 24px;
+ margin-right: -0.5rem;
+ padding-left: -0.5rem;
}
.adf-datatable-cell-value {
- padding: 10px 0 !important;
+ padding-top: 10px;
+ padding-bottom: 10px;
line-height: 24px;
word-break: break-word;
}
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 4958d1ea82..84a73a5b05 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
@@ -1524,21 +1524,15 @@ describe('Drag&Drop column header', () => {
fixture.detectChanges();
let dragIcon = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-datatable-cell-header-drag-icon-name"]');
- let dragIconPlaceholder = fixture.debugElement.nativeElement.querySelector(
- '[data-automation-id="adf-datatable-cell-header-drag-icon-placeholder-name"]'
- );
+
expect(dragIcon).toBeTruthy();
- expect(dragIconPlaceholder).toBeTruthy();
headerColumn.dispatchEvent(new MouseEvent('mouseleave'));
fixture.detectChanges();
dragIcon = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-datatable-cell-header-drag-icon-name"]');
- dragIconPlaceholder = fixture.debugElement.nativeElement.querySelector(
- '[data-automation-id="adf-datatable-cell-header-drag-icon-placeholder-name"]'
- );
+
expect(dragIcon).toBeFalsy();
- expect(dragIconPlaceholder).toBeFalsy();
});
it('should not show drag indicator icon, when drag and drop is disabled', () => {
@@ -1549,12 +1543,8 @@ describe('Drag&Drop column header', () => {
fixture.detectChanges();
const dragIcon = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-datatable-cell-header-drag-icon-id"]');
- const dragIconPlaceholder = fixture.debugElement.nativeElement.querySelector(
- '[data-automation-id="adf-datatable-cell-header-drag-icon-placeholder-id"]'
- );
expect(dragIcon).toBeFalsy();
- expect(dragIconPlaceholder).toBeFalsy();
});
it('should emit on change column order', () => {
@@ -1748,20 +1738,20 @@ describe('Column Resizing', () => {
});
});
- it('should display resize handle for each column by default', () => {
+ it('should display resize handle for each column, but not for the last one, by default', () => {
dataTable.isResizingEnabled = true;
fixture.detectChanges();
- expect(getResizeHandlersCount()).toBe(2);
+ expect(getResizeHandlersCount()).toBe(1);
});
- it('should NOT display resize handle for the column when the column has resizable param set to false', () => {
+ 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', () => {
dataTable.isResizingEnabled = true;
dataTableSchema[0].resizable = false;
dataTable.data = new ObjectDataTableAdapter([...data], [...dataTableSchema]);
fixture.detectChanges();
- expect(getResizeHandlersCount()).toBe(1);
+ expect(getResizeHandlersCount()).toBe(0);
});
it('should display resize handle when the feature is Enabled [isResizingEnabled=true]', () => {
@@ -1895,7 +1885,7 @@ describe('Column Resizing', () => {
fixture.detectChanges();
const headerColumns: HTMLElement[] = fixture.debugElement.nativeElement.querySelectorAll('.adf-datatable-cell-header');
- expect(headerColumns[0].style.flex).toBe('0 1 125px');
+ expect(headerColumns[0].style.flexBasis).toBe('125px');
}));
it('should set the column header to 100px on resizing when its width goes below 100', fakeAsync(() => {
@@ -1904,7 +1894,7 @@ describe('Column Resizing', () => {
fixture.detectChanges();
const headerColumns: HTMLElement[] = fixture.debugElement.nativeElement.querySelectorAll('.adf-datatable-cell-header');
- expect(headerColumns[0].style.flex).toBe('0 1 100px');
+ expect(headerColumns[0].style.flexBasis).toBe('100px');
}));
it('should set the style of all the table cells under the resizing header on resizing', fakeAsync(() => {
@@ -1916,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.flex).toBe('0 1 130px');
- expect(secondCell.style.flex).toBe('0 1 130px');
+ expect(firstCell.style.flexBasis).toBe('130px');
+ expect(secondCell.style.flexBasis).toBe('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(() => {
@@ -1929,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.flex).toBe('0 1 100px');
- expect(secondCell.style.flex).toBe('0 1 100px');
+ expect(firstCell.style.flexBasis).toBe('100px');
+ expect(secondCell.style.flexBasis).toBe('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 c0a520485b..cb59a0ac50 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();
}
- getFlexValue({ width = 0 }: DataColumn): string {
- return `0 1 ${width < DataTableComponent.MINIMUM_COLUMN_SIZE ? DataTableComponent.MINIMUM_COLUMN_SIZE : width}px`;
+ getFlexBasisValue({ width = 0 }: DataColumn): string {
+ return `${width < DataTableComponent.MINIMUM_COLUMN_SIZE ? DataTableComponent.MINIMUM_COLUMN_SIZE : width}px`;
}
filterDisabledColumns(index: number, _drag: CdkDrag, drop: CdkDropList): boolean {