[Lens] [Data Table] Add settings for data grid density#220252
Merged
mariairiartef merged 16 commits intoelastic:mainfrom May 26, 2025
Merged
[Lens] [Data Table] Add settings for data grid density#220252mariairiartef merged 16 commits intoelastic:mainfrom
mariairiartef merged 16 commits intoelastic:mainfrom
Conversation
mariairiartef
commented
May 6, 2025
| ); | ||
| } | ||
|
|
||
| const DensitySettings = ({ |
Contributor
Author
There was a problem hiding this comment.
I think that is not possible to use directly the component from EUI, that's why I added it here.
mariairiartef
added
release_note:enhancement
Team:Visualizations
Contributor
|
Pinging @elastic/kibana-visualizations (Team:Visualizations) |
mariairiartef
added
backport:version
Contributor
Flaky Test Runner Stats🎉 All tests passed! - kibana-flaky-test-suite-runner#8251[✅] x-pack/test/functional/apps/lens/group2/config.ts: 50/50 tests passed. |
dej611
reviewed
May 20, 2025
x-pack/platform/plugins/shared/lens/public/visualizations/datatable/components/toolbar.tsx
Outdated
Show resolved
Hide resolved
x-pack/platform/plugins/shared/lens/public/visualizations/datatable/components/toolbar.tsx
Outdated
Show resolved
Hide resolved
x-pack/platform/plugins/shared/lens/public/visualizations/datatable/components/toolbar.tsx
Outdated
Show resolved
Hide resolved
x-pack/platform/plugins/shared/lens/public/visualizations/datatable/visualization.test.tsx
Outdated
Show resolved
Hide resolved
| }, | ||
| }); | ||
| const table = screen.getByTestId('lnsDataTable'); | ||
| expect(table).toHaveClass(/cellPadding-m-fontSize-m/); |
Contributor
There was a problem hiding this comment.
why using a regex instead of regular string?
Contributor
Author
There was a problem hiding this comment.
I'm using a regex pattern with toHaveClass() because the class name is generated by Emotion and contains the density identifier embedded within a longer class string.
mariairiartef
force-pushed
the
lens/216095
branch
from
f8cbef9 to
784f626
Compare
Contributor
Flaky Test Runner Stats🎉 All tests passed! - kibana-flaky-test-suite-runner#8288[✅] x-pack/test/functional/apps/lens/group2/config.ts: 25/25 tests passed. |
Contributor
Flaky Test Runner Stats🎉 All tests passed! - kibana-flaky-test-suite-runner#8287[✅] x-pack/test/functional/apps/lens/group2/config.ts: 25/25 tests passed. |
dej611
reviewed
May 22, 2025
| defaultMessage: 'Density', | ||
| }); | ||
|
|
||
| const densityOptions = [ |
Contributor
There was a problem hiding this comment.
can you move this outside of the component function?
Or as alternative use a useMemo here to avoid unnecessary rerenderings (but moving out is preferable).
| ]; | ||
|
|
||
| return ( | ||
| <EuiFormRow label={densityLabel} display="columnCompressed" data-test-subj="lnsDensitySettings"> |
Contributor
There was a problem hiding this comment.
Suggested change
| <EuiFormRow label={densityLabel} display="columnCompressed" data-test-subj="lnsDensitySettings"> | |
| <EuiFormRow aria-label={densityLabel} display="columnCompressed" data-test-subj="lnsDensitySettings"> |
| it('renders the density settings component with label', () => { | ||
| renderDensitySettingsComponent(); | ||
|
|
||
| expect(screen.getByText('Density', { selector: 'label' })).toBeInTheDocument(); |
Contributor
There was a problem hiding this comment.
Suggested change
| expect(screen.getByText('Density', { selector: 'label' })).toBeInTheDocument(); | |
| expect(screen.getByLabelText('Density')).toBeInTheDocument(); |
Comment on lines
51
to
52
| const normalButton = screen.getByText('Normal').closest('button'); | ||
| expect(normalButton).toHaveAttribute('aria-pressed', 'true'); |
Contributor
There was a problem hiding this comment.
Suggested change
| const normalButton = screen.getByText('Normal').closest('button'); | |
| expect(normalButton).toHaveAttribute('aria-pressed', 'true'); | |
| expect(screen.getByRole('button', { name: 'Normal', pressed: true })).toBeInTheDocument(); |
| it('calls onChange with compact density when compact option is clicked', () => { | ||
| renderDensitySettingsComponent(); | ||
|
|
||
| fireEvent.click(screen.getByText('Compact')); |
Contributor
There was a problem hiding this comment.
Suggested change
| fireEvent.click(screen.getByText('Compact')); | |
| fireEvent.click(screen.getByRole('button', { name: 'Compact' })); |
| it('calls onChange with expanded density when expanded option is clicked', () => { | ||
| renderDensitySettingsComponent(); | ||
|
|
||
| fireEvent.click(screen.getByText('Expanded')); |
| }); | ||
|
|
||
| // The component should still render without errors | ||
| expect(screen.getByText('Density', { selector: 'label' })).toBeInTheDocument(); |
Contributor
There was a problem hiding this comment.
Suggested change
| expect(screen.getByText('Density', { selector: 'label' })).toBeInTheDocument(); | |
| expect(screen.getByLabelText('Density')).toBeInTheDocument(); |
Comment on lines
82
to
83
| const normalButton = screen.getByText('Normal').closest('button'); | ||
| expect(normalButton).toHaveAttribute('aria-pressed', 'true'); |
Comment on lines
90
to
91
| let normalButton = screen.getByText('Normal').closest('button'); | ||
| expect(normalButton).toHaveAttribute('aria-pressed', 'true'); |
Comment on lines
97
to
100
| const compactButton = screen.getByText('Compact').closest('button'); | ||
| expect(compactButton).toHaveAttribute('aria-pressed', 'true'); | ||
| normalButton = screen.getByText('Normal').closest('button'); | ||
| expect(normalButton).toHaveAttribute('aria-pressed', 'false'); |
Contributor
There was a problem hiding this comment.
Pull Request Overview
This PR adds a new Density setting to the Lens Data Table to match the density options available in Discover. Key changes include adding new functions for setting and checking density in functional tests, updating the visualization state and expression args with density, and adding a new DensitySettings component (with associated tests) to the table toolbar.
Reviewed Changes
Copilot reviewed 11 out of 11 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| x-pack/test/functional/page_objects/lens_page.ts | Added functions to set and verify the data table density in tests. |
| x-pack/test/functional/apps/lens/group2/table.ts | Added tests to validate the compact, normal, and expanded density modes. |
| x-pack/platform/plugins/shared/lens/public/visualizations/datatable/visualization.ts | Updated visualization state to include density with a default. |
| x-pack/platform/plugins/shared/lens/public/visualizations/datatable/visualization.test.tsx | Added test case to assert density is correctly passed in expression arguments. |
| x-pack/platform/plugins/shared/lens/public/visualizations/datatable/components/toolbar.tsx | Integrated DensitySettings and added a density change handler into the toolbar. |
| x-pack/platform/plugins/shared/lens/public/visualizations/datatable/components/toolbar.test.tsx | Extended toolbar tests to cover density changes and UI reflection. |
| x-pack/platform/plugins/shared/lens/public/visualizations/datatable/components/table_basic.tsx | Updated grid style computation to incorporate the selected density. |
| x-pack/platform/plugins/shared/lens/public/visualizations/datatable/components/table_basic.test.tsx | Added tests to ensure table style updates correctly with density changes. |
| x-pack/platform/plugins/shared/lens/public/visualizations/datatable/components/density_settings.tsx | Added a new component to render density options with fallback for invalid values. |
| x-pack/platform/plugins/shared/lens/public/visualizations/datatable/components/density_settings.test.tsx | Added unit tests for the DensitySettings component. |
| x-pack/platform/plugins/shared/lens/common/expressions/defs/datatable/datatable.ts | Updated datatable expression function definition to accept a new density argument. |
Comments suppressed due to low confidence (1)
x-pack/platform/plugins/shared/lens/common/expressions/defs/datatable/datatable.ts:100
- Consider clarifying the density argument definition by specifying allowed values or using a more precise type (e.g., a union of 'compact' | 'normal' | 'expanded') to align with DataGridDensity for improved API clarity.
density: { types: ['string'], help: '', },
dej611
approved these changes
May 23, 2025
Contributor
|
Starting backport for target branches: 8.19 |
Contributor
💛 Build succeeded, but was flaky
Failed CI Steps
Metrics [docs]Module Count
Public APIs missing comments
Async chunks
Page load bundle
History
|
Contributor
💔 All backports failed
Manual backportTo create the backport manually run: Questions ?Please refer to the Backport tool documentation |
1 task
kibanamachine
added
the
backport missing
Contributor
|
Friendly reminder: Looks like this PR hasn’t been backported yet. |
akowalska622
pushed a commit
to akowalska622/kibana
that referenced
this pull request
May 29, 2025
## Summary Closes elastic#216095 Introduces a new `Density` setting for the Lens Data Table, ensuring consistency with the density options available in Discover. This enhancement allows users to customize the table's appearance by selecting from `Compact`, `Normal`, and `Expanded` density modes. <img width="444" alt="Screenshot 2025-05-08 at 11 13 26" src="https://github.com/user-attachments/assets/c5a3bfb6-d2c7-4e14-ae58-c197165ddddc" /> ### Details There is an existing DensityControl component in EUI that cannot be accessed directly, only by the use of the [toolbarVisibility](https://eui.elastic.co/docs/components/tabular-content/data-grid/toolbar/#toolbar-visibility) prop in the `EuiDataGrid` component. Since we aren't using this prop for the settings display because we are using a separate `Toolbar` component, we have copied and adapted the component found [here](https://github.com/elastic/eui/blob/1e78b3f8b435c59379582612aa9b9cfed39ad864/packages/eui/src/components/datagrid/controls/display_selector.tsx#L77). ## Screen recording https://github.com/user-attachments/assets/4e281b58-7bd4-4cd3-bf8f-d4c2fd553ae8 ## Checklist - [ ] [Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html) was added for features that require explanation or tutorials - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [ ] This was checked for breaking HTTP API changes, and any breaking changes have been approved by the breaking-change committee. The `release_note:breaking` label should be applied in these situations. - [ ] [Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed - [ ] The PR description includes the appropriate Release Notes section, and the correct `release_note:*` label is applied per the [guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) <!-- - [ ] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md) - [ ] If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the [docker list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker) --> <!-- ### Identify risks Does this PR introduce any risks? For example, consider risks like hard to test bugs, performance regression, potential of data loss. Describe the risk, its severity, and mitigation for each identified risk. Invite stakeholders and evaluate how to proceed before merging. - [ ] [See some risk examples](https://github.com/elastic/kibana/blob/main/RISK_MATRIX.mdx) - [ ] ... --> --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Contributor
|
Friendly reminder: Looks like this PR hasn’t been backported yet. |
1 similar comment
Contributor
|
Friendly reminder: Looks like this PR hasn’t been backported yet. |
mariairiartef
added a commit
to mariairiartef/kibana
that referenced
this pull request
Jun 2, 2025
## Summary Closes elastic#216095 Introduces a new `Density` setting for the Lens Data Table, ensuring consistency with the density options available in Discover. This enhancement allows users to customize the table's appearance by selecting from `Compact`, `Normal`, and `Expanded` density modes. <img width="444" alt="Screenshot 2025-05-08 at 11 13 26" src="https://github.com/user-attachments/assets/c5a3bfb6-d2c7-4e14-ae58-c197165ddddc" /> ### Details There is an existing DensityControl component in EUI that cannot be accessed directly, only by the use of the [toolbarVisibility](https://eui.elastic.co/docs/components/tabular-content/data-grid/toolbar/#toolbar-visibility) prop in the `EuiDataGrid` component. Since we aren't using this prop for the settings display because we are using a separate `Toolbar` component, we have copied and adapted the component found [here](https://github.com/elastic/eui/blob/1e78b3f8b435c59379582612aa9b9cfed39ad864/packages/eui/src/components/datagrid/controls/display_selector.tsx#L77). ## Screen recording https://github.com/user-attachments/assets/4e281b58-7bd4-4cd3-bf8f-d4c2fd553ae8 ## Checklist - [ ] [Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html) was added for features that require explanation or tutorials - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [ ] This was checked for breaking HTTP API changes, and any breaking changes have been approved by the breaking-change committee. The `release_note:breaking` label should be applied in these situations. - [ ] [Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed - [ ] The PR description includes the appropriate Release Notes section, and the correct `release_note:*` label is applied per the [guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) <!-- - [ ] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md) - [ ] If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the [docker list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker) --> <!-- ### Identify risks Does this PR introduce any risks? For example, consider risks like hard to test bugs, performance regression, potential of data loss. Describe the risk, its severity, and mitigation for each identified risk. Invite stakeholders and evaluate how to proceed before merging. - [ ] [See some risk examples](https://github.com/elastic/kibana/blob/main/RISK_MATRIX.mdx) - [ ] ... --> --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> (cherry picked from commit 75681df) # Conflicts: # x-pack/platform/plugins/shared/lens/common/expressions/datatable/datatable.ts # x-pack/platform/plugins/shared/lens/public/visualizations/datatable/components/table_basic.tsx # x-pack/platform/plugins/shared/lens/public/visualizations/datatable/visualization.tsx
Contributor
Author
💚 All backports created successfully
Note: Successful backport PRs will be merged automatically after passing CI. Questions ?Please refer to the Backport tool documentation |
Contributor
|
Looks like this PR has a backport PR but it still hasn't been merged. Please merge it ASAP to keep the branches relatively in sync. |
mariairiartef
added a commit
that referenced
this pull request
Jun 2, 2025
… (#222153) # Backport This will backport the following commits from `main` to `8.19`: - [[Lens] [Data Table] Add settings for data grid density (#220252)](#220252) <!--- Backport version: 10.0.0 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport) <!--BACKPORT [{"author":{"name":"Maria Iriarte","email":"106958839+mariairiartef@users.noreply.github.com"},"sourceCommit":{"committedDate":"2025-05-26T12:13:37Z","message":"[Lens] [Data Table] Add settings for data grid density (#220252)\n\n## Summary\n\nCloses #216095 a new `Density` setting for the Lens Data Table, ensuring\nconsistency with the density options available in Discover. This\nenhancement allows users to customize the table's appearance by\nselecting from `Compact`, `Normal`, and `Expanded` density modes.\n\n<img width=\"444\" alt=\"Screenshot 2025-05-08 at 11 13 26\"\nsrc=\"https://github.com/user-attachments/assets/c5a3bfb6-d2c7-4e14-ae58-c197165ddddc\"\n/>\n\n### Details\n\nThere is an existing DensityControl component in EUI that cannot be\naccessed directly, only by the use of the\n[toolbarVisibility](https://eui.elastic.co/docs/components/tabular-content/data-grid/toolbar/#toolbar-visibility)\nprop in the `EuiDataGrid` component. Since we aren't using this prop for\nthe settings display because we are using a separate `Toolbar`\ncomponent, we have copied and adapted the component found\n[here](https://github.com/elastic/eui/blob/1e78b3f8b435c59379582612aa9b9cfed39ad864/packages/eui/src/components/datagrid/controls/display_selector.tsx#L77).\n\n## Screen recording\n\n\nhttps://github.com/user-attachments/assets/4e281b58-7bd4-4cd3-bf8f-d4c2fd553ae8\n\n\n\n## Checklist\n\n- [ ]\n[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)\nwas added for features that require explanation or tutorials\n- [x] [Unit or functional\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\nwere updated or added to match the most common scenarios\n- [ ] This was checked for breaking HTTP API changes, and any breaking\nchanges have been approved by the breaking-change committee. The\n`release_note:breaking` label should be applied in these situations.\n- [ ] [Flaky Test\nRunner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was\nused on any tests changed\n- [ ] The PR description includes the appropriate Release Notes section,\nand the correct `release_note:*` label is applied per the\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\n\n\n\n\n\n---------\n\nCo-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>","sha":"75681dff3b9f9ae56e0807d3f3fef1e8c9c6e95c","branchLabelMapping":{"^v9.1.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:enhancement","Team:Visualizations","Feature:Lens","backport missing","backport:version","v9.1.0","v8.19.0"],"title":"[Lens] [Data Table] Add settings for data grid density","number":220252,"url":"https://github.com/elastic/kibana/pull/220252","mergeCommit":{"message":"[Lens] [Data Table] Add settings for data grid density (#220252)\n\n## Summary\n\nCloses #216095 a new `Density` setting for the Lens Data Table, ensuring\nconsistency with the density options available in Discover. This\nenhancement allows users to customize the table's appearance by\nselecting from `Compact`, `Normal`, and `Expanded` density modes.\n\n<img width=\"444\" alt=\"Screenshot 2025-05-08 at 11 13 26\"\nsrc=\"https://github.com/user-attachments/assets/c5a3bfb6-d2c7-4e14-ae58-c197165ddddc\"\n/>\n\n### Details\n\nThere is an existing DensityControl component in EUI that cannot be\naccessed directly, only by the use of the\n[toolbarVisibility](https://eui.elastic.co/docs/components/tabular-content/data-grid/toolbar/#toolbar-visibility)\nprop in the `EuiDataGrid` component. Since we aren't using this prop for\nthe settings display because we are using a separate `Toolbar`\ncomponent, we have copied and adapted the component found\n[here](https://github.com/elastic/eui/blob/1e78b3f8b435c59379582612aa9b9cfed39ad864/packages/eui/src/components/datagrid/controls/display_selector.tsx#L77).\n\n## Screen recording\n\n\nhttps://github.com/user-attachments/assets/4e281b58-7bd4-4cd3-bf8f-d4c2fd553ae8\n\n\n\n## Checklist\n\n- [ ]\n[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)\nwas added for features that require explanation or tutorials\n- [x] [Unit or functional\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\nwere updated or added to match the most common scenarios\n- [ ] This was checked for breaking HTTP API changes, and any breaking\nchanges have been approved by the breaking-change committee. The\n`release_note:breaking` label should be applied in these situations.\n- [ ] [Flaky Test\nRunner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was\nused on any tests changed\n- [ ] The PR description includes the appropriate Release Notes section,\nand the correct `release_note:*` label is applied per the\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\n\n\n\n\n\n---------\n\nCo-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>","sha":"75681dff3b9f9ae56e0807d3f3fef1e8c9c6e95c"}},"sourceBranch":"main","suggestedTargetBranches":["8.19"],"targetPullRequestStates":[{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/220252","number":220252,"mergeCommit":{"message":"[Lens] [Data Table] Add settings for data grid density (#220252)\n\n## Summary\n\nCloses #216095 a new `Density` setting for the Lens Data Table, ensuring\nconsistency with the density options available in Discover. This\nenhancement allows users to customize the table's appearance by\nselecting from `Compact`, `Normal`, and `Expanded` density modes.\n\n<img width=\"444\" alt=\"Screenshot 2025-05-08 at 11 13 26\"\nsrc=\"https://github.com/user-attachments/assets/c5a3bfb6-d2c7-4e14-ae58-c197165ddddc\"\n/>\n\n### Details\n\nThere is an existing DensityControl component in EUI that cannot be\naccessed directly, only by the use of the\n[toolbarVisibility](https://eui.elastic.co/docs/components/tabular-content/data-grid/toolbar/#toolbar-visibility)\nprop in the `EuiDataGrid` component. Since we aren't using this prop for\nthe settings display because we are using a separate `Toolbar`\ncomponent, we have copied and adapted the component found\n[here](https://github.com/elastic/eui/blob/1e78b3f8b435c59379582612aa9b9cfed39ad864/packages/eui/src/components/datagrid/controls/display_selector.tsx#L77).\n\n## Screen recording\n\n\nhttps://github.com/user-attachments/assets/4e281b58-7bd4-4cd3-bf8f-d4c2fd553ae8\n\n\n\n## Checklist\n\n- [ ]\n[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)\nwas added for features that require explanation or tutorials\n- [x] [Unit or functional\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\nwere updated or added to match the most common scenarios\n- [ ] This was checked for breaking HTTP API changes, and any breaking\nchanges have been approved by the breaking-change committee. The\n`release_note:breaking` label should be applied in these situations.\n- [ ] [Flaky Test\nRunner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was\nused on any tests changed\n- [ ] The PR description includes the appropriate Release Notes section,\nand the correct `release_note:*` label is applied per the\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\n\n\n\n\n\n---------\n\nCo-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>","sha":"75681dff3b9f9ae56e0807d3f3fef1e8c9c6e95c"}},{"branch":"8.19","label":"v8.19.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}] BACKPORT-->
kibanamachine
removed
the
backport missing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Closes #216095
Introduces a new
Densitysetting for the Lens Data Table, ensuring consistency with the density options available in Discover. This enhancement allows users to customize the table's appearance by selecting fromCompact,Normal, andExpandeddensity modes.Details
There is an existing DensityControl component in EUI that cannot be accessed directly, only by the use of the toolbarVisibility prop in the
EuiDataGridcomponent. Since we aren't using this prop for the settings display because we are using a separateToolbarcomponent, we have copied and adapted the component found here.Screen recording
Screen.Recording.2025-05-08.at.11.26.20.mov
Checklist
release_note:breakinglabel should be applied in these situations.release_note:*label is applied per the guidelines