From 3ea869f8aaa4aeecb108a7f9e800533b8adf8102 Mon Sep 17 00:00:00 2001 From: Flavien DELANGLE Date: Mon, 14 Mar 2022 10:38:14 +0100 Subject: [PATCH] [DataGrid] Add column order and dimensions to the portable state (#3816) --- .../data-grid/state/RestoreStateApiRef.js | 2 + .../statePersistence.DataGridPro.test.tsx | 223 +++++++++++------- .../features/columns/gridColumnsInterfaces.ts | 7 +- .../features/columns/gridColumnsUtils.ts | 88 ++++++- .../hooks/features/columns/useGridColumns.ts | 84 +++++-- .../src/models/colDef/gridColDef.ts | 4 + .../src/tests/columns.DataGrid.test.tsx | 66 ++++++ .../src/tests/filtering.DataGrid.test.tsx | 2 +- 8 files changed, 362 insertions(+), 114 deletions(-) create mode 100644 packages/grid/x-data-grid/src/tests/columns.DataGrid.test.tsx diff --git a/docs/data/data-grid/state/RestoreStateApiRef.js b/docs/data/data-grid/state/RestoreStateApiRef.js index 1a188703aa3a9..50d44555d6298 100644 --- a/docs/data/data-grid/state/RestoreStateApiRef.js +++ b/docs/data/data-grid/state/RestoreStateApiRef.js @@ -142,6 +142,8 @@ ViewListItem.propTypes = { value: PropTypes.shape({ columns: PropTypes.shape({ columnVisibilityModel: PropTypes.object, + dimensions: PropTypes.object, + orderedFields: PropTypes.arrayOf(PropTypes.string), }), detailPanel: PropTypes.shape({ expandedRowIds: PropTypes.arrayOf( diff --git a/packages/grid/x-data-grid-pro/src/tests/statePersistence.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/statePersistence.DataGridPro.test.tsx index b5b4120042036..888c3041bce14 100644 --- a/packages/grid/x-data-grid-pro/src/tests/statePersistence.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/statePersistence.DataGridPro.test.tsx @@ -3,39 +3,104 @@ import { DataGridPro, DataGridProProps, GridApi, + GridColDef, GridInitialState, GridPreferencePanelsValue, + GridRowsProp, useGridApiRef, } from '@mui/x-data-grid-pro'; // @ts-ignore Remove once the test utils are typed import { createRenderer, screen } from '@mui/monorepo/test/utils'; -import { useMovieData } from '@mui/x-data-grid-generator'; import { expect } from 'chai'; -import { getColumnHeadersTextContent, getColumnValues } from '../../../../../test/utils/helperFn'; +import { + getColumnHeaderCell, + getColumnHeadersTextContent, + getColumnValues, +} from '../../../../../test/utils/helperFn'; const isJSDOM = /jsdom/.test(window.navigator.userAgent); +const rows: GridRowsProp = [ + { id: 0, category1: 'Cat A' }, + { id: 1, category1: 'Cat A' }, + { id: 2, category1: 'Cat A' }, + { id: 3, category1: 'Cat B' }, + { id: 4, category1: 'Cat B' }, + { id: 5, category1: 'Cat B' }, +]; + +const columns: GridColDef[] = [ + { + field: 'id', + type: 'number', + }, + { + field: 'category1', + }, + { + field: 'idBis', + type: 'number', + valueGetter: (params) => params.row.id, + }, +]; + +const FULL_INITIAL_STATE: GridInitialState = { + columns: { + columnVisibilityModel: { category1: false }, + orderedFields: ['id', '__row_group_by_columns_group__', 'idBis', 'category1'], + dimensions: { + idBis: { + width: 75, + maxWidth: Infinity, + minWidth: 50, + flex: undefined, + }, + }, + }, + filter: { + filterModel: { + items: [{ columnField: 'id', operatorValue: '<', value: '5' }], + }, + }, + pagination: { + page: 1, + pageSize: 1, + }, + pinnedColumns: { + left: ['id'], + }, + preferencePanel: { + open: true, + openedPanelValue: GridPreferencePanelsValue.filters, + }, + sorting: { + sortModel: [{ field: 'id', sort: 'desc' }], + }, + rowGrouping: { + model: ['category1'], + }, +}; + describe(' - State Persistence', () => { const { render, clock } = createRenderer({ clock: 'fake' }); let apiRef: React.MutableRefObject; const TestCase = (props: Omit) => { - const data = useMovieData(); - apiRef = useGridApiRef(); return (
- State Persistence', () => { }, }} defaultGroupingExpansionDepth={-1} + groupingColDef={{ headerName: 'Group' }} />
); }; describe('apiRef: exportState', () => { - const FULL_INITIAL_STATE: GridInitialState = { - columns: { - columnVisibilityModel: { year: false }, - }, - filter: { - filterModel: { - items: [{ columnField: 'gross', operatorValue: '>', value: '1500000000' }], - }, - }, - pagination: { - page: 1, - pageSize: 2, - }, - pinnedColumns: { - left: ['company'], - }, - preferencePanel: { - open: true, - openedPanelValue: GridPreferencePanelsValue.filters, - }, - sorting: { - sortModel: [{ field: 'director', sort: 'asc' }], - }, - rowGrouping: { - model: ['director'], - }, - }; - + // We always export the `orderedFields`, + // If it's something problematic we could introduce an `hasBeenReordered` property and only export if at least one column has been reordered. it('should not return the default values of the models', () => { render(); - expect(apiRef.current.exportState()).to.deep.equal({}); + expect(apiRef.current.exportState()).to.deep.equal({ + columns: { + orderedFields: ['id', 'category1', 'idBis'], + }, + }); }); it('should export the initial values of the models', () => { @@ -92,16 +136,18 @@ describe(' - State Persistence', () => { it('should export the current version of the exportable state', () => { render(); - apiRef.current.setPageSize(2); + apiRef.current.setPageSize(1); apiRef.current.setPage(1); - apiRef.current.setPinnedColumns({ left: ['company'] }); + apiRef.current.setPinnedColumns({ left: ['id'] }); apiRef.current.showPreferences(GridPreferencePanelsValue.filters); - apiRef.current.setSortModel([{ field: 'director', sort: 'asc' }]); + apiRef.current.setSortModel([{ field: 'id', sort: 'desc' }]); apiRef.current.setFilterModel({ - items: [{ columnField: 'gross', operatorValue: '>', value: '1500000000' }], + items: [{ columnField: 'id', operatorValue: '<', value: '5' }], }); - apiRef.current.setRowGroupingModel(['director']); - apiRef.current.setColumnVisibilityModel({ year: false }); + apiRef.current.setRowGroupingModel(['category1']); + apiRef.current.setColumnIndex('idBis', 2); + apiRef.current.setColumnWidth('idBis', 75); + apiRef.current.setColumnVisibilityModel({ category1: false }); expect(apiRef.current.exportState()).to.deep.equal(FULL_INITIAL_STATE); }); @@ -111,53 +157,22 @@ describe(' - State Persistence', () => { it('should restore the whole exportable state', () => { render(); - apiRef.current.restoreState({ - columns: { - columnVisibilityModel: { year: false }, - }, - filter: { - filterModel: { - items: [{ columnField: 'gross', operatorValue: '>', value: '1500000000' }], - }, - }, - pagination: { - page: 1, - pageSize: 2, - }, - pinnedColumns: { - left: ['company'], - }, - preferencePanel: { - open: true, - openedPanelValue: GridPreferencePanelsValue.filters, - }, - sorting: { - sortModel: [{ field: 'director', sort: 'asc' }], - }, - rowGrouping: { - model: ['director'], - }, - }); - - // Pagination - expect(getColumnValues(0)).to.deep.equal(['', 'Disney Studios', '', 'Universal Pictures']); + apiRef.current.restoreState(FULL_INITIAL_STATE); - // Sorting and row grouping - expect(getColumnValues(1)).to.deep.equal(['J. J. Abrams (1)', '', 'Colin Trevorrow (1)', '']); + // Pinning sorting and filtering + expect(getColumnValues(0)).to.deep.equal(['', '4', '3']); - // Filtering - expect(getColumnValues(3)).to.deep.equal(['', '2,068,223,624$', '', '1,671,713,208$']); + // Pagination and row grouping + expect(getColumnValues(1)).to.deep.equal(['Cat B (2)', '', '']); // Preference panel expect(screen.getByRole('button', { name: /Add Filter/i })).to.not.equal(null); // Columns visibility - expect(getColumnHeadersTextContent()).to.not.include('Year'); + expect(getColumnHeadersTextContent()).to.deep.equal(['id', 'Group', 'idBis']); - // Pinning - expect( - document.querySelector('.MuiDataGrid-pinnedColumnHeaders--left')?.textContent, - ).to.deep.equal('Company'); + // Columns dimensions + expect(getColumnHeaderCell(2)).toHaveInlineStyle({ width: '75px' }); }); it('should restore partial exportable state', () => { @@ -166,11 +181,11 @@ describe(' - State Persistence', () => { apiRef.current.restoreState({ pagination: { page: 1, - pageSize: 2, + pageSize: 1, }, }); - expect(getColumnValues(0)).to.deep.equal(['Titanic', 'Star Wars: The Force Awakens']); + expect(getColumnValues(0)).to.deep.equal(['1']); }); it('should restore controlled sub-state', () => { @@ -191,11 +206,49 @@ describe(' - State Persistence', () => { apiRef.current.restoreState({ pagination: { page: 1, - pageSize: 2, + pageSize: 1, }, }); clock.runToLast(); - expect(getColumnValues(0)).to.deep.equal(['Titanic', 'Star Wars: The Force Awakens']); + expect(getColumnValues(0)).to.deep.equal(['1']); + }); + + it('should not restore the column visibility model when using the legacy column visibility', () => { + const TestCaseLegacyColumnVisibility = () => { + apiRef = useGridApiRef(); + + return ( +
+ +
+ ); + }; + + render(); + + apiRef.current.restoreState({ + columns: { + columnVisibilityModel: { + category1: false, + }, + }, + }); + + expect(getColumnHeadersTextContent()).to.deep.equal(['category1']); }); }); }); diff --git a/packages/grid/x-data-grid/src/hooks/features/columns/gridColumnsInterfaces.ts b/packages/grid/x-data-grid/src/hooks/features/columns/gridColumnsInterfaces.ts index 19e52796d0fb2..060eef8429ae8 100644 --- a/packages/grid/x-data-grid/src/hooks/features/columns/gridColumnsInterfaces.ts +++ b/packages/grid/x-data-grid/src/hooks/features/columns/gridColumnsInterfaces.ts @@ -1,5 +1,6 @@ import type { GridRowId } from '../../../models'; import { GridColDef, GridStateColDef } from '../../../models/colDef/gridColDef'; +import type { GridColumnDimensionProperties } from './gridColumnsUtils'; export type GridColumnLookup = { [field: string]: GridStateColDef; @@ -11,15 +12,19 @@ export type GridColumnRawLookup = { export interface GridColumnsState { /** - * TODO v6: Rename `orderedFields`. + * TODO v6: Rename `all` to `orderedFields` */ all: string[]; lookup: GridColumnLookup; columnVisibilityModel: GridColumnVisibilityModel; } +export type GridColumnDimensions = Pick; + export interface GridColumnsInitialState { columnVisibilityModel?: GridColumnVisibilityModel; + orderedFields?: string[]; + dimensions?: Record; } export type GridColumnsRawState = Omit & { diff --git a/packages/grid/x-data-grid/src/hooks/features/columns/gridColumnsUtils.ts b/packages/grid/x-data-grid/src/hooks/features/columns/gridColumnsUtils.ts index be04a6921b73a..1ad517bf76a79 100644 --- a/packages/grid/x-data-grid/src/hooks/features/columns/gridColumnsUtils.ts +++ b/packages/grid/x-data-grid/src/hooks/features/columns/gridColumnsUtils.ts @@ -4,6 +4,8 @@ import { GridColumnsState, GridColumnsRawState, GridColumnVisibilityModel, + GridColumnRawLookup, + GridColumnsInitialState, } from './gridColumnsInterfaces'; import { DEFAULT_GRID_COL_TYPE_KEY, @@ -17,6 +19,10 @@ import { GridColDef, GridStateColDef } from '../../../models/colDef/gridColDef'; import { gridColumnsSelector, gridColumnVisibilityModelSelector } from './gridColumnsSelector'; import { clamp } from '../../../utils/utils'; +export const COLUMNS_DIMENSION_PROPERTIES = ['maxWidth', 'minWidth', 'width', 'flex'] as const; + +export type GridColumnDimensionProperties = typeof COLUMNS_DIMENSION_PROPERTIES[number]; + export const computeColumnTypes = (customColumnTypes: GridColumnTypesRecord = {}) => { const mergedColumnTypes: GridColumnTypesRecord = { ...getGridDefaultColumnTypes() }; @@ -223,6 +229,61 @@ export const hydrateColumnsWidth = ( let columnTypeWarnedOnce = false; +/** + * Apply the order and the dimensions of the initial state. + * The columns not registered in `orderedFields` will be placed after the imported columns. + */ +export const applyInitialState = ( + columnsState: Omit, + initialState: GridColumnsInitialState | undefined, +) => { + if (!initialState) { + return columnsState; + } + + const { orderedFields = [], dimensions = {} } = initialState; + + const columnsWithUpdatedDimensions = Object.keys(dimensions); + if (columnsWithUpdatedDimensions.length === 0 && orderedFields.length === 0) { + return columnsState; + } + + const orderedFieldsLookup: Record = {}; + const cleanOrderedFields: string[] = []; + + for (let i = 0; i < orderedFields.length; i += 1) { + const field = orderedFields[i]; + + // Ignores the fields in the initialState that matches no field on the current column state + if (columnsState.lookup[field]) { + orderedFieldsLookup[field] = true; + cleanOrderedFields.push(field); + } + } + + const newOrderedFields = + cleanOrderedFields.length === 0 + ? columnsState.all + : [...cleanOrderedFields, ...columnsState.all.filter((field) => !orderedFieldsLookup[field])]; + + const newColumnLookup: GridColumnRawLookup = { ...columnsState.lookup }; + for (let i = 0; i < columnsWithUpdatedDimensions.length; i += 1) { + const field = columnsWithUpdatedDimensions[i]; + newColumnLookup[field] = { + ...newColumnLookup[field], + ...dimensions[field], + hasBeenResized: true, + }; + } + + const newColumnsState: Omit = { + all: newOrderedFields, + lookup: newColumnLookup, + }; + + return newColumnsState; +}; + /** * @deprecated Should have been internal only, you can inline the logic. */ @@ -256,19 +317,26 @@ export const getGridColDef = ( export const createColumnsState = ({ apiRef, columnsToUpsert, + initialState, columnsTypes, currentColumnVisibilityModel = gridColumnVisibilityModelSelector(apiRef), shouldRegenColumnVisibilityModelFromColumns, reset, }: { columnsToUpsert: GridColDef[]; + initialState: GridColumnsInitialState | undefined; columnsTypes: GridColumnTypesRecord; currentColumnVisibilityModel?: GridColumnVisibilityModel; shouldRegenColumnVisibilityModelFromColumns: boolean; apiRef: React.MutableRefObject; reset: boolean; }) => { - let columnsStateWithoutColumnVisibilityModel: Omit; + let columnsStateWithoutColumnVisibilityModel: Omit< + GridColumnsRawState, + 'columnVisibilityModel' | 'lookup' + > & { + lookup: { [field: string]: Omit }; + }; if (reset) { columnsStateWithoutColumnVisibilityModel = { all: [], @@ -293,10 +361,19 @@ export const createColumnsState = ({ }; columnsStateWithoutColumnVisibilityModel.all.push(newColumn.field); } else { - columnsStateWithoutColumnVisibilityModel.lookup[newColumn.field] = { + const mergedColumn = { ...columnsStateWithoutColumnVisibilityModel.lookup[newColumn.field], ...newColumn, }; + + if ( + !mergedColumn.hasBeenResized && + COLUMNS_DIMENSION_PROPERTIES.some((propertyName) => newColumn[propertyName] !== undefined) + ) { + mergedColumn.hasBeenResized = true; + } + + columnsStateWithoutColumnVisibilityModel.lookup[newColumn.field] = mergedColumn; } }); @@ -349,8 +426,13 @@ export const createColumnsState = ({ columnVisibilityModel = currentColumnVisibilityModel; } + const columnsStateWithPortableColumns = applyInitialState( + columnsStateWithPreProcessing, + initialState, + ); + const columnsState: GridColumnsRawState = { - ...columnsStateWithPreProcessing, + ...columnsStateWithPortableColumns, columnVisibilityModel, }; diff --git a/packages/grid/x-data-grid/src/hooks/features/columns/useGridColumns.ts b/packages/grid/x-data-grid/src/hooks/features/columns/useGridColumns.ts index 7168a8b05b5ae..2ddcc532c825c 100644 --- a/packages/grid/x-data-grid/src/hooks/features/columns/useGridColumns.ts +++ b/packages/grid/x-data-grid/src/hooks/features/columns/useGridColumns.ts @@ -22,13 +22,19 @@ import { import { DataGridProcessedProps } from '../../../models/props/DataGridProps'; import { GridColumnVisibilityChangeParams } from '../../../models'; import { GridPreProcessor, useGridRegisterPreProcessor } from '../../core/preProcessing'; -import { GridColumnsState, GridColumnVisibilityModel } from './gridColumnsInterfaces'; +import { + GridColumnDimensions, + GridColumnsInitialState, + GridColumnsState, + GridColumnVisibilityModel, +} from './gridColumnsInterfaces'; import { GridStateInitializer } from '../../utils/useGridInitializeState'; import { hydrateColumnsWidth, computeColumnTypes, createColumnsState, setColumnsState, + COLUMNS_DIMENSION_PROPERTIES, } from './gridColumnsUtils'; export const columnsStateInitializer: GridStateInitializer< @@ -43,6 +49,7 @@ export const columnsStateInitializer: GridStateInitializer< apiRef, columnsTypes, columnsToUpsert: props.columns, + initialState: props.initialState?.columns, shouldRegenColumnVisibilityModelFromColumns: !shouldUseVisibleColumnModel, currentColumnVisibilityModel: props.columnVisibilityModel ?? props.initialState?.columns?.columnVisibilityModel ?? {}, @@ -160,6 +167,7 @@ export function useGridColumns( apiRef, columnsTypes, columnsToUpsert: [], + initialState: undefined, shouldRegenColumnVisibilityModelFromColumns: false, currentColumnVisibilityModel: model, reset: false, @@ -177,6 +185,7 @@ export function useGridColumns( apiRef, columnsTypes, columnsToUpsert: columns as any, + initialState: undefined, shouldRegenColumnVisibilityModelFromColumns: true, reset: false, }); @@ -287,23 +296,40 @@ export function useGridColumns( */ const stateExportPreProcessing = React.useCallback>( (prevState) => { - if (!shouldUseVisibleColumnModel) { - return prevState; + const columnsStateToExport: GridColumnsInitialState = {}; + + if (shouldUseVisibleColumnModel) { + const columnVisibilityModelToExport = gridColumnVisibilityModelSelector(apiRef); + const hasHiddenColumns = Object.values(columnVisibilityModelToExport).some( + (value) => value === false, + ); + + if (hasHiddenColumns) { + columnsStateToExport.columnVisibilityModel = columnVisibilityModelToExport; + } } - const columnVisibilityModelToExport = gridColumnVisibilityModelSelector(apiRef); - const hasHiddenColumns = Object.values(columnVisibilityModelToExport).some( - (value) => value === false, - ); - if (!hasHiddenColumns) { - return prevState; + columnsStateToExport.orderedFields = gridColumnFieldsSelector(apiRef); + + const columns = gridColumnDefinitionsSelector(apiRef); + const dimensions: Record = {}; + columns.forEach((colDef) => { + if (colDef.hasBeenResized) { + const colDefDimensions: GridColumnDimensions = {}; + COLUMNS_DIMENSION_PROPERTIES.forEach((propertyName) => { + colDefDimensions[propertyName] = colDef[propertyName]; + }); + dimensions[colDef.field] = colDefDimensions; + } + }); + + if (Object.keys(dimensions).length > 0) { + columnsStateToExport.dimensions = dimensions; } return { ...prevState, - columns: { - columnVisibilityModel: columnVisibilityModelToExport, - }, + columns: columnsStateToExport, }; }, [apiRef, shouldUseVisibleColumnModel], @@ -311,22 +337,30 @@ export function useGridColumns( const stateRestorePreProcessing = React.useCallback>( (params, context) => { - if (!shouldUseVisibleColumnModel) { + const columnVisibilityModelToImport = shouldUseVisibleColumnModel + ? context.stateToRestore.columns?.columnVisibilityModel + : undefined; + const initialState = context.stateToRestore.columns; + + if (columnVisibilityModelToImport == null && initialState == null) { return params; } - const columnVisibilityModel = context.stateToRestore.columns?.columnVisibilityModel; - if (columnVisibilityModel != null) { - const columnsState = createColumnsState({ - apiRef, - columnsTypes, - columnsToUpsert: [], - shouldRegenColumnVisibilityModelFromColumns: false, - currentColumnVisibilityModel: columnVisibilityModel, - reset: false, - }); - apiRef.current.setState(setColumnsState(columnsState)); + const columnsState = createColumnsState({ + apiRef, + columnsTypes, + columnsToUpsert: [], + initialState, + shouldRegenColumnVisibilityModelFromColumns: !shouldUseVisibleColumnModel, + currentColumnVisibilityModel: columnVisibilityModelToImport, + reset: false, + }); + apiRef.current.setState(setColumnsState(columnsState)); + + if (initialState != null) { + apiRef.current.publishEvent(GridEvents.columnsChange, columnsState.all); } + return params; }, [apiRef, shouldUseVisibleColumnModel, columnsTypes], @@ -352,6 +386,7 @@ export function useGridColumns( apiRef, columnsTypes, columnsToUpsert: [], + initialState: undefined, shouldRegenColumnVisibilityModelFromColumns: !shouldUseVisibleColumnModel, reset: false, }); @@ -398,6 +433,7 @@ export function useGridColumns( const columnsState = createColumnsState({ apiRef, columnsTypes, + initialState: undefined, // If the user provides a model, we don't want to set it in the state here because it has it's dedicated `useEffect` which calls `setColumnVisibilityModel` shouldRegenColumnVisibilityModelFromColumns: !shouldUseVisibleColumnModel, columnsToUpsert: props.columns, diff --git a/packages/grid/x-data-grid/src/models/colDef/gridColDef.ts b/packages/grid/x-data-grid/src/models/colDef/gridColDef.ts index ec805b1311831..227eedf894abd 100644 --- a/packages/grid/x-data-grid/src/models/colDef/gridColDef.ts +++ b/packages/grid/x-data-grid/src/models/colDef/gridColDef.ts @@ -244,6 +244,10 @@ export type GridColTypeDef = Omit & { extendType?: GridNati export type GridStateColDef = GridEnrichedColDef & { computedWidth: number; + /** + * If `true`, it means that at least one of the dimension's property of this column has been modified since the last time the column prop has changed. + */ + hasBeenResized?: boolean; }; /** diff --git a/packages/grid/x-data-grid/src/tests/columns.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/columns.DataGrid.test.tsx new file mode 100644 index 0000000000000..b49323095aefd --- /dev/null +++ b/packages/grid/x-data-grid/src/tests/columns.DataGrid.test.tsx @@ -0,0 +1,66 @@ +import * as React from 'react'; +import { expect } from 'chai'; +// @ts-ignore Remove once the test utils are typed +import { createRenderer } from '@mui/monorepo/test/utils'; +import { DataGrid, DataGridProps, GridRowsProp, GridColumns } from '@mui/x-data-grid'; +import { + getColumnHeaderCell, + getColumnHeadersTextContent, +} from '../../../../../test/utils/helperFn'; + +const isJSDOM = /jsdom/.test(window.navigator.userAgent); + +const rows: GridRowsProp = [{ id: 1, idBis: 1 }]; + +const columns: GridColumns = [{ field: 'id' }, { field: 'idBis' }]; + +describe(' - Columns', () => { + const { render } = createRenderer(); + + const TestDataGrid = ( + props: Omit & + Partial>, + ) => ( +
+ +
+ ); + + describe('prop: initialState.columns.columns', () => { + it('should allow to initialize the columns order and dimensions', () => { + render( + , + ); + + expect(getColumnHeadersTextContent()).to.deep.equal(['idBis', 'id']); + expect(getColumnHeaderCell(0)).toHaveInlineStyle({ width: '150px' }); + }); + + it('should not add a column when present in the initial state but not in the props', () => { + render(); + + expect(getColumnHeadersTextContent()).to.deep.equal(['id', 'idBis']); + }); + + it('should move the columns not present in the initial state after the one present in it', () => { + render(); + + expect(getColumnHeadersTextContent()).to.deep.equal(['idBis', 'id']); + }); + + it('should allow to remove the sizing properties by setting them to `undefined`', () => { + render( + , + ); + + expect(getColumnHeaderCell(0)).toHaveInlineStyle({ width: '100px' }); + }); + }); +}); diff --git a/packages/grid/x-data-grid/src/tests/filtering.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/filtering.DataGrid.test.tsx index 232c6232aa36f..a72af611941f0 100644 --- a/packages/grid/x-data-grid/src/tests/filtering.DataGrid.test.tsx +++ b/packages/grid/x-data-grid/src/tests/filtering.DataGrid.test.tsx @@ -142,7 +142,7 @@ describe(' - Filter', () => { }); }); - describe('props: initialState.filter', () => { + describe('prop: initialState.filter', () => { it('should allow to initialize the filterModel', () => { render(