# 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/7719ad0a-f083-46d7-aff6-f63e2e187c15/image.0ab9ab.png?width=1200)
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/7719ad0a-f083-46d7-aff6-f63e2e187c15/image.7238ba.png?width=1200)
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/7719ad0a-f083-46d7-aff6-f63e2e187c15/image.7eb439.png?width=1200)

## Shape Design

The following image shows the design tab after adding a shape.
![image](https://cdn.mescius.io/document-site-files/images/7719ad0a-f083-46d7-aff6-f63e2e187c15/image.2d739f.png?width=1200)

## Picture Design

The following image shows the design tab after adding a picture.
![image](https://cdn.mescius.io/document-site-files/images/7719ad0a-f083-46d7-aff6-f63e2e187c15/image.2f9888.png?width=1200)

## Table Design

The following image shows the design tab after adding a table.
![image](https://cdn.mescius.io/document-site-files/images/7719ad0a-f083-46d7-aff6-f63e2e187c15/image.1a02f2.png?width=1200)
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/7719ad0a-f083-46d7-aff6-f63e2e187c15/image.baf404.png?width=1200)

## 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/7719ad0a-f083-46d7-aff6-f63e2e187c15/image.5a0e90.png?width=1200)

## TableSheet Design

The following image shows the design tab after adding a TableSheet.
![image](https://cdn.mescius.io/document-site-files/images/7719ad0a-f083-46d7-aff6-f63e2e187c15/image.fd9a98.png?width=1200)
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/7719ad0a-f083-46d7-aff6-f63e2e187c15/image.a9f5f6.png?width=1200)

## Gantt Chart Design

The following image shows the design tab after adding a Gantt chart.
![image](https://cdn.mescius.io/document-site-files/images/7719ad0a-f083-46d7-aff6-f63e2e187c15/image.d94cd6.png?width=1200)

## ReportSheet Design

The following image shows the design tab after adding a ReportSheet.
![image](https://cdn.mescius.io/document-site-files/images/7719ad0a-f083-46d7-aff6-f63e2e187c15/image.492334.png?width=1200)