# Sheet Element

## Content

The following table lists all the items in the gc-spread-sheets element.

| Attribute | SpreadJS API | Type | Comments |
| --------- | ------------ | ---- | -------- |
| name | `Workbook.name` | `string` |  |
| allowUserZoom | `Workbook.options.allowUserZoom = value` | `boolean` |  |
| allowUserResize | `Workbook.options.allowUserResize = value` | `boolean` |  |
| tabStripVisible | `Workbook.options.tabstripvisible = value` | `boolean` |  |
| tabEditable | `Workbook.options.tabEditable = value` | `boolean` |  |
| newTabVisible | `Workbook.options.newTabVisible = value` | `boolean` |  |
| allowUserEditFormula | `Workbook.options.allowUserEditFormula = value` | `boolean` |  |
| autoFitType | `Workbook.options.autofittype = value` | `GC.Spread.Sheets.AutoFitType` |  |
| allowUserDragFill | `Workbook.options.allowUserDragfill = value` | `boolean` |  |
| allowUserDragDrop | `Workbook.options.allowUserDragDrop = value` | `boolean` |  |
| allowUserDragMerge | `Workbook.options.allowUserDragMerge = value` | `boolean` |  |
| allowUndo | `Workbook.options.allowUndo = value` | `boolean` |  |
| allowUserDeselect | `Workbook.options.allowUserDeselect = value` | `boolean` |  |
| allowSheetReorder | `Workbook.options.allowSheetReorder = value` | `boolean` |  |
| allowContextMenu | `Workbook.options.allowContextMenu = value` | `boolean` |  |
| allowCopyPasteExcelStyle | `Workbook.options.allowCopyPasteExcelStyle = value` | `boolean` |  |
| allowExtendPasteRange | `Workbook.options.allowExtendPasteRange = value` | `boolean` |  |
| cutCopyIndicatorVisible | `Workbook.options.cutCopyIndicatorVisible = value` | `boolean` |  |
| cutCopyIndicatorBorderColor | `Workbook.options.cutCopyIndicatorBorderColor = value` | `string` |  |
| copyPasteHeaderOptions | `Workbook.options.copyPasteHeaderOptions = value` | `GC.Spread.Sheets.CopyPasteHeaderOptions` |  |
| defaultDragFillType | `Workbook.options.defaultDragFillType = value` | `GC.Spread.Sheets.Fill.AutoFillType` |  |
| enableFormulaTextbox | `Workbook.options.enableFormulaTextbox = value` | `boolean` |  |
| hideSelection | `Workbook.options.hideSelection = value` | `boolean` |  |
| highlightInvalidData | `Workbook.options.highlightInvalidData = value` | `boolean` |  |
| referenceStyle | `Workbook.options.referenceStyle = value` | `GC.Spread.Sheets.ReferenceStyle` |  |
| backColor | `Workbook.options.backColor = value` | `string` |  |
| grayAreaBackColor | `Workbook.options.grayAreaBackColor = value` | `string` |  |
| backgroundImage | `Workbook.options.backgroundImage = value` | `string` |  |
| backgroundImageLayout | `Workbook.options.backgroundImageLayout = value` | `GC.Spread.Sheets.ImageLayout` |  |
| resizeZeroIndicator | `Workbook.options.resizeZeroIndicator = value` | `GC.Spread.Sheets.ResizeZeroIndicator` |  |
| showVerticalScrollbar | `Workbook.options.showVerticalScrollbar = value` | `boolean` |  |
| showHorizontalScrollbar | `Workbook.options.showHorizontalScrollbar = value` | `boolean` |  |
| ShowScrollTip | `Workbook.options.showScrollTip = value` | `GC.Spread.Sheets.ShowScrollTip` |  |
| ShowResizeTip | `Workbook.options.showResizeTip = value` | `GC.Spread.Sheets.ShowResizeTip` |  |
| showDragDropTip | `Workbook.options.showDragDropTip = value` | `boolean` |  |
| showDragFillTip | `Workbook.options.showDragFillTip = value` | `boolean` |  |
| showDragFillSmartTag | `Workbook.options.showDragFillSmartTag = value` | `boolean` |  |
| scrollbarShowMax | `Workbook.options.scrollbarShowMax = value` | `boolean` |  |
| scrollbarMaxAlign | `Workbook.options.scrollbarMaxAlign = value` | `boolean` |  |
| scrollIgnoreHidden | `Workbook.options.scrollIgnoreHidden = value` | `boolean` |  |
| tabStripRatio | `Workbook.options.tabStripRatio = value` | `number` |  |
| tabNavigationVisible | `Workbook.options.tabNavigationVisible = value` | `boolean` |  |
| useTouchLayout | `Workbook.options.useTouchLayout = value` | `boolean` |  |
| hostStyle |  | ` any` | The host element style, the same as the angular’s style binding (such as width: 400px, height: 600px}. |
| hostClass |  | `string` | The class name of the host element. |

