Skip to content

Commit

Permalink
DataGrid: Implement fixed columns with sticky position (#27896)
Browse files Browse the repository at this point in the history
Co-authored-by: Alyar <>
  • Loading branch information
Alyar666 authored and Alyar committed Aug 25, 2024
1 parent 26330cb commit 7e8384f
Show file tree
Hide file tree
Showing 323 changed files with 498 additions and 109 deletions.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
160 changes: 160 additions & 0 deletions e2e/testcafe-devextreme/tests/dataGrid/stickyColumns/stickyColumns.ts
Original file line number Diff line number Diff line change
Expand Up @@ -160,5 +160,165 @@ borderConfigs.forEach(({ showRowLines, showColumnLines, showBorders }) => {
columns[8].fixedPosition = 'right';
},
}));

safeSizeTest(`Sticky columns with left, right and sticky positions (showRowLines = ${showRowLines}, showColumnLines = ${showColumnLines}, showBorders = ${showBorders})`, async (t) => {
// arrange
const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
const { takeScreenshot, compareResults } = createScreenshotsComparer(t);

await takeScreenshot(`left-right-sticky-positions-1(rLines_=_${showRowLines}_cLines_=_${showColumnLines}_borders_=_${showBorders}_rtl_=_${rtlEnabled}_rowAlt_=_${rowAlternationEnabled}).png`, dataGrid.element);

// act
await dataGrid.scrollTo(t, { x: rtlEnabled ? 0 : 10000 });

await takeScreenshot(`left-right-sticky-positions-2(rLines_=_${showRowLines}_cLines_=_${showColumnLines}_borders_=_${showBorders}_rtl_=_${rtlEnabled}_rowAlt_=_${rowAlternationEnabled}).png`, dataGrid.element);

await t
.expect(compareResults.isValid())
.ok(compareResults.errorMessages());
}, [1000, 800]).before(async () => createWidget('dxDataGrid', {
dataSource: getData(5, 25),
showRowLines,
showColumnLines,
showBorders,
rtlEnabled,
rowAlternationEnabled,
columnAutoWidth: true,
customizeColumns: (columns) => {
columns[2].fixed = true;
columns[2].fixedPosition = 'left';
columns[3].fixed = true;
columns[3].fixedPosition = 'left';
columns[7].fixed = true;
columns[7].fixedPosition = 'sticky';
columns[8].fixed = true;
columns[8].fixedPosition = 'sticky';
columns[9].fixed = true;
columns[9].fixedPosition = 'sticky';
columns[12].fixed = true;
columns[12].fixedPosition = 'sticky';
columns[15].fixed = true;
columns[15].fixedPosition = 'right';
columns[16].fixed = true;
columns[16].fixedPosition = 'right';
},
}));

safeSizeTest(`Sticky columns with sticky position (showRowLines = ${showRowLines}, showColumnLines = ${showColumnLines}, showBorders = ${showBorders})`, async (t) => {
// arrange
const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
const { takeScreenshot, compareResults } = createScreenshotsComparer(t);

await takeScreenshot(`sticky-position-1-(case-1)(rLines_=_${showRowLines}_cLines_=_${showColumnLines}_borders_=_${showBorders}_rtl_=_${rtlEnabled}_rowAlt_=_${rowAlternationEnabled}).png`, dataGrid.element);

// act
await dataGrid.scrollTo(t, { x: rtlEnabled ? 0 : 10000 });

await takeScreenshot(`sticky-position-2-(case-1)(rLines_=_${showRowLines}_cLines_=_${showColumnLines}_borders_=_${showBorders}_rtl_=_${rtlEnabled}_rowAlt_=_${rowAlternationEnabled}).png`, dataGrid.element);

await t
.expect(compareResults.isValid())
.ok(compareResults.errorMessages());
}, [1000, 800]).before(async () => createWidget('dxDataGrid', {
dataSource: getData(5, 25),
showRowLines,
showColumnLines,
showBorders,
rtlEnabled,
rowAlternationEnabled,
columnAutoWidth: true,
customizeColumns: (columns) => {
columns[7].fixed = true;
columns[7].fixedPosition = 'sticky';
columns[8].fixed = true;
columns[8].fixedPosition = 'sticky';
columns[9].fixed = true;
columns[9].fixedPosition = 'sticky';
columns[12].fixed = true;
columns[12].fixedPosition = 'sticky';
},
}));

