Grid properties.
행과 열의 데이터 계약, 속성 설정, 크기와 데이터 갱신을 함께 이해하세요.
빠르게 이해하기
표를 구성하는 것은 열의 설명과 행의 값입니다. 제품 열은 어떤 이름으로 표시할지 정하고, 각 주문 행은 그 제품의 실제 값을 갖습니다.
앱에서 연결하는 순서
- 열과 값 연결
열의 field를 product로 지정하면 각 행의 product 값을 읽습니다. headerName은 사용자에게 보이는 제목으로 제품을 지정합니다.
- 행의 고유 이름 부여
각 주문에 id를 두고 getRowId가 그 값을 반환하게 하세요. 정렬 후 위치가 바뀌어도 같은 주문을 찾을 수 있습니다.
- 종류에 맞게 설정
height 같은 단순 값은 HTML 속성으로 지정할 수 있습니다. 행 배열·열 배열·함수는 JavaScript 프로퍼티에 직접 전달하세요.
데이터의 어떤 값이 어떤 열에 표시되는지 예측할 수 있고 갱신·선택·복원에도 같은 ID를 사용할 수 있습니다.
화면의 첫 행 번호를 주문 ID로 사용하지 마세요. 순서와 관계없이 업무 대상을 구분할 수 있는 값을 사용합니다.
알아두면 쉬운 용어
- field / headerName
- 행에서 값을 읽을 키 / 사용자에게 보일 열 제목입니다.
- 프로퍼티
- JavaScript로 요소에 전달하는 값이며 배열·객체·함수도 받을 수 있습니다.
Attribute와 JavaScript 프로퍼티
#문자열·숫자는 attribute로 설정할 수 있습니다. 배열·객체·함수는 JavaScript 프로퍼티를 사용하세요. 불리언을 명시적으로 끌 때도 프로퍼티에 false를 할당하면 분명합니다.
<sy-grid id="orders" height="400" theme="alpine" locale="ko"></sy-grid>
<script type="module">
// 먼저 앱 진입 파일에서 sy-grid를 등록하세요.
await customElements.whenDefined('sy-grid');
const grid = document.querySelector('#orders');
grid.columnDefs = [{ field: 'product', headerName: '제품' }];
grid.rowData = [{ id: 'A-001', product: 'Atlas Sensor' }];
grid.getRowId = row => row.id;
grid.pagination = false;
</script>행과 열의 식별자
#행 순서가 바뀌어도 같은 업무 대상을 식별할 수 있도록 getRowId는 고유하고 안정적인 ID를 반환해야 합니다. 열의 field 또는 colId도 서로 구분되어야 합니다. 이 식별자는 트랜잭션·선택 유지·상태 복원의 기준입니다.
grid.getRowId = row => row.id;
grid.defaultColDef = { sortable: true };
grid.columnDefs = [
{ field: 'product', headerName: '제품', width: 200 },
{ field: 'quantity', headerName: '수량', editable: true, editor: 'number' }
];갱신과 크기
#전체 데이터가 바뀌면 새 배열을 할당하고, 일부 행만 바뀌면 안정적인 ID와 함께 applyTransaction을 사용하세요. Grid는 컨테이너 너비를 따릅니다. height는 숫자(px) 또는 CSS 길이 문자열을 받습니다.
grid.height = '60vh';
grid.rowData = nextRows; // 조회 결과의 새 배열
const row = grid.rowData[0];
if (row) {
const result = await grid.applyTransaction({ update: [{ ...row, quantity: 25 }] });
console.log(result);
}열 정의 자체를 변경할 때도 새 배열을 전달하세요. 데이터 저장과 화면 상태 저장은 별도로 관리합니다. 상태 저장과 복원