# Dockable Side Panel

## Content

The SpreadJS Designer's dockable side panel enhances user experience and efficiency. It allows users to flexibly adjust the panel position based on personal preferences or workflow needs, optimizing screen space while keeping the design viewport unobstructed. Additionally, it provides quick access to frequently used functions.

## Side Panel Drag and Drop

When you click and drag the side panel's title, the panel enters dragging mode. A position indicator appears at the center of the side panel. While dragging it toward other panels, there are two placement methods:

* **Precision Mode**: Move the mouse to the indicator’s target position and release, which places the panel accordingly.

![2](https://cdn.mescius.io/document-site-files/images/7719ad0a-f083-46d7-aff6-f63e2e187c15/2.f29aaa.gif?width=1200)

* **Quick Mode**: Move the mouse near the target panel and release when the position preview overlay aligns correctly.

![quick](https://cdn.mescius.io/document-site-files/images/7719ad0a-f083-46d7-aff6-f63e2e187c15/quick.68248c.gif?width=1200)

> type=note
> **Note:**
> Only the side panel supports drag-and-drop functionality. It can only be dragged to the left or right sides of the workbook—not to the top, bottom, or any other positions.

## Side Panel Tabs

When multiple Side Panels are displayed simultaneously, they can be organized using tabs
![2](https://cdn.mescius.io/document-site-files/images/7719ad0a-f083-46d7-aff6-f63e2e187c15/2.d5c62a.png?width=400)

* **Default Tab Behavior**
    When multiple side panels are displayed on the same side, they will automatically appear as tabs by default.
* **Side-by-Side Display Option**
    Users can configure panels to display side-by-side (instead of in tabs) through settings in the configuration file.
* ​**​Tab Grouping via Drag-and-Drop**
    To group panels into tabs:
    * Drag a panel over another panel's docking hint buttons
    * Release when the target panel's tab zone is highlighted
        This will add the dragged panel to the target panel's tab group.
* **Interface**

```typescript
export interface ISidePanel {
    /* ... */
    canStack?: boolean;     // default true
}
```

When **canStack** is set to false:

* The side panel will display in a side-by-side layout with other panels
* Tab grouping functionality will be disabled
* This setting preserves backward compatibility with legacy implementations

## Example

```javascript
const config = GC.Spread.Sheets.Designer.DefaultConfig;
config.sidePanels.forEach(panel => {
  panel.canStack = false;
});
const designer = new GC.Spread.Sheets.Designer.Designer('gc-designer-container', config);
```