# Column Element

## Content

The following table lists the gc-column elements:

| Attribute | SpreadJS 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 code sample uses the column element.

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