Dockable Side Panel

The SpreadJS Designer's dockable side panel significantly 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

• Drag-and-Drop Behavior:

  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.

• Docking Hints:

  When clicking and holding the side panel’s title bar, docking hint buttons appear. To dock the panel, the user must release the click while hovering over the desired docking button.

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