실시간 열 API

사용자가 열 너비나 표시 순서를 바꿨을 때 앱에서도 현재 열 구성을 읽고 싶다면 열 API를 사용합니다. 열을 설명하는 설정과 화면에서 동작 중인 열 객체를 구분하는 것이 핵심입니다.

앱에서 연결하는 순서

1. 화면에서 열 바꾸기

   위 표에서 제품 헤더 경계를 드래그해 너비를 바꿔보세요. 실행 결과의 columnResized에서 변경 전후 너비를 볼 수 있습니다.

2. 현재 열 상태 조회

   표 위 열 상태 조회를 누르면 실행 결과에 현재 너비·순서·고정 상태가 표시됩니다. 제품 너비나 고정 위치를 바꾸고 다시 조회해 비교하세요.

3. 저장할 값 따로 읽기

   너비·순서·고정 상태를 저장하려면 getColumnState()를 호출하세요. 현재 열 객체 자체를 JSON으로 저장하는 대신 이 상태 배열을 사용합니다.

열 상태 조회는 getColumnState()를 호출합니다. 앱에서 현재 열 객체가 필요하면 getColumn('product') 또는 getColumns()를 사용하세요. 없는 이름을 조회하면 null이 돌아올 수 있습니다.

알아두면 쉬운 용어

field / colId

product처럼 열을 찾을 때 쓰는 이름입니다.

열 객체 / 열 상태

열 객체는 현재 Grid와 연결된 참조이고, 열 상태는 저장하기 위한 값의 모음입니다.

핵심 API 예시

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

const column = await grid.getColumn('product');
const columns = await grid.getColumns();
const savedColumns = await grid.getColumnState();
console.log(column, columns, savedColumns);