The following code sample shows how to use the sheet element:

```JavaScript
@Component({
      selector: 'my-app',
      template: `<gc-spread-sheets [backColor]="spreadBackColor" [hostStyle]="hostStyle">
                 </gc-spread-sheets>`,
    })
    export class AppComponent {
      spreadBackColor = 'aliceblue';
      hostStyle = {
          width: '800px',
          height: '600px'
      };
    }
```

The following table lists the sheet events:

| Attribute | SpreadJS API | Comments |
| --------- | ------------ | -------- |
| workbookInitialized |  | Returns the workbook instance, args {spread: workbook} |
| validationError | `GC.Spread.Sheets.Events.ValidationError` |  |
| cellClick | `GC.Spread.Sheets.Events.CellClick` |  |
| cellDoubleClick | `GC.Spread.Sheets.Events.CellDoubleClick` |  |
| enterCell | `GC.Spread.Sheets.Events.EnterCell` |  |
| leaveCell | `GC.Spread.Sheets.Events.LeaveCell` |  |
| valueChanged | `GC.Spread.Sheets.Events.ValueChanged` |  |
| topRowChanged | `GC.Spread.Sheets.Events.TopRowChanged` |  |
| leftColumnChanged | `GC.Spread.Sheets.Events.LeftColumnChanged` |  |
| invalidOperation | `GC.Spread.Sheets.Events.InvalidOperation` |  |
| rangeFiltering | `GC.Spread.Sheets.Events.RangeFiltering` |  |
| rangeFiltered | `GC.Spread.Sheets.Events.RangeFiltered` |  |
| tableFiltering | `GC.Spread.Sheets.Events.TableFiltering` |  |
| tableFiltered | `GC.Spread.Sheets.Events.TableFiltered` |  |
| rangeSorting | `GC.Spread.Sheets.Events.RangeSorting` |  |
| rangeSorted | `GC.Spread.Sheets.Events.RangeSorted` |  |
| clipboardChanging | `GC.Spread.Sheets.Events.ClipboardChanging` |  |
| clipboardChanged | `GC.Spread.Sheets.Events.ClipboardChanged` |  |
| clipboardPasting | `GC.Spread.Sheets.Events.ClipboardPasting` |  |
| clipboardPasted | `GC.Spread.Sheets.Events.ClipboardPasted` |  |
| columnWidthChanging | `GC.Spread.Sheets.Events.ColumnWidthChanging` |  |
| columnWidthChanged | `GC.Spread.Sheets.Events.ColumnWidthChanged` |  |
| rowHeightChanging | `GC.Spread.Sheets.Events.RowHeightChanging` |  |
| rowHeightChanged | `GC.Spread.Sheets.Events.RowHeightChanged` |  |
| dragDropBlock | `GC.Spread.Sheets.Events.DragDropBlock` |  |
| dragDropBlockCompleted | `GC.Spread.Sheets.Events.DragDropBlockCompleted` |  |
| dragFillBlock | `GC.Spread.Sheets.Events.DragFillBlock` |  |
| dragFillBlockCompleted | `GC.Spread.Sheets.Events.DragFillBlockCompleted` |  |
| editStarting | `GC.Spread.Sheets.Events.EditStarting` |  |
| editChange | `GC.Spread.Sheets.Events.EditChange` |  |
| editEnding | `GC.Spread.Sheets.Events.EditEnding` |  |
| editEnd | `GC.Spread.Sheets.Events.EditEnd` |  |
| editEnded | `GC.Spread.Sheets.Events.EditEnded` |  |
| rangeGroupStateChanging | `GC.Spread.Sheets.Events.RangeGroupStateChanging` |  |
| rangeGroupStateChanged | `GC.Spread.Sheets.Events.RangeGroupStateChanged` |  |
| selectionChanging | `GC.Spread.Sheets.Events.SelectionChanging` |  |
| selectionChanged | `GC.Spread.Sheets.Events.SelectionChanged` |  |
| sheetTabClick | `GC.Spread.Sheets.Events.SheetTabClick` |  |
| sheetTabDoubleClick | `GC.Spread.Sheets.Events.SheetTabDoubleClick` |  |
| sheetNameChanging | `GC.Spread.Sheets.Events.SheetNameChanging` |  |
| sheetNameChanged | `GC.Spread.Sheets.Events.SheetNameChanged` |  |
| userZooming | `GC.Spread.Sheets.Events.UserZooming` |  |
| userFormulaEntered | `GC.Spread.Sheets.Events.UserFormulaEntered` |  |
| cellChanged | `GC.Spread.Sheets.Events.CellChanged` |  |
| columnChanged | `GC.Spread.Sheets.Events.ColumnChanged` |  |
| rowChanged | `GC.Spread.Sheets.Events.RowChanged` |  |
| activeSheetChanging | `GC.Spread.Sheets.Events.ActiveSheetChanging` |  |
| activeSheetChanged | `GC.Spread.Sheets.Events.ActiveSheetChanged` |  |
| sparklineChanged | `GC.Spread.Sheets.Events.SparklineChanged` |  |
| rangeChanged | `GC.Spread.Sheets.Events.RangeChanged` |  |
| buttonClicked | `GC.Spread.Sheets.Events.ButtonClicked` |  |
| editorStatusChanged | `GC.Spread.Sheets.Events.EditorStatusChanged` |  |
| floatingObjectChanged | `GC.Spread.Sheets.Events.FloatingObjectChanged` |  |
| floatingObjectSelectionChanged | `GC.Spread.Sheets.Events.FloatingObjectSelectionChanged` |  |
| pictureChanged | `GC.Spread.Sheets.Events.PictureChanged` |  |
| floatingObjectRemoving | `GC.Spread.Sheets.Events.FloatingObjectRemoving` |  |
| floatingObjectRemoved | `GC.Spread.Sheets.Events.FloatingObjectRemoved` |  |
| pictureSelectionChanged | `GC.Spread.Sheets.Events.PictureSelectionChanged` |  |
| floatingObjectLoaded | `GC.Spread.Sheets.Events.FloatingObjectLoaded` |  |
| touchToolStripOpening | `GC.Spread.Sheets.Events.TouchToolStripOpening` |  |
| commentChanged | `GC.Spread.Sheets.Events.CommentChanged` |  |
| commentRemoving | `GC.Spread.Sheets.Events.CommentRemoving` |  |
| commentRemoved | `GC.Spread.Sheets.Events.CommentRemoved` |  |
| slicerChanged | `GC.Spread.Sheets.Events.SlicerChanged` |  |

The following code sample uses an event.

```JavaScript
@Component({
      selector: 'my-app',
      template: `<gc-spread-sheets (workbookInitialized)="workbookInit($event)"
                                   (validationError)="validationError($event)">
                 </gc-spread-sheets>`,
    })
    export class AppComponent {
      workbookInit (args) {
          //do something
      }
      validationError (args) {
          //do something
      }
    }
```

The following table lists the child elements:

| Child Element | SpreadJS API | Count |
| ------------- | ------------ | ----- |
| gc-worksheet | `GC.Spread.Sheets.Worksheet` | any |