syidaxgrid
홈 가격 내 정보

GRID FEATURE

열 크기와 고정

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

Markdown 원문 Features

동작 원리와 선택 기준

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

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

예제 1. 중요한 열을 고정

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

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

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

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

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

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

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

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

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

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

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

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

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

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

함께 읽기