# DataObject Cell

A tutorial showing how to work with DataObject cell types in SpreadJS, including how to connect it to the WEBSERVICE function

## Content

The DataObject cell type allows a cell to display structured object data and extract object properties directly into adjacent cells.
When a cell value is an object and the cell type is set to [`GC.Spread.Sheets.CellTypes.DataObject`](/spreadjs/api/classes/GC.Spread.Sheets.CellTypes.DataObject), a built-in button ![image](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260330.bbbbec.png?width=20) appears in the cell.
Clicking the button displays a dropdown list of object properties. Selecting a property writes its value into the adjacent empty cell on the right. This operation supports Undo.
![dataObject.gif](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/dataObject-20260330.9cd8e6.gif?width=600)

>type=note
> Note: If the adjacent cell is merged or part of a table, the extraction fails and triggers an `InvalidOperation` event with the message: `"Cannot insert data"`.

![image](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260330.b52d4a.png?width=600)
The DataObject cell type supports a format string to control how the object is displayed in the cell. The format can use the `PROPERTY` function or the `@.` dot operator.
**Example:**

```javascript
// Retrieve object data
sheet.setFormula(1, 1,
  '=FILTERJSON(WEBSERVICE("https://demodata.grapecity.com/northwind/api/v1/Products/1"))'
);

// Apply DataObject cell type with display format
var cellType = new GC.Spread.Sheets.CellTypes.DataObject(
  '=@.productName & " " & @.unitPrice'
);

sheet.setCellType(1, 1, cellType);
```

The DataObject cell type can also be configured in the **SpreadJS Designer**:
*Home tab → Styles group → Cell Editors → Cell Type → Data Object*
![image](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260421.d155ce.png?width=800)
Enter a valid format string in the Format field to control how object properties are displayed.
![image](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260330.f48f6b.png?width=400)

>type=note
> The format must be valid; otherwise, it will not be applied.