Dockable Side Panel

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.

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

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

• 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

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

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);