# Column 요소

## Content

다음 표는 gc-column 요소들을 나열한 것입니다.

| 속성 | SpreadJS API | 타입 | 코멘트 |
| --- | ------------ | --- | --- |
| dataField | `columnInfo.name` | `string` | Worksheet.bindColumn(index, columnInfo) 함수에 설정합니다. |
| headerText | `columnInfo.displayName` | `string` | Worksheet.bindColumn(index, columnInfo) 함수에 설정합니다. |
| width | `CellRange.width(value)` | `number` |  |
| visible | `CellRange.visible(value)` | `boolean` |  |
| resizable | `CellRange.resizable(value)` | `boolean` |  |
| autoFit | `Worksheet.autoFitColumn(column)` | `boolean` | autoFit이 true이면, 데이터 바인딩 후 열에 자동 맞춤이 적용됩니다. |
| style | `Worksheet.setStyle(-1, index, value)` | `GC.Spread.Sheets.Style` | 열 스타일 설정하기 |
| headerStyle | `Worksheet.setStyle(-1, index, value, GC.Spread.Sheet.GC.Spread.Sheets.SheetArea.colHeader)` | `GC.Spread.Sheets.Style` | 열 헤더 스타일 설정하기 |
| cellType | `Worksheet.setCellType(-1, index, value)` | `GC.Spread.Sheets.CellTypes.Base` |  |
| formatter | `Worksheet.setFormatter(-1, index, value)` | `string` |  |

다음 코드 예제는 column 요소를 사용하는 방법을 보여줍니다.

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