[EuiDataGrid] Fix column reordering #9030

mgadewoll · 2025-09-17T10:22:17Z

Summary

This PR fixes a bug in EuiDataGrid when the order of columns and columnVisibility.visibleColumns are not in sync. This resulted in unexpected reordering behavior for columns where the initial column order would differ from the internal sorting order. The issue came from the columns selector where the states for rendering the actual columns and the state for rendering the column selector list items was using different non-dependent arrays.
This resulted in the columns updating unexpectedly on drag, from the column selector as well as via the cell menu "move left/right" buttons.

Instead, we need to ensure that the order in which columns are rendered initially depends on the order provided by columnVisibility.visibleColumns to ensure they are in sync.

The update ensures that the initial state is sorted by visibleColumns while keeping non-visible items in place to keep the current behavior as is.

Why are we making this change?

🐛 Bug fix: Fixing a bug that resulted in non-synced column orders between column output and column selector output that would result in unexpected order updates when reordering columns.

Related Kibana issues:

Screenshots #

column selector reordering	column header drag	column action "mode left/right"
Screen.Recording.2025-09-17.at.12.04.48.mov	Screen.Recording.2025-09-17.at.12.34.00.mov	Screen.Recording.2025-09-17.at.12.36.39.mov

Kibana use case

before	after
Screen.Recording.2025-09-17.at.11.56.05.mov	Screen.Recording.2025-09-17.at.11.56.44.mov

Impact to users

🟢 There are no updates required on consumer side.

QA

💻 Links

Codesanbox: original bug sandbox, fixed sandbox
~~Testing story~~ [REVERTED]
Kibana instance (credentials)
- Observability > Alerts

Criteria

review the codesandbox and added Storybook and verify:
- the order of columns and column selector list items is identical on mount
- updating the order from the column selector list updates the column render correctly
- updating the order of columns via drag on the column header updates the order and the order is reflected correctly in the column selector
- updating the order from from the cell menu via "move left/right" buttons updates the order correctly and the order is reflected correctly in the column selector
- non-visible columns are shown in the column selector and can be toggled to be visible and are rendered in the correct position

General checklist

Browser QA
- ~~Checked in both light and dark modes~~
- Checked in both MacOS and Windows high contrast modes
  - (emulate forced colors if you do not have access to a Windows machine.)
- Checked in mobile
- Checked in Chrome, Safari, Edge, and Firefox
- ~~Checked for accessibility including keyboard-only and screenreader modes~~
Docs site QA
- Added documentation
- Props have proper autodocs (using @default if default values are missing) and playground toggles
- ~~Checked Code Sandbox works for any docs examples~~
Code quality checklist
- Added or updated jest and cypress tests
- Updated visual regression tests
Release checklist
- A changelog entry exists and is marked appropriately.
- ~~If applicable, added the breaking change issue label (and filled out the breaking change checklist)~~
Designer checklist
- If applicable, file an issue to update EUI's Figma library with any corresponding UI changes. (This is an internal repo, if you are external to Elastic, ask a maintainer to submit this request)

…bleColumn order

acstll

🟢 Followed the suggested QA steps, tested in Storybook and went through the code. Everything working as expected.

Don't forget to revert 6b6af4e 🙃

mgadewoll · 2025-09-17T15:43:06Z

@acstll Thanks for the speedy review on such short notice. Much appreciated! ❤️

elasticmachine · 2025-09-17T16:00:39Z

💚 Build Succeeded

History

💚 Build #1276 succeeded 6b6af4e
💚 Build #1269 succeeded 5dcff59

cc @mgadewoll

elasticmachine · 2025-09-17T16:14:29Z

💚 Build Succeeded

Buildkite Build
Commit: 04c74c9

History

💚 Build #4742 succeeded 6b6af4e
💚 Build #4737 succeeded 5dcff59

cc @mgadewoll

mgadewoll · 2025-09-17T16:42:25Z

ℹ️ Kibana CI for the changes passed 🟢

>[!IMPORTANT] This PR adds a backport EUI release to include a bug fix in Kibana 9.2 - `@elastic/eui`: `v106.6.0` ⏩ `v106.6.0-backport.0` ## Package updates ### `@elastic/eui` **Bug fixes** - Fixed columns in `EuiDataGrid` not being rendered in the correct order as defined by `columnVisibility.visibleColumns` which resulted in unexpected updates when reordering columns ([#9030](elastic/eui#9030))