safeSizeTest(`Sticky columns with sticky position when first and last cells are sticky (showRowLines = ${showRowLines}, showColumnLines = ${showColumnLines}, showBorders = ${showBorders})`, async (t) => {
// arrange
const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
const { takeScreenshot, compareResults } = createScreenshotsComparer(t);

await takeScreenshot(`sticky-position-1-(case-2)(rLines_=_${showRowLines}_cLines_=_${showColumnLines}_borders_=_${showBorders}_rtl_=_${rtlEnabled}_rowAlt_=_${rowAlternationEnabled}).png`, dataGrid.element);

// act
await dataGrid.scrollTo(t, { x: rtlEnabled ? 0 : 10000 });

await takeScreenshot(`sticky-position-2-(case-2)(rLines_=_${showRowLines}_cLines_=_${showColumnLines}_borders_=_${showBorders}_rtl_=_${rtlEnabled}_rowAlt_=_${rowAlternationEnabled}).png`, dataGrid.element);

await t
.expect(compareResults.isValid())
.ok(compareResults.errorMessages());
}, [1000, 800]).before(async () => createWidget('dxDataGrid', {
dataSource: getData(5, 25),
showRowLines,
showColumnLines,
showBorders,
rtlEnabled,
rowAlternationEnabled,
columnAutoWidth: true,
customizeColumns: (columns) => {
columns[0].fixed = true;
columns[0].fixedPosition = 'sticky';
columns[1].fixed = true;
columns[1].fixedPosition = 'sticky';
columns[7].fixed = true;
columns[7].fixedPosition = 'sticky';
columns[8].fixed = true;
columns[8].fixedPosition = 'sticky';
columns[9].fixed = true;
columns[9].fixedPosition = 'sticky';
columns[columns.length - 2].fixed = true;
columns[columns.length - 2].fixedPosition = 'sticky';
columns[columns.length - 1].fixed = true;
columns[columns.length - 1].fixedPosition = 'sticky';
},
}));

