Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Data Grid][core] fix: Entering in edit mode, reload column configuration #12429 #13165

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

[Data Grid][core] fix: Entering in edit mode, reload column configuration #12429 #13165

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
4e0aec3
[core] fix column order when columns change
May 17, 2024
18dad59
[core] fix column dimension reset on re-render columns
May 17, 2024
fc54a8b
[core] fix updateColumns calls with dimensions properties
May 17, 2024
afc0a85
[core] fix order of new columns when calling updateColumns
May 17, 2024
4fa471a
[core] fix remove column pinning position of desired order
May 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 51 additions & 3 deletions packages/x-data-grid/src/hooks/features/columns/gridColumnsUtils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,12 +24,19 @@ import { gridHeaderFilteringEnabledSelector } from '../headerFiltering/gridHeade
import { gridColumnGroupsHeaderMaxDepthSelector } from '../columnGrouping/gridColumnGroupsSelector';
import type { GridDimensions } from '../dimensions/gridDimensionsApi';

type ArrayElement<ArrayType extends readonly unknown[]> =
ArrayType extends readonly (infer ElementType)[] ? ElementType : never;

export const COLUMNS_DIMENSION_PROPERTIES = ['maxWidth', 'minWidth', 'width', 'flex'] as const;

export type GridColumnDimensionProperties = (typeof COLUMNS_DIMENSION_PROPERTIES)[number];

const COLUMN_TYPES = getGridDefaultColumnTypes();

const columnDimensionProperties = (column: GridColDef): Partial<Pick<GridColDef, ArrayElement<typeof COLUMNS_DIMENSION_PROPERTIES>>> => COLUMNS_DIMENSION_PROPERTIES.reduce((columnDimensionPros, dimensionKey) => dimensionKey in column ?
Object.assign(columnDimensionPros, { [dimensionKey]: column[dimensionKey] })
: columnDimensionPros, {})

/**
* Computes width for flex columns.
* Based on CSS Flexbox specification:
Expand Down Expand Up @@ -258,9 +265,9 @@ export const applyInitialState = (
cleanOrderedFields.length === 0
? columnsState.orderedFields
: [
...cleanOrderedFields,
...columnsState.orderedFields.filter((field) => !orderedFieldsLookup[field]),
];
...cleanOrderedFields,
...columnsState.orderedFields.filter((field) => !orderedFieldsLookup[field]),
];

const newColumnLookup: GridColumnRawLookup = { ...columnsState.lookup };
for (let i = 0; i < columnsWithUpdatedDimensions.length; i += 1) {
Expand Down Expand Up @@ -310,9 +317,12 @@ export const createColumnsState = ({
}) => {
const isInsideStateInitializer = !apiRef.current.state.columns;


let columnsState: Omit<GridColumnsRawState, 'lookup'> & {
lookup: { [field: string]: Omit<GridStateColDef, 'computedWidth'> };
desiredOrderedFields?: string[];
};

if (isInsideStateInitializer) {
columnsState = {
orderedFields: [],
Expand All @@ -321,10 +331,18 @@ export const createColumnsState = ({
};
} else {
const currentState = gridColumnsStateSelector(apiRef.current.state);

const pinnedColumns = apiRef.current.state.pinnedColumns;
// Remove pinned columns
const desiredOrderedFields = currentState.orderedFields.filter(field => {
return !(pinnedColumns.left?.includes(field) || pinnedColumns.right?.includes(field))
});

columnsState = {
orderedFields: keepOnlyColumnsToUpsert ? [] : [...currentState.orderedFields],
lookup: { ...currentState.lookup }, // Will be cleaned later if keepOnlyColumnsToUpsert=true
columnVisibilityModel,
desiredOrderedFields, // Will be cleaned later
};
}

Expand Down Expand Up @@ -373,13 +391,43 @@ export const createColumnsState = ({
}
});

// Do not override column dimension properties on re-render if not desired
const previousDimensions = columnsState.lookup[field]
? columnDimensionProperties(columnsState.lookup[field])
: {};

// check if new dimensions are specified
const newDimensions = {
...previousDimensions,
...columnDimensionProperties(newColumn),
}


columnsState.lookup[field] = {
...existingState,
...newColumn,
...newDimensions,
hasBeenResized,
};
});

if (columnsState.desiredOrderedFields) {
columnsState.orderedFields.sort((fieldA, fieldB) => {
const indexA = columnsState.desiredOrderedFields!.indexOf(fieldA);
const indexB = columnsState.desiredOrderedFields!.indexOf(fieldB);
if (indexA === -1 && indexB !== -1) {
return 1;
}
if (indexB === -1 && indexA !== -1) {
return -1;
}

return indexA - indexB
});

delete columnsState.desiredOrderedFields;
}

if (keepOnlyColumnsToUpsert && !isInsideStateInitializer) {
Object.keys(columnsState.lookup).forEach((field) => {
if (!columnsToKeep![field]) {
Expand Down