[Vue][AG-Grid] Grid-Interface에 대하여

조준형·2021년 10월 3일

AG-Grid vue

AG-Grid

목록 보기

2/9

📖 Grid Interface

https://www.ag-grid.com/vue-data-grid/grid-interface/
(이번글은 Grid Interface페이지를 보고 작성)

메서드, 속성 및 이벤트를 포함하여 애플리케이션이 그리드와 상호 작용하는 데 사용할 수 있는 공용 인터페이스에 대해 설명

Grid Properties : 그리드를 구성하는데 사용되는 속성
Grid API : 그리드가 생성된 후 그리드와 상호 작용하는데 사용되는 메소드
Grid Events : 애플리케이션에 상태 변경 사항을 알리기 위해 그리드에서 게시한 이벤트
Grid Callbacks : 그리드에서 애플리케이션에서 필요한 정보를 검색하는데 사용됨
Row node : 그리드의 각 행은 Row Ndoe객체로 표현되며, , Row Node 객체는 애플리케이션에서 제공하는 행 데이터에 대한 참조를 갖습니다.
행 노드는 행 데이터 항목을 래핑합니다.
특정 행과 상호작용 하기 위한 속성, 메소드 및 이벤트가 있음.

일단은 Properties, API, Events에 대해서만 알아볼 예정.

나머지는 공식문서를 참고하자.
https://www.ag-grid.com/vue-data-grid/grid-interface/

🌏 Properties, Events, Callbacks and APIs

Attributes : attributes는 properties지만, 바인딩되지 않음. 대신 리터럴 값이 제공됨.
ex) rowSelection="multiple"

Properties : properties는 바인딩 되는 속성.
ex) :columnDefs = "columnDefs"

Callback : 바인딩이 가능.
ex) isScrollLag = "myIsScrollLagFunction"

Event Handler : 표준 Angular 방식으로 바인딩됨. 이때 이벤트 이름은 kabab-case를 사용.
ex) @cell-clicked="onCellClicked"

API : 그리드 API와 컬럼API는 컴포넌트를 통해 접근 가능.

🌏 Grid & Column API에 접근

그리드가 초기화되면 gridReady이벤트가 발생함.

그리드 API를 사용하려면 그리드에 onGridReady(params)콜백을 넣고, params에서 API를 가져와야함.
그 후 나중에 API를 호출하여 그리드와 상호작용. (속성을 설정하고 변경하여 수행할 수 있는 상호 작용 외에도)

무슨 소리인지 아래 코드를 보자.

<ag-grid-vue
...
    @grid-ready="onGridReady"
...
/>
<script>
onGridReady = (params) => {
    this.api = params.api;
    this.columnApi = params.columnApi;
}
</script>

이처럼 ag-grid-vue에서 콜백을 넣고, params에서 API를 가져와 그다음 API를 호출하여 사용한다.

🌏 Grid Options

그리드 옵션은 일반 프레임워크 바인딩 대신 또는 추가로 사용할 수 있습니다.

<ag-grid-vue
    :gridOptions="gridOptions"
	...
/>
...
const gridOptions = {
    // PROPERTIES
    // Objects like myRowData and myColDefs would be created in your application
    rowData: myRowData,
    columnDefs: myColDefs,
    pagination: true,
    rowSelection: 'single',

    // EVENTS
    // Add event handlers
    onRowClicked: event => console.log('A row was clicked')
    onColumnResized: event => console.log('A column was resized')
    onGridReady: event => console.log('The grid is now ready')

    // CALLBACKS
    isScrollLag: () => false
}

그리드가 초기화 되면 그리드API및 columnAPI에 엑세스가 가능.

// refresh the grid
this.gridOptions.api.refreshView();

// resize columns in the grid to fit the available space
this.gridOptions.columnApi.sizeColumnsToFit();