safeSizeTest(`Sticky columns with sticky position when first and last cells are fixed on left and right respectively (showRowLines = ${showRowLines}, showColumnLines = ${showColumnLines}, showBorders = ${showBorders})`, async (t) => {
// arrange
const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
const { takeScreenshot, compareResults } = createScreenshotsComparer(t);

await takeScreenshot(`sticky-position-1-(case-3)(rLines_=_${showRowLines}_cLines_=_${showColumnLines}_borders_=_${showBorders}_rtl_=_${rtlEnabled}_rowAlt_=_${rowAlternationEnabled}).png`, dataGrid.element);

// act
await dataGrid.scrollTo(t, { x: rtlEnabled ? 0 : 10000 });

await takeScreenshot(`sticky-position-2-(case-3)(rLines_=_${showRowLines}_cLines_=_${showColumnLines}_borders_=_${showBorders}_rtl_=_${rtlEnabled}_rowAlt_=_${rowAlternationEnabled}).png`, dataGrid.element);

await t
.expect(compareResults.isValid())
.ok(compareResults.errorMessages());
}, [1000, 800]).before(async () => createWidget('dxDataGrid', {
dataSource: getData(5, 25),
showRowLines,
showColumnLines,
showBorders,
rtlEnabled,
rowAlternationEnabled,
columnAutoWidth: true,
customizeColumns: (columns) => {
columns[0].fixed = true;
columns[0].fixedPosition = 'left';
columns[1].fixed = true;
columns[1].fixedPosition = 'sticky';
columns[7].fixed = true;
columns[7].fixedPosition = 'sticky';
columns[8].fixed = true;
columns[8].fixedPosition = 'sticky';
columns[9].fixed = true;
columns[9].fixedPosition = 'sticky';
columns[columns.length - 2].fixed = true;
columns[columns.length - 2].fixedPosition = 'sticky';
columns[columns.length - 1].fixed = true;
columns[columns.length - 1].fixedPosition = 'right';
},
}));
});
});
1 change: 1 addition & 0 deletions packages/devextreme-angular/src/common/grids/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ export {
FilterRow,
FilterRowOperationDescriptions,
FilterType,
FixedPosition,
GridBase,
GridBaseOptions,
GridsEditMode,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@ import {
Component,
} from '@angular/core';

import { AsyncRule, CompareRule, CustomRule, DataType, EmailRule, HorizontalAlignment, HorizontalEdge, NumericRule, PatternRule, RangeRule, RequiredRule, SearchMode, SortOrder, StringLengthRule } from 'devextreme/common';
import { ColumnHeaderFilterSearchConfig, FilterOperation, FilterType, HeaderFilterGroupInterval, SelectedFilterOperation } from 'devextreme/common/grids';
import { AsyncRule, CompareRule, CustomRule, DataType, EmailRule, HorizontalAlignment, NumericRule, PatternRule, RangeRule, RequiredRule, SearchMode, SortOrder, StringLengthRule } from 'devextreme/common';
import { ColumnHeaderFilterSearchConfig, FilterOperation, FilterType, FixedPosition, HeaderFilterGroupInterval, SelectedFilterOperation } from 'devextreme/common/grids';
import { Store } from 'devextreme/data';
import { Options as DataSourceOptions } from 'devextreme/data/data_source';
import { Format } from 'devextreme/localization';
Expand Down Expand Up @@ -263,10 +263,10 @@ export abstract class DxiDataGridColumn extends CollectionNestedOption {
this._setOption('fixed', value);
}

get fixedPosition(): HorizontalEdge | undefined {
get fixedPosition(): FixedPosition | undefined {
return this._getOption('fixedPosition');
}
set fixedPosition(value: HorizontalEdge | undefined) {
set fixedPosition(value: FixedPosition | undefined) {
this._setOption('fixedPosition', value);
}

Expand Down
1 change: 1 addition & 0 deletions packages/devextreme-react/src/common/grids.ts
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ export {
FilterRow,
FilterRowOperationDescriptions,
FilterType,
FixedPosition,
GridBase,
GridBaseOptions,
GridsEditMode,
Expand Down
2 changes: 1 addition & 1 deletion packages/devextreme-react/src/data-grid.ts
Original file line number Diff line number Diff line change
Expand Up @@ -405,7 +405,7 @@ type IColumnProps = React.PropsWithChildren<{
filterValue?: any;
filterValues?: Array<any>;
fixed?: boolean;
fixedPosition?: "left" | "right";
fixedPosition?: "left" | "right" | "sticky";
format?: LocalizationTypes.Format;
formItem?: dxFormSimpleItem;
groupCellTemplate?: ((cellElement: any, cellInfo: { column: dxDataGridColumn, columnIndex: number, component: dxDataGrid, data: Record<string, any>, displayValue: any, groupContinuedMessage: string, groupContinuesMessage: string, row: dxDataGridRowObject, rowIndex: number, summaryItems: Array<any>, text: string, value: any }) => any) | template;
Expand Down
2 changes: 1 addition & 1 deletion packages/devextreme-react/src/tree-list.ts
Original file line number Diff line number Diff line change
Expand Up @@ -373,7 +373,7 @@ type IColumnProps = React.PropsWithChildren<{
filterValue?: any;
filterValues?: Array<any>;
fixed?: boolean;
fixedPosition?: "left" | "right";
fixedPosition?: "left" | "right" | "sticky";
format?: LocalizationTypes.Format;
formItem?: dxFormSimpleItem;
headerCellTemplate?: ((columnHeader: any, headerInfo: { column: dxTreeListColumn, columnIndex: number, component: dxTreeList }) => any) | template;
Expand Down
2 changes: 1 addition & 1 deletion packages/devextreme-scss/scss/widgets/base/_gridBase.scss
Original file line number Diff line number Diff line change
Expand Up @@ -195,7 +195,7 @@
padding: 0;
}

.dx-#{$widget-name}-left-sticky-column, .dx-#{$widget-name}-right-sticky-column {
.dx-#{$widget-name}-sticky-column, .dx-#{$widget-name}-left-sticky-column, .dx-#{$widget-name}-right-sticky-column {
position: sticky;
}
}
Expand Down
50 changes: 49 additions & 1 deletion packages/devextreme-scss/scss/widgets/base/dataGrid/_index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -243,9 +243,22 @@ $datagrid-text-stub-background-image-path: null !default;
.dx-datagrid-table .dx-row .dx-datagrid-first-right-sticky-column {
border-left: 2px solid $datagrid-border-color;
}

.dx-datagrid-table .dx-row .dx-datagrid-sticky-column {
border-left: 2px solid $datagrid-border-color;
border-right: 2px solid $datagrid-border-color;

&:first-child, & + td {
border-left: none;
}

&:last-child {
border-right: none;
}
}
}

.dx-datagrid-left-sticky-column, .dx-datagrid-right-sticky-column {
.dx-datagrid-sticky-column, .dx-datagrid-left-sticky-column, .dx-datagrid-right-sticky-column {
background-color: $datagrid-base-background-color;
}
}
Expand Down Expand Up @@ -336,6 +349,41 @@ $datagrid-text-stub-background-image-path: null !default;
border-left: none;
}
}

