[javascript] SlickGrid의 행에 대한 고정 컬럼

01 Dec 2023

javascript

SlickGrid은 유연하고 뛰어난 성능을 가진 JavaScript/HTML 기반의 그리드 컴포넌트입니다. 이 그리드에서는 고정 컬럼을 사용하여 특정 열을 스크롤해도 항상 보여주는 기능을 제공합니다.

고정 컬럼 설정하기

SlickGrid에서는 FrozePane 플러그인을 사용하여 고정 컬럼을 설정할 수 있습니다. 이 플러그인은 특정 열을 왼쪽에 고정하는 역할을 담당합니다.

아래는 SlickGrid에서 고정 컬럼을 설정하는 예제 코드입니다.

var options = {
    enableCellNavigation: true,
    enableColumnReorder: false,
    frozenColumn: 2 // 왼쪽으로 고정할 열의 인덱스
};

var columns = [
    { id: "column1", name: "Column 1", field: "column1", width: 200, frozen: true },
    { id: "column2", name: "Column 2", field: "column2", width: 200, frozen: true },
    // ...
];

var data = [
    { column1: "Data 1-1", column2: "Data 1-2", /* ... */ },
    { column1: "Data 2-1", column2: "Data 2-2", /* ... */ },
    // ...
];

var grid = new Slick.Grid("#myGrid", data, columns, options);

위의 코드에서 frozenColumn 속성을 사용하여 몇 번째 열까지를 고정할지 지정할 수 있습니다. columns 배열에서 frozen: true 속성을 사용하여 고정할 열을 지정합니다.

이제 위의 코드를 실행하면 지정한 열들이 항상 화면 왼쪽에 고정되어 나타납니다.

결론

SlickGrid은 JavaScript 기반의 그리드 컴포넌트로써, 고정 컬럼을 사용하여 특정 열을 스크롤해도 항상 보여주는 기능을 제공합니다. 위에서 설명한 예제 코드를 통해 쉽게 고정 컬럼을 설정할 수 있습니다. 자세한 내용은 SlickGrid 공식 문서를 참고해주세요.