# 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.
![image](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image.df0d4b.png?width=1000)
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.
![image](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image.761cdf.png?width=1000)
The following image shows the design tab after adding a line, column, or winloss sparkline that uses a formula.
![image](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image.22a540.png?width=1000)

## Shape Design

The following image shows the design tab after adding a shape.
![image](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image.b09d60.png?width=1000)

## Picture Design

The following image shows the design tab after adding a picture.
![image](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260407.df8f41.png?width=1000)

## Table Design

The following image shows the design tab after adding a table.
![image](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image.d1640f.png?width=1000)
The following image shows the **Options** tab. This tab is available after adding a table and then a slicer.
![image](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image.d50a05.png?width=1000)

## 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.
![image](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image.a12d9b.png?width=1000)

## TableSheet Design

The following image shows the design tab after adding a TableSheet.
![image](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image.e5b2d9.png?width=1000)
The following image shows the **COLUMN SETTING** tab. This tab is available after selecting a column header of TableSheet.
![image](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image.4e887d.png?width=1000)

## Gantt Chart Design

The following image shows the design tab after adding a Gantt chart.
![image](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image.24e850.png?width=1000)

## ReportSheet Design

The following image shows the design tab after adding a ReportSheet.
![image](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image.ab7a9f.png?width=1000)