syidaxgrid
홈 가격 내 정보
SYIDAX / DATA GRID

열 크기와 고정

열 경계를 드래그해 너비를 조절하고, 중요한 열을 좌우에 고정합니다.

시작하기
열 크기와 고정샘플 주문 데이터
120 rows
Grid를 불러오는 중입니다…

옵션

아래 항목을 바꾸면 Grid와 코드에 바로 반영됩니다.

최근 결과

주문 번호는 처음부터 왼쪽에 고정되어 있습니다. 표가 화면보다 넓을 때 가로 스크롤하면 다른 열이 이동해도 주문 번호는 남습니다.

코드 보기
현재 미리보기

사용 가이드

#

열이 많은 주문 목록에서 주문 번호를 계속 보면서 오른쪽의 금액을 확인할 때 유용합니다. 긴 제품명은 열 너비를 넓혀 읽을 수 있습니다.

직접 해보기

  1. 기본 고정 확인

    주문 번호는 처음부터 왼쪽에 고정되어 있습니다. 표가 화면보다 넓을 때 가로 스크롤하면 다른 열이 이동해도 주문 번호는 남습니다.

  2. 고정 위치 바꾸기

    표 아래의 제품 열 고정 위치를 왼쪽 고정 또는 오른쪽 고정으로 바꿔보세요. 고정 안 함을 선택하면 일반 열로 돌아갑니다.

  3. 너비 조절하기

    제품 열 너비에 280을 입력하거나 제품 헤더의 오른쪽 경계를 드래그하세요. 경계를 두 번 누르면 내용에 맞는 너비를 계산합니다.

확인할 결과

선택한 방향에 열이 고정되고, 제품 열의 너비가 즉시 달라집니다. 아래 입력값과 코드에서도 설정을 확인할 수 있습니다.

좁은 화면에서는 여러 열을 고정하면 나머지 열을 볼 공간이 줄어듭니다. 식별에 꼭 필요한 열부터 고정하세요.

알아두면 쉬운 용어

pinned
열을 left(왼쪽), right(오른쪽)에 고정하는 설정입니다.
width
열 너비이며 숫자의 단위는 px입니다.

핵심 API 예시

등록된 Grid 요소를 grid로 참조하는 앱 코드입니다.

await grid.setColumnPinned('id', 'left');
await grid.setColumnWidth('product', 220);

API reference

#

주요 속성

Attribute / Property타입 / 기본값설명
resizableColumns		boolean기본값 falseEnable draggable column resize handles.
reorderableColumns		boolean기본값 falseEnable header drag column reordering.
columnHiding		boolean기본값 falseEnable the runtime column visibility method surface.
나머지 속성2
Attribute / Property타입 / 기본값설명
hideableColumns		boolean기본값 false이름을 선택해 타입 계약을 확인하세요.
autoSizeOnDoubleClick		boolean기본값 trueEnable header double-click auto-size when column resizing is enabled.
이벤트3
이벤트detail 타입설명
GridColumnResizedDetailFires after a committed column resize.
GridColumnReorderedDetailFires after a committed column reorder.
GridColumnVisibilityChangedDetailFires after an effective column visibility change.
메서드17
메서드 / 인수반환 타입설명
colId: string, width: number		Promise<void>Set a column width, respecting min/max bounds.
colId: string		Promise<void>Clear a live column-width override.
colId: string		Promise<number | null>Read the effective width for a column id.
field: string, side: ColumnPinSide | null		Promise<void>pin/unpin a column at runtime (`null` = unpin). Unknown fields are rejected with a warning. `'right'` becomes fully functional on ; the model accepts it already so column state snapshots round-trip.
field: string		Promise<ColumnPinSide | null>effective pin side of a column (override-aware).
orderedColIds: string[]		Promise<void>Set the effective column order.
Promise<string[]>Read the effective column order.
colId: string		Promise<void>Hide a single column.
colId: string		Promise<void>Show a single column.
colId: string		Promise<boolean>Toggle a column's hidden state and return the new state.
colIds: string[]		Promise<void>Replace hidden-column state from a field list.
Promise<void>Clear all hidden-column state.
Promise<string[]>Read the current hidden-column ids.
colId: string		Promise<number | null>Auto-size a single column from visible content.
Promise<void>Auto-size every visible, resizable column.
Promise<ColumnStateEntry[]>Snapshot column width, order, visibility, (multi-)sort and pin state.
state: ColumnStateEntry[], opts?: ApplyColumnStateOptions		Promise<void>Restore column state from a snapshot.
ColumnDef9
ColumnDef타입 / 필수 여부설명
number선택Fixed column width in pixels.
number선택Lower bound for column width in pixels.
number선택Upper bound for column width in pixels.
number선택Flex factor — distributes leftover horizontal space (CSS-flex semantics).
boolean선택Per-column override for wrapper-level column resizing.
boolean선택Per-column override for wrapper-level column reordering.
'left' | 'right' | null선택pin this column to an edge: pinned columns render before (left) / after (right) the scrolling middle block and stick while it scrolls horizontally. Pinned columns need a concrete pixel width (`width` or a live resize); flex-sized pinned columns fall back to a 150px default. Runtime `setColumnPinned` overrides this declaration.
boolean선택Initial hidden state; runtime visibility state owns later changes.
boolean선택AG Grid compatibility alias for ; `hidden` wins when both are set.
GridTab 이동 Enter 열기