bvaughn / bvaughn/react-resizable-panels

Feature request: Support shared resizing across two-dimensional grid layouts

Open
#728 1 comment 0 reactions 0 assignees View on GitHub
discussion
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.