Web Components Grid Lite Data Binding

Grid Lite는 단순한 객체 배열을 데이터 소스로 받아들입니다. 각 그리드 행은 배열 내 데이터 레코드의 렌더링된 표현이며, 행 셀은 열 구성에 의해 제어됩니다.

정렬 및 필터링과 같은 데이터 변환을 적용할 때, 그리드는 원래 데이터 참조를 수정하지 않습니다. 즉, 데이터 변환은 원본 소스에 반영되지 않습니다. 그리드는 데이터 배열 내 객체의 변화를 추적하지 않으므로 데이터 객체의 직접적인 수정은 반영되지 않습니다.

Change the Data Source at Runtime

이 컴포넌트는 런타임에 데이터 소스를 변경하는 것을 지원합니다. 새 소스가 이전 것과 다른 '형태'를 가지고 있다면 컬럼 구성도 반드시 업데이트하세요.

grid.data = [...{
  /** records follow */
}];

<igc-grid-lite>
    <!-- Update column configuration, add or remove columns as needed to represent the new data. -->
    <igc-grid-lite-column field="id"></igc-grid-lite-column>
</igc-grid-lite>

If the grid has autoGenerate enabled, it will "infer" the new column configuration automatically when the data changes.

grid.autoGenerate = true;

/** After the new binding the grid will infer the column collection from the bound data. */
grid.data = [];

[!NOTE] The sort/filter states of the Grid Lite are kept when changing the data source in this manner. Usually you will want to reset them by calling either clearSort() and/or clearFilter().

아래 샘플에서는 격자가 열의 자동 생성이 활성화되어 있습니다. 데이터 전환 버튼을 클릭하면 열 컬렉션이 초기화되고 새로운 데이터 소스가 그리드에 바인딩됩니다.

Additional Resources

• Column Configuration
• 정렬
• 필터링
• 테마 및 스타일링

우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.

• Grid Lite GitHub