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(); }

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();
    }