- `@elastic/eui`: `v106.6.0` ⏩ `v106.7.0` - `@elastic/eui-theme-borealis`: `v3.4.0` ⏩ `v3.5.0` [Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams) --- ## Changes - replaced usages of `EuiButtonEmpty` in Discover `change_dataview` and `EuiFilterButton` in Dashboard `options_list_control `with the newly added `EuiFormControlButton` component to ensure cohesive form layout styling (EUI [#9006](elastic/eui#9006)) **Discover** | before | after | |---|---| | <img width="434" height="369" alt="Screenshot 2025-10-07 at 22 13 23" src="https://github.com/user-attachments/assets/488984a0-a6a1-488e-8db5-588c84be6765" /> | <img width="418" height="365" alt="Screenshot 2025-10-07 at 22 20 16" src="https://github.com/user-attachments/assets/16164d3f-0b8d-4ceb-a971-a10a6d1f5aee" /> | | <img width="432" height="371" alt="Screenshot 2025-10-07 at 22 12 39" src="https://github.com/user-attachments/assets/37fd32f5-6d15-459d-9e14-776a671b7fd6" /> | <img width="423" height="372" alt="Screenshot 2025-10-07 at 22 21 16" src="https://github.com/user-attachments/assets/846eb3f6-7d39-4c6e-9e22-42b694f9a276" /> | **Dashboard** | before | after | |---|---| | <img width="475" height="288" alt="Screenshot 2025-10-07 at 22 13 13" src="https://github.com/user-attachments/assets/4ff88734-18d7-456a-991d-ba491550a4dd" /> | <img width="432" height="292" alt="Screenshot 2025-10-07 at 17 44 25" src="https://github.com/user-attachments/assets/6e97337f-11e6-4213-a80b-5424dcb3ee38" /> | | <img width="475" height="289" alt="Screenshot 2025-10-07 at 22 12 51" src="https://github.com/user-attachments/assets/dcbd1470-8bdd-453a-8fc0-20da26bc3e27" /> | <img width="471" height="288" alt="Screenshot 2025-10-07 at 21 44 36" src="https://github.com/user-attachments/assets/7f2c5b10-44cf-4efc-a902-dd72889b3043" /> | ## Package updates ## [`v106.7.0`](https://github.com/elastic/eui/releases/v106.7.0) - Updated `EuiComboBox` to properly break long strings without spaces when `rowHeight="auto"` ([#9063](elastic/eui#9063)) - Added `data-test-subj` support to `EuiDatePicker` and `EuiDatePickerRange` for improved testability. Propagates to main component wrappers, inputs, clear buttons, calendar navigation, and popover panels. ([#9042](elastic/eui#9042)) - Added `streamsClassic` and `streamsWired` icons ([#9017](elastic/eui#9017)) - Updated icons based on feedback: `boxesVertical`, `documentation`, `error`, `export`, `filter`, `filterExclude`, `filterIgnore`, `filterInclude`, `grab`, `grabOmnidirectional`, `grabHorizontal`, `importAction`, `indexTemporary`, `link`, `list`, `magnifyWithExclamation`, `magnifyWithMinus`, `magnifyWithPlus`, `minus`, `minusInCircle`, `pencil`, `pin`, `pinFilled`, `plus`, `plusInCircle`, `question`, `search`, `sortLeft`, `sortRight`, `sortDown`, `sortUp`, `sortable`, `unlink`. ([#9026](elastic/eui#9026)) - Added new icon: `backgroundTask`. ([#9026](elastic/eui#9026)) - Marked icons for deprecation: `boxesHorizontal`, `checkInCircleFilled`, `copyClipboard`, `documentEdit`, `errorFilled`, `expandMini`, `filterInCircle`, `lettering`, `listAdd`, `minusInCircleFilled`, `newChat`, `playFilled`, `plusInCircleFilled`, `submodule`, `tableDensityNormal`, `warningFilled`. ([#9026](elastic/eui#9026)) - Added `workflowsApp` icon ([#9011](elastic/eui#9011)) - Added `EuiFormControlButton` component for usage as input-styled button within `EuiFormControlLayout` ([#9006](elastic/eui#9006)) - Updated `EuiSuperDatePicker` to use `EuiFormControlButton` when a prettified duration button is rendered ([#9006](elastic/eui#9006)) **Bug fixes** - Fixed `EuiInMemoryTable` not firing the `search.onChange` callback when `searchFormat` equals `text`. ([#9059](elastic/eui#9059)) - Fixed `columns` in `EuiDataGrid` not being rendered in the correct order as defined by `columnVisibility.visibleColumns` which resulted in unexpected updates when reordering columns ([#9030](elastic/eui#9030)) **Accessibility** - Improved color contrast of non-interactive `EuiBreadcrumbs` items in dark mode ([#9071](elastic/eui#9071)) - Make `EuiProgress` respect user's reduced motion setting by not animating when in indeterminite state. ([#9054](elastic/eui#9054)) ### `@elastic/eui-theme-borealis` ## [`v3.5.0`](https://github.com/elastic/eui/blob/main/packages/eui-theme-borealis/changelogs/CHANGELOG_2025.md#v350) - Updated color value of `textSubdued` and legacy `subduedText` in dark mode from `#8E9FBC` to `#98A8C3` ([#9071](elastic/eui#9071)) **Bug fixes** - Fixed values of `$euiFormBackground` and `$euiFormBackgroundReadOnlyColor` to match JS tokens ([#9067](elastic/eui#9067)) --------- Co-authored-by: Elastic Machine <[email protected]> Co-authored-by: Lene Gadewoll <[email protected]>

