GRID FEATURE
행 번호와 데이터 ID
행 번호는 화면에서 순서를 읽는 보조 정보이고 주문 ID는 업무 데이터를 식별하는 값입니다. 정렬 후에도 같은 숫자를 유지할지 현재 표시 순서를 다시 매길지 먼저 정해야 합니다.
동작 원리와 선택 기준
별도의 rowNumbers 스위치를 임의로 만들지 말고 데이터나 사용자 정의 열을 통해 목적에 맞는 번호를 구성합니다. API 인수의 rowIndex 역시 업무 ID와 다릅니다.
코드의 grid는 설치와 연결 장에서 준비한 Grid 요소입니다. 예제마다 필요한 데이터·설정을 확인하고, 코드에서 소개하는 앱 함수와 서버 주소는 프로젝트에 맞게 구현하세요.
예제 1. 수신 순번 표시
조회된 순서를 기록할 때 데이터에 순번을 추가합니다.
grid.rowData = grid.rowData.map((row, index) => ({ ...row, receivedNo: index + 1 }));
grid.columnDefs = [{ field: 'receivedNo', headerName: '수신 순번', editable: false }, ...grid.columnDefs];결과 확인: 정렬해도 수신 순번은 같은 주문에 남습니다. 현재 화면의 1번째 행 번호를 뜻하지 않습니다.
예제 2. 행 위치로 조회
현재 표시 첫 행을 읽는 API는 0부터 시작하는 인덱스를 받습니다.
console.log(await grid.getDisplayedRowAtIndex(0));결과 확인: 표시 순서와 연결된 행 객체를 읽습니다. 정렬 전 배열의 첫 항목과 일치하지 않을 수 있습니다.
예제 3. 페이지 사이 번호 정책
한 페이지가 20행이면 다음 페이지의 첫 표시 번호를 21로 할지 1로 할지 앱에서 정합니다. 서버 페이지에서는 전체 결과의 위치 정보도 함께 필요합니다.
결과 확인: 사용자가 번호를 주문 식별자로 오해하지 않도록 제목에 표시 순번 또는 수신 순번처럼 의미를 명시합니다.
조합할 때와 문제를 해결할 때
순번을 getRowId로 사용하면 추가·삭제·정렬 때 같은 주문의 정체성이 흔들릴 수 있습니다. 서버의 주문 ID를 별도로 유지하세요.
그룹 헤더와 상세 행까지 번호에 포함할지도 정해야 합니다. 원본 주문 수와 화면에 그려지는 행 수는 다를 수 있습니다.