bvaughn / bvaughn/react-resizable-panels
Feature request: Support shared resizing across two-dimensional grid layouts
- Dominant language
- TypeScript
- Stars
- 5.4k
- Forks
- 228
- Avg merge
- 2d 10h
- Merged PRs (30d)
- 3
Description
## Feature request: Support shared resizing across two-dimensional grid layouts
### Description
I am trying to build a resizable two-dimensional grid using `react-resizable-panels`.
For example:
```text
┌───────────┬───────────┐
│ A │ B │
├───────────┼───────────┤
│ C │ D │
└───────────┴───────────┘
```
The expected behaviour is:
* Dragging the vertical separator should resize both columns across every row.
* Dragging the horizontal separator should resize both rows across every column.
* Optionally, dragging the centre intersection could resize both axes.
### Current behaviour
The closest implementation is to nest panel groups:
```tsx
A
B
C
D
```
However, the horizontal groups are independent.
Dragging the separator between `A` and `B` does not move the separator between `C` and `D`.
Reversing the nesting solves the shared column resizing, but then the row separators become independent.
This means the layout can only have shared resizing along one axis at a time.
### Requested capability
It would be useful to support grid-style shared tracks, where multiple panels can reference the same row or column size.
A possible API could look similar to:
```tsx
A
B
C
D
```
Alternatively, nested groups could expose a supported way to synchronise their layouts without manually coordinating several refs and `setLayout()` calls.
Contributor guide
Research direction
Start by reviewing the existing Group, Panel, and Separator APIs, then examine how nested layouts are managed. Compare the requested shared row and column behavior with the current ref/setLayout() synchronization approach mentioned in the issue. Done means a supported grid or synchronization capability lets separators resize matching tracks across all rows or columns.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100