[ React ] aggrid 소계, 합계 row 추가하기

그리드 내에서 소계와 합계를 내고 싶을 때 ! 

column sum은 나오는데, row sum은 pinnedBottomRowdata를 사용해서 하는 예시만 보였다.

https://dong-queue.tistory.com/69

vue ag Grid 합계 지정 하기

단점은.. 데이터 불러올 때 따로 합계를 내야 한다는 것.

그리고 소계를 구현하기 어렵다는 것.

 

그래서 다시 aggrid를 뒤졌는데, 딱 원하던 걸 발견했다. 

 

 

https://www.ag-grid.com/react-data-grid/grouping-footers/

React Data Grid: Row Grouping - Group Footers

 

내용은 생각보다 간단하다.

 

    const defaultColDef = useMemo<ColDef>(() => {
        return {
            flex: 1,
            minWidth: 150,
            sortable: true,
            resizable: true
        };
    }, []);
    const autoGroupColumnDef = useMemo<ColDef>(() => {
        return {
            minWidth: 150
        };
    }, []);

 

	defaultColDef,
        autoGroupColumnDef,
        groupIncludeFooter: true,
        groupIncludeTotalFooter: true,
        animateRows: true

그리드 속성에 추가. 

여기서 groupDefaultExpanded : 1을 추가해주면 그룹화된 것을 모두 쭉 나열해서 볼 수 있다. 

뎁스가 2가 되면, 2로 쓰면 된다. 

 

rowGroup: true

그룹화 하고자 하는 칼럼 속성에 추가.

 

 

aggFunc: 'sum'

sum 돼서 보여주길 원하는 컬럼 속성에 추가.

 

 

자세한 내용은 위 aggrid 링크에서 소스를 확인하면 될 것 같다.