.dx-datagrid-sticky-columns {
.dx-column-lines > td {
border-left: none;
border-right: $datagrid-border;

&:first-child {
border-right: none;
}
}

.dx-datagrid-table .dx-row {
.dx-datagrid-sticky-column + td {
border-right: none;

&.dx-datagrid-sticky-column {
border-left: 2px solid $datagrid-border-color;
}
}

.dx-datagrid-sticky-column:first-child {
border-right: none;
border-left: 2px solid $datagrid-border-color;
}

.dx-datagrid-sticky-column:last-child {
border-left: none;
border-right: 2px solid $datagrid-border-color;
}

.dx-datagrid-first-right-sticky-column + td {
border-right: none;
}
}
}
}

.dx-datagrid-form-buttons-container {
Expand Down
52 changes: 50 additions & 2 deletions packages/devextreme-scss/scss/widgets/base/treeList/_index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -85,17 +85,30 @@ $treelist-row-error-color: $datagrid-row-error-color;
.dx-treelist-table .dx-row .dx-treelist-last-left-sticky-column {
border-right: 2px solid $treelist-border-color;

& + td {
& + td:not(.dx-treelist-left-sticky-column) {
border-left: none;
}
}

.dx-treelist-table .dx-row .dx-treelist-first-right-sticky-column {
border-left: 2px solid $treelist-border-color;
}

.dx-treelist-table .dx-row .dx-treelist-sticky-column {
border-left: 2px solid $treelist-border-color;
border-right: 2px solid $treelist-border-color;

&:first-child, & + td {
border-left: none;
}

&:last-child {
border-right: none;
}
}
}

.dx-treelist-left-sticky-column, .dx-treelist-right-sticky-column {
.dx-treelist-sticky-column, .dx-treelist-left-sticky-column, .dx-treelist-right-sticky-column {
background-color: $treelist-base-background-color;
}
}
Expand Down Expand Up @@ -307,6 +320,41 @@ $treelist-row-error-color: $datagrid-row-error-color;
border-left: none;
}
}

.dx-treelist-sticky-columns {
.dx-column-lines > td {
border-left: none;
border-right: $treelist-border;

&:first-child {
border-right: none;
}
}

.dx-treelist-table .dx-row {
.dx-treelist-sticky-column + td {
border-right: none;

&.dx-treelist-sticky-column {
border-left: 2px solid $treelist-border-color;
}
}

.dx-treelist-sticky-column:first-child {
border-right: none;
border-left: 2px solid $treelist-border-color;
}

.dx-treelist-sticky-column:last-child {
border-left: none;
border-right: 2px solid $treelist-border-color;
}

.dx-treelist-first-right-sticky-column + td {
border-right: none;
}
}
}
}

.dx-treelist-container {
Expand Down
1 change: 1 addition & 0 deletions packages/devextreme-vue/src/common/grids.ts
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ export {
FilterRow,
FilterRowOperationDescriptions,
FilterType,
FixedPosition,
GridBase,
GridBaseOptions,
GridsEditMode,
Expand Down
Loading

0 comments on commit 7e8384f

Please sign in to comment.