- `@elastic/eui`: `v106.6.0` ⏩ `v106.7.0` - `@elastic/eui-theme-borealis`: `v3.4.0` ⏩ `v3.5.0` [Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams) --- ## Changes - replaced usages of `EuiButtonEmpty` in Discover `change_dataview` and `EuiFilterButton` in Dashboard `options_list_control `with the newly added `EuiFormControlButton` component to ensure cohesive form layout styling (EUI [elastic#9006](elastic/eui#9006)) **Discover** | before | after | |---|---| | <img width="434" height="369" alt="Screenshot 2025-10-07 at 22 13 23" src="https://github.com/user-attachments/assets/488984a0-a6a1-488e-8db5-588c84be6765" /> | <img width="418" height="365" alt="Screenshot 2025-10-07 at 22 20 16" src="https://github.com/user-attachments/assets/16164d3f-0b8d-4ceb-a971-a10a6d1f5aee" /> | | <img width="432" height="371" alt="Screenshot 2025-10-07 at 22 12 39" src="https://github.com/user-attachments/assets/37fd32f5-6d15-459d-9e14-776a671b7fd6" /> | <img width="423" height="372" alt="Screenshot 2025-10-07 at 22 21 16" src="https://github.com/user-attachments/assets/846eb3f6-7d39-4c6e-9e22-42b694f9a276" /> | **Dashboard** | before | after | |---|---| | <img width="475" height="288" alt="Screenshot 2025-10-07 at 22 13 13" src="https://github.com/user-attachments/assets/4ff88734-18d7-456a-991d-ba491550a4dd" /> | <img width="432" height="292" alt="Screenshot 2025-10-07 at 17 44 25" src="https://github.com/user-attachments/assets/6e97337f-11e6-4213-a80b-5424dcb3ee38" /> | | <img width="475" height="289" alt="Screenshot 2025-10-07 at 22 12 51" src="https://github.com/user-attachments/assets/dcbd1470-8bdd-453a-8fc0-20da26bc3e27" /> | <img width="471" height="288" alt="Screenshot 2025-10-07 at 21 44 36" src="https://github.com/user-attachments/assets/7f2c5b10-44cf-4efc-a902-dd72889b3043" /> | ## Package updates ## [`v106.7.0`](https://github.com/elastic/eui/releases/v106.7.0) - Updated `EuiComboBox` to properly break long strings without spaces when `rowHeight="auto"` ([elastic#9063](elastic/eui#9063)) - Added `data-test-subj` support to `EuiDatePicker` and `EuiDatePickerRange` for improved testability. Propagates to main component wrappers, inputs, clear buttons, calendar navigation, and popover panels. ([elastic#9042](elastic/eui#9042)) - Added `streamsClassic` and `streamsWired` icons ([elastic#9017](elastic/eui#9017)) - Updated icons based on feedback: `boxesVertical`, `documentation`, `error`, `export`, `filter`, `filterExclude`, `filterIgnore`, `filterInclude`, `grab`, `grabOmnidirectional`, `grabHorizontal`, `importAction`, `indexTemporary`, `link`, `list`, `magnifyWithExclamation`, `magnifyWithMinus`, `magnifyWithPlus`, `minus`, `minusInCircle`, `pencil`, `pin`, `pinFilled`, `plus`, `plusInCircle`, `question`, `search`, `sortLeft`, `sortRight`, `sortDown`, `sortUp`, `sortable`, `unlink`. ([elastic#9026](elastic/eui#9026)) - Added new icon: `backgroundTask`. ([elastic#9026](elastic/eui#9026)) - Marked icons for deprecation: `boxesHorizontal`, `checkInCircleFilled`, `copyClipboard`, `documentEdit`, `errorFilled`, `expandMini`, `filterInCircle`, `lettering`, `listAdd`, `minusInCircleFilled`, `newChat`, `playFilled`, `plusInCircleFilled`, `submodule`, `tableDensityNormal`, `warningFilled`. ([elastic#9026](elastic/eui#9026)) - Added `workflowsApp` icon ([elastic#9011](elastic/eui#9011)) - Added `EuiFormControlButton` component for usage as input-styled button within `EuiFormControlLayout` ([elastic#9006](elastic/eui#9006)) - Updated `EuiSuperDatePicker` to use `EuiFormControlButton` when a prettified duration button is rendered ([elastic#9006](elastic/eui#9006)) **Bug fixes** - Fixed `EuiInMemoryTable` not firing the `search.onChange` callback when `searchFormat` equals `text`. ([elastic#9059](elastic/eui#9059)) - Fixed `columns` in `EuiDataGrid` not being rendered in the correct order as defined by `columnVisibility.visibleColumns` which resulted in unexpected updates when reordering columns ([elastic#9030](elastic/eui#9030)) **Accessibility** - Improved color contrast of non-interactive `EuiBreadcrumbs` items in dark mode ([elastic#9071](elastic/eui#9071)) - Make `EuiProgress` respect user's reduced motion setting by not animating when in indeterminite state. ([elastic#9054](elastic/eui#9054)) ### `@elastic/eui-theme-borealis` ## [`v3.5.0`](https://github.com/elastic/eui/blob/main/packages/eui-theme-borealis/changelogs/CHANGELOG_2025.md#v350) - Updated color value of `textSubdued` and legacy `subduedText` in dark mode from `#8E9FBC` to `#98A8C3` ([elastic#9071](elastic/eui#9071)) **Bug fixes** - Fixed values of `$euiFormBackground` and `$euiFormBackgroundReadOnlyColor` to match JS tokens ([elastic#9067](elastic/eui#9067)) --------- Co-authored-by: Elastic Machine <[email protected]> Co-authored-by: Lene Gadewoll <[email protected]>

