# 열 크기와 고정

너비·순서·고정·숨김은 서로 독립적인 열 상태입니다. 주문 번호는 고정하고 보조 정보는 숨기며 긴 제품명만 넓히는 식으로 조합할 수 있습니다.

Canonical: https://grid.syidax.com/ko/docs/features/column-operations/

<a id="understand"></a>

## 동작 원리와 선택 기준

초기 열 정의에 기본값을 선언하고 사용 중 변경에는 열 메서드를 사용합니다. 사용자 선택을 보관하려면 columnDefs 원본보다 현재 getColumnState 결과를 저장하세요.

코드의 grid는 설치와 연결 장에서 준비한 Grid 요소입니다. 예제마다 필요한 데이터·설정을 확인하고, 코드에서 소개하는 앱 함수와 서버 주소는 프로젝트에 맞게 구현하세요.

- [설치와 연결 · 공통 예제 데이터](https://grid.syidax.com/ko/docs/guides/getting-started.md)

<a id="example-1"></a>

## 예제 1. 중요한 열을 고정

가로 스크롤 중에도 주문을 식별할 수 있도록 왼쪽에 ID를 고정합니다.

```javascript
await grid.setColumnPinned('id', 'left');
await grid.setColumnWidth('product', 280);
```

결과 확인: ID 열은 왼쪽에 남고 제품 열은 280px이 됩니다. 좌우 고정 열이 너무 많으면 가운데 열을 볼 공간이 줄어듭니다.

<a id="example-2"></a>

## 예제 2. 간단 보기와 상세 보기

단가가 필요 없는 사용자는 price 열을 숨깁니다. 데이터 필드를 지우는 작업은 아닙니다.

```javascript
await grid.hideColumn('price');
console.log(await grid.getHiddenColumns());
// 상세 보기로 돌아갈 때
await grid.showColumn('price');
```

결과 확인: 표의 열 표시만 바뀝니다. 보안을 위해 값을 숨겨야 하는 상황이라면 권한 설정과 서버 데이터 제한을 함께 사용합니다.

<a id="example-3"></a>

## 예제 3. 내용 길이에 맞춰 너비 계산

필요한 열만 자동 너비를 적용하고 현재 열 구성을 저장합니다.

```javascript
await grid.autoSizeColumn('product');
const savedColumns = await grid.getColumnState();
console.log(savedColumns);
// 같은 열 ID를 준비한 다른 시점에 복원
await grid.applyColumnState(savedColumns);
```

결과 확인: 현재 내용에 맞춘 너비와 열 상태를 읽을 수 있습니다. 열의 ID가 달라진 상태에서는 일부 설정을 적용할 수 없습니다.

<a id="pitfalls"></a>

## 조합할 때와 문제를 해결할 때

width와 minWidth·maxWidth를 함께 설정하면 허용 범위가 자동 크기 계산에도 영향을 줄 수 있습니다. flex로 남은 공간을 나누는 열은 고정 너비 열과 구분하세요.

재정렬한 화면에서 columnDefs를 이전 배열로 다시 할당하면 사용자가 바꾼 구성을 덮어쓸 수 있습니다. 앱이 초기값과 사용자 상태 중 무엇을 우선할지 정하세요.

<a id="related-api"></a>

## 이 기능에 사용하는 API

- [resizableColumns](https://grid.syidax.com/ko/docs/options/resizableColumns.md) — 사용자가 열 경계를 드래그해 너비를 바꿀 수 있게 합니다.
- [reorderableColumns](https://grid.syidax.com/ko/docs/options/reorderableColumns.md) — 사용자가 머리글을 드래그해 열 순서를 바꿀 수 있게 합니다.
- [columnHiding](https://grid.syidax.com/ko/docs/options/columnHiding.md) — 열 숨김 기능을 활성화합니다. 숨긴 열을 복원할 메뉴나 패널도 함께 제공합니다.
- [hideableColumns](https://grid.syidax.com/ko/docs/options/hideableColumns.md) — 열 숨김 기능의 호환 설정입니다. columnHiding과 일관된 값으로 사용합니다.
- [autoSizeOnDoubleClick](https://grid.syidax.com/ko/docs/options/autoSizeOnDoubleClick.md) — 열 경계 두 번 클릭으로 내용에 맞는 자동 너비를 적용합니다.
- [width](https://grid.syidax.com/ko/docs/columns/width.md) — 열의 초기 너비를 픽셀로 지정합니다.
- [minWidth](https://grid.syidax.com/ko/docs/columns/minWidth.md) — 사용자 조정과 자동 크기 계산에서 허용할 최소 너비입니다.
- [maxWidth](https://grid.syidax.com/ko/docs/columns/maxWidth.md) — 열 너비의 상한입니다.
- [flex](https://grid.syidax.com/ko/docs/columns/flex.md) — 남는 공간을 나눠 가질 상대 비율입니다. 고정 너비·최소·최대 너비와 함께 확인합니다.
- [resizable](https://grid.syidax.com/ko/docs/columns/resizable.md) — 이 열의 너비를 사용자가 조절할 수 있는지 정합니다.
- [reorderable](https://grid.syidax.com/ko/docs/columns/reorderable.md) — 이 열의 위치를 사용자가 바꿀 수 있는지 정합니다.
- [pinned](https://grid.syidax.com/ko/docs/columns/pinned.md) — 열을 왼쪽·오른쪽에 고정하거나 null로 고정을 해제합니다.
- [hidden](https://grid.syidax.com/ko/docs/columns/hidden.md) — 이 열을 처음에 숨길지 설정합니다. 값 읽기 권한을 차단하는 설정은 아닙니다.
- [hide](https://grid.syidax.com/ko/docs/columns/hide.md) — 열 숨김의 호환 이름입니다. hidden과 모순된 값으로 중복 지정하지 마세요.
- [setColumnWidth](https://grid.syidax.com/ko/docs/methods/setColumnWidth.md) — 현재 열 너비를 지정합니다. 열의 최소·최대 너비 제한을 함께 확인합니다.
- [resetColumnWidth](https://grid.syidax.com/ko/docs/methods/resetColumnWidth.md) — 지정한 열의 사용자 너비 변경을 초기 설정으로 되돌립니다.
- [getColumnWidth](https://grid.syidax.com/ko/docs/methods/getColumnWidth.md) — 현재 열 너비를 읽습니다. 대상 열이 없으면 null입니다.
- [setColumnPinned](https://grid.syidax.com/ko/docs/methods/setColumnPinned.md) — 열을 왼쪽·오른쪽에 고정하거나 고정을 해제합니다.
- [getColumnPinned](https://grid.syidax.com/ko/docs/methods/getColumnPinned.md) — 현재 열 고정 방향을 읽습니다.
- [setColumnOrder](https://grid.syidax.com/ko/docs/methods/setColumnOrder.md) — 열 ID 목록으로 표시 순서를 지정합니다.
- [getColumnOrder](https://grid.syidax.com/ko/docs/methods/getColumnOrder.md) — 현재 열 표시 순서의 ID 목록을 읽습니다.
- [hideColumn](https://grid.syidax.com/ko/docs/methods/hideColumn.md) — 지정한 열을 숨깁니다. 원본 데이터를 삭제하거나 읽기 권한을 차단하지 않습니다.
- [showColumn](https://grid.syidax.com/ko/docs/methods/showColumn.md) — 숨겨진 열을 표시합니다.
- [toggleColumnVisibility](https://grid.syidax.com/ko/docs/methods/toggleColumnVisibility.md) — 열 표시 여부를 반전하고 결과 상태를 반환합니다.
- [setHiddenColumns](https://grid.syidax.com/ko/docs/methods/setHiddenColumns.md) — 숨길 열 목록을 한 번에 지정합니다.
- [resetColumnVisibility](https://grid.syidax.com/ko/docs/methods/resetColumnVisibility.md) — 열 표시 상태를 초기 설정으로 되돌립니다.
- [getHiddenColumns](https://grid.syidax.com/ko/docs/methods/getHiddenColumns.md) — 현재 숨겨진 열의 식별자 목록을 읽습니다.
- [autoSizeColumn](https://grid.syidax.com/ko/docs/methods/autoSizeColumn.md) — 현재 측정할 수 있는 내용에 맞춰 한 열의 너비를 계산하고 적용합니다.
- [autoSizeAllColumns](https://grid.syidax.com/ko/docs/methods/autoSizeAllColumns.md) — 각 열에 자동 너비 계산을 적용합니다. 서버 미로드 값까지 측정할 수 있다고 가정하지 마세요.
- [getColumnState](https://grid.syidax.com/ko/docs/methods/getColumnState.md) — 열 너비·순서·표시·정렬·고정 상태를 저장 가능한 배열로 읽습니다.
- [applyColumnState](https://grid.syidax.com/ko/docs/methods/applyColumnState.md) — 저장한 열 상태를 복원합니다. 현재 열 식별자와 일치하는지 확인하세요.
- [columnResized](https://grid.syidax.com/ko/docs/events/columnResized.md) — 열 너비가 바뀌었을 때 발생합니다. 현재 너비를 화면 상태 저장에 반영합니다.
- [columnReordered](https://grid.syidax.com/ko/docs/events/columnReordered.md) — 열 순서가 바뀌었을 때 발생합니다.
- [columnVisibilityChanged](https://grid.syidax.com/ko/docs/events/columnVisibilityChanged.md) — 열 표시·숨김 상태가 바뀌었을 때 발생합니다.

<a id="next"></a>

## 함께 읽기

- [행·열·ID의 관계](https://grid.syidax.com/ko/docs/guides/concepts.md)
- [결과와 이벤트 연결](https://grid.syidax.com/ko/docs/guides/data-event-access.md)
- [Features에서 살펴보기](https://grid.syidax.com/grid/column-operations) — 직접 체험 가능한 범위는 해당 가이드에 안내되어 있습니다.