github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 01:38:56 -04:00
Code Issues Projects Releases Packages Wiki Activity
kibana/examples/grid_example
History
Exact
Hannah Mudge 05db9e9597
[kbn-grid-layout] Allow rows to be reordered (#213166) 
Closes https://github.com/elastic/kibana/issues/190381

## Summary

This PR adds the ability to drag and drop rows by their headers in order
to reorder them:

![Mar-12-2025
16-07-04](https://github.com/user-attachments/assets/de6afb8e-f009-4c00-b1dc-4804769e54eb)

It can be a bit confusing dragging section headers around when other
sections are expanded - it is easy to lose track of them, especially
when the expanded sections are very large. I experimented with
auto-collapsing all sections on drag, but this felt extremely
disorienting because you instantly lost all of your context - so, to
improve the UI here, I added a "scroll to" effect on drop like so:



https://github.com/user-attachments/assets/0b519783-a4f5-4590-9a1c-580df66a2f66

Reminder that, to test this feature, you need to run Kibana with
examples via `yarn start --run-examples` and navigate to the grid
examples app via `Analytics > Developer examples > Grid Example`.

### Checklist

- [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
- [x] 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)

### Identify risks

Collapsible sections are not available on Dashboard yet and so there is
no user-facing risk to this PR.
2025-03-19 11:12:35 -06:00
..
public [kbn-grid-layout] Allow rows to be reordered (#213166) 2025-03-19 11:12:35 -06:00
kibana.jsonc SKA: Categorise remaining packages (#205875) 2025-01-08 22:20:14 +01:00
README.md [Dashboard] New layout engine (#174132) 2024-08-15 17:51:43 -04:00
tsconfig.json [Dashboard] [Collapsable Panels] Add embeddable support (#198413) 2024-12-10 11:14:31 -06:00

README.md

Grid Example

This plugin is a playground and learning tool that demonstrates the Dashboard layout engine.