…elds (#242557) Fixes #242481 If a data view contains a runtime field, it will be added twice. This has become a problem after a recent Data Grid [change](elastic/eui#9030).

…elds (elastic#242557) Fixes elastic#242481 If a data view contains a runtime field, it will be added twice. This has become a problem after a recent Data Grid [change](elastic/eui#9030). (cherry picked from commit 3f68ad6)

…elds (elastic#242557) Fixes elastic#242481 If a data view contains a runtime field, it will be added twice. This has become a problem after a recent Data Grid [change](elastic/eui#9030).

>[!IMPORTANT] This PR adds a backport EUI release to include a bug fix in Kibana 8.19 - `@elastic/eui`: `v104.0.0-amsterdam.0` ⏩ `v104.0.0-amsterdam.1` ## Package updates ### `@elastic/eui` **Bug fixes** - Fixed columns in `EuiDataGrid` not being rendered in the correct order as defined by `columnVisibility.visibleColumns` which resulted in unexpected updates when reordering columns ([#9030](elastic/eui#9030)) Co-authored-by: Elastic Machine <[email protected]>

fix: ensure initial column state considers visible column order

dde00f5

mgadewoll self-assigned this Sep 17, 2025

mgadewoll added the data grid label Sep 17, 2025

This was referenced Sep 17, 2025

[Security Solution] - Sec. Alerts table column selector state retention elastic/kibana#229352

Open

[ResponseOps] [Alerts] Dragging a column in alerts table does not update its position in popover elastic/kibana#228397

Closed

mgadewoll force-pushed the datagrid/fix-column-reordering branch from 4ed3d5b to 5dcff59 Compare September 17, 2025 10:28

mgadewoll added 3 commits September 17, 2025 16:32

refactor: ensure sortableColumns considers only existing columns

c66d29d

test: add cypress tests for checking relation between column and visi…

6154b31

…bleColumn order

chore: add changelog

04c74c9

mgadewoll force-pushed the datagrid/fix-column-reordering branch from 5dcff59 to 6b6af4e Compare September 17, 2025 14:35

mgadewoll marked this pull request as ready for review September 17, 2025 15:14

mgadewoll requested a review from a team as a code owner September 17, 2025 15:14

acstll self-requested a review September 17, 2025 15:22

acstll approved these changes Sep 17, 2025

View reviewed changes

mgadewoll force-pushed the datagrid/fix-column-reordering branch from 6b6af4e to 04c74c9 Compare September 17, 2025 15:42

mgadewoll merged commit 60dd4ed into elastic:main Sep 17, 2025
5 checks passed

mgadewoll added a commit that referenced this pull request Oct 6, 2025

[EuiDataGrid] Fix column reordering (#9030)

96ca72b

mgadewoll mentioned this pull request Oct 6, 2025

[9.2] Upgrade EUI to v106.6.0-backport.0 elastic/kibana#237647

Merged

acstll mentioned this pull request Oct 6, 2025

Upgrade EUI to v106.7.0 elastic/kibana#237661

Merged

JasonStoltz mentioned this pull request Oct 7, 2025

[EuiDataGrid] Removing width from last column to make it flexible breaks internal data grid state #8998

Closed

tsullivan pushed a commit that referenced this pull request Oct 15, 2025

[EuiDataGrid] Fix column reordering (#9030)

e6dde5f

jgowdyelastic mentioned this pull request Nov 11, 2025

[ML] Data frame analytics: Fixes wizard for data view with runtime fields elastic/kibana#242557

Merged

mgadewoll mentioned this pull request Nov 12, 2025

[EuiDataGrid] Dedupe columns that contain duplicated column.id #9209

Merged

17 tasks

cnasikas mentioned this pull request Nov 28, 2025

[Response Ops][Security Solution] Column re-ordering broken in security solution alerts table elastic/kibana#203847

Closed

mgadewoll added a commit that referenced this pull request Jan 8, 2026

[EuiDataGrid] Fix column reordering (#9030)

68aef68

mgadewoll mentioned this pull request Jan 9, 2026

[8.19] Upgrade EUI to v104.0.0-amsterdam.1 elastic/kibana#248426

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[EuiDataGrid] Fix column reordering #9030

[EuiDataGrid] Fix column reordering #9030

Uh oh!

mgadewoll commented Sep 17, 2025 •

edited

Loading

Uh oh!

acstll left a comment

Uh oh!

mgadewoll commented Sep 17, 2025

Uh oh!

elasticmachine commented Sep 17, 2025

Uh oh!

elasticmachine commented Sep 17, 2025

Uh oh!

mgadewoll commented Sep 17, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

[EuiDataGrid] Fix column reordering #9030

[EuiDataGrid] Fix column reordering #9030

Uh oh!

Conversation

mgadewoll commented Sep 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Why are we making this change?

Screenshots #

Impact to users

QA

💻 Links

Criteria

General checklist

Uh oh!

acstll left a comment

Choose a reason for hiding this comment

Uh oh!

mgadewoll commented Sep 17, 2025

Uh oh!

elasticmachine commented Sep 17, 2025

💚 Build Succeeded

History

Uh oh!

elasticmachine commented Sep 17, 2025

💚 Build Succeeded

History

Uh oh!

mgadewoll commented Sep 17, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

mgadewoll commented Sep 17, 2025 •

edited

Loading