# Insert and Design Tab

A visual breakdown of the Insert Tab in the SpreadJS Designer Component, including the sections and options

## Content

The **INSERT** tab allows you to add tables, slicers, pictures, and sparklines.
![SpreadJS Designer displays the INSERT tab with commands for adding tables, slicers, pictures, sparklines, and other worksheet UI elements.](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260722.7b0403.png?width=800)
The **DESIGN** tab is displayed after adding an object from the **INSERT** tab and allows you to set colors and styles.

## Sparkline Design

The following image shows the design tab after adding the area, scatter sparkline types, or a line, column, or winloss sparkline that does not use a formula.
![SpreadJS Designer displays Sparkline Design commands for area, scatter, and non-formula line, column, or winloss sparklines in worksheet cells.](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image.761cdf.png?width=800)
The following image shows the design tab after adding a line, column, or winloss sparkline that uses a formula.
![SpreadJS Designer displays the Sparkline Design tab for formatting line, column, or winloss sparklines created through worksheet formulas.](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image.22a540.png?width=800)

## Shape Design

The following image shows the design tab after adding a shape.
![SpreadJS Designer displays the Shape Design tab with commands for customizing the appearance and layout of a selected worksheet shape.](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image.b09d60.png?width=800)

## Picture Design

The following image shows the design tab after adding a picture.
![SpreadJS Designer displays the Picture Design tab with formatting and arrangement commands for a selected picture in the worksheet](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260407.df8f41.png?width=800)

## Table Design

The following image shows the design tab after adding a table.
![SpreadJS Designer displays the Table Design tab with style and configuration commands for a selected worksheet table and its data range.](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image.d1640f.png?width=800)
The following image shows the **Options** tab. This tab is available after adding a table and then a slicer.
![SpreadJS Designer displays the Options tab for configuring a slicer connected to a worksheet table for interactive data filtering.](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image.d50a05.png?width=800)

## Pivot Table Design

The following image shows the design tab after adding a pivot table.
![SpreadJS Designer displays the Pivot Table Design tab with layout and style commands for presenting summarized worksheet data.](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260722.630e6a.png?width=800)

## Chart Design

The following image shows the design tab after adding a chart. This tab is available after selecting data in the chart and then adding a chart.
![SpreadJS Designer displays the Chart Design tab after chart creation, providing commands for changing its type, source data, layout, and style.](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image.a12d9b.png?width=800)

## TableSheet Design

The following image shows the design tab after adding a TableSheet.
![SpreadJS Designer displays the TableSheet Design tab with commands for configuring the appearance and behavior of an active TableSheet.](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image.e5b2d9.png?width=800)
The following image shows the **COLUMN SETTING** tab. This tab is available after selecting a column header of TableSheet.
![SpreadJS Designer displays the COLUMN SETTING tab after selecting a TableSheet column header, enabling column-level field and presentation configuration.](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image.4e887d.png?width=800)

## Gantt Chart Design

The following image shows the design tab after adding a Gantt chart.
![SpreadJS Designer displays the Gantt Chart Design tab with commands for formatting taskbars, timescale elements, and project schedule presentation.](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image.24e850.png?width=800)

## ReportSheet Design

The following image shows the design tab after adding a ReportSheet.
![SpreadJS Designer displays the ReportSheet Design tab with controls for configuring report layout, bound data regions, and presentation settings.](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image.ab7a9f.png?width=800)