[javascript] SlickGrid의 그룹화 기능

01 Dec 2023

javascript

SlickGrid는 웹 기반의 JavaScript 그리드 라이브러리로써, 다양한 유연한 기능을 제공합니다. 그중에서도 그룹화 기능은 데이터를 그룹 단위로 표시하고 조작할 수 있는 강력한 기능입니다.

그룹화 기능의 사용법

SlickGrid에서 그룹화 기능을 사용하려면 다음과 같은 단계를 따라야 합니다.

표시할 데이터를 정의합니다.
그룹화할 열을 설정합니다.
그룹화된 데이터를 생성합니다.

데이터 정의하기

먼저, 그룹화할 데이터를 정의해야 합니다. SlickGrid는 일반적으로 JavaScript 객체의 배열로 데이터를 표현합니다. 예를 들어, 다음과 같이 데이터를 정의할 수 있습니다.

var data = [
    { id: 1, name: "John", age: 25, department: "HR" },
    { id: 2, name: "Jane", age: 30, department: "Sales" },
    { id: 3, name: "Tom", age: 35, department: "HR" },
    // ...
];

열 설정하기

다음으로, 그룹화할 열을 설정해야 합니다. SlickGrid는 컬럼 객체를 사용하여 각 열의 속성을 정의합니다. 그룹화할 열을 정의하는 방법은 다음과 같습니다.

var columns = [
    { id: "id", name: "ID", field: "id" },
    { id: "name", name: "Name", field: "name" },
    { id: "age", name: "Age", field: "age" },
    { id: "department", name: "Department", field: "department", groupTotalsFormatter: groupTotalsFormatter }
];

그룹화된 데이터 생성하기

마지막으로, 그룹화된 데이터를 생성합니다. 이를 위해서는 SlickGrid의 GroupItemMetadataProvider를 사용해야 합니다.

var dataView = new Slick.Data.DataView();
dataView.setItems(data);
dataView.setGrouping({
    getter: "department", // 그룹화할 열의 속성
    aggregators: [
        new Slick.Data.Aggregators.Sum("age") // 그룹화된 열의 값을 집계할 방법
    ],
    formatter: groupFormatter, // 그룹 레이블의 출력 형식
    comparer: function (a, b) {
        return a.value - b.value; // 그룹의 정렬 순서를 결정하는데 사용되는 비교 함수
    },
    aggregateCollapsed: false // 그룹이 축소될 때 집계 값 표시 여부
});

Conclusion

SlickGrid의 그룹화 기능은 데이터를 그룹 단위로 표시하고 조작할 수 있는 강력한 기능을 제공합니다. 그룹화 기능을 사용하면 데이터의 시각적인 구조를 더욱 명확하게 표현할 수 있고, 필요한 경우 그룹별로 집계한 값을 표시할 수도 있습니다. SlickGrid의 다양한 기능과 함께 그룹화 기능을 활용하여 보다 효율적이고 유연한 웹 그리드를 개발해보세요.

References

SlickGrid Documentation