Spread.Sheets Documentation
Understanding the Column Element
Spread.Sheets Documentation > Developer's Guide > Working with JavaScript Frameworks > Using Spread.Sheets with Angular > Understanding the Column Element

The following table lists the gc-column elements:

Attribute Spread.Sheets API Type Comment
dataField columnInfo.name string Set for Worksheet.bindColumn(index, columnInfo) function
headerText columnInfo.displayName string Set for Worksheet.bindColumn(index, columnInfo) function
width CellRange.width(value) number  
visible CellRange.visible(value) boolean  
resizable CellRange.resizable(value) boolean  
autoFit Worksheet.autoFitColumn(column) boolean If autoFit is true, the column applies automatic fit after data binding
style Worksheet.setStyle(-1, index, value) GC.Spread.Sheets.Style Set the column style
headerStyle Worksheet.setStyle(-1, index, value, GC.Spread.Sheet.GC.Spread.Sheets.SheetArea.colHeader) GC.Spread.Sheets.Style Set the column header style
cellType Worksheet.setCellType(-1, index, value) GC.Spread.Sheets.CellTypes.Base  
formatter Worksheet.setFormatter(-1, index, value) string  

The following example uses the column element:

JavaScript
Copy Code
@Component({
      selector: 'my-app',
      template: `<gc-spread-sheets>
                      <gc-worksheet>
                          <gc-column [width]="columnWidth" [style]="columnStyle"></gc-column>
                      </gc-worksheet>
                 </gc-spread-sheets>`,
    })
    export class AppComponent {
        columnWidth: 300;
        columnStyle = new GC.Spread.Sheets.Style();
    }