Colin's Blog
[javascript] SlickGrid의 컬럼 설정

SlickGrid은 JavaScript를 사용하여 데이터 그리드를 생성하기 위한 강력한 라이브러리입니다. 이 라이브러리를 사용하면 다양한 컬럼 설정을 적용하여 데이터를 효과적으로 표시할 수 있습니다.

컬럼 정의

SlickGrid의 각 컬럼은 컬럼 객체로 정의됩니다. 각 컬럼 객체에는 컬럼의 속성을 설정할 수 있습니다. 아래는 일반적인 컬럼 속성의 예시입니다.

const columns = [
  { id: "id", name: "ID", field: "id", sortable: true },
  { id: "name", name: "이름", field: "name", sortable: true },
  { id: "age", name: "나이", field: "age", sortable: true },
];

위 예시에서 id 속성은 컬럼의 고유한 식별자입니다. name은 컬럼의 헤더에 표시될 이름이며, field는 컬럼에 표시될 데이터의 속성과 연결됩니다. sortable 속성은 해당 컬럼을 정렬 가능하게 만듭니다.

컬럼 속성 변경

컬럼 속성을 변경하려면 컬럼 객체를 수정해야 합니다. 예를 들어, 컬럼의 너비를 변경하려면 width 속성을 수정하면 됩니다.

columns[0].width = 100;
columns[1].width = 200;
columns[2].width = 150;

위 예시에서는 첫 번째 컬럼의 너비를 100px, 두 번째 컬럼의 너비를 200px, 세 번째 컬럼의 너비를 150px로 변경했습니다.

컬럼 숨기기

특정 컬럼을 숨기려면 visible 속성을 false로 변경하면 됩니다.

columns[1].visible = false;

위 예시에서는 두 번째 컬럼을 숨기고 나머지 컬럼만 표시합니다.

컬럼 정렬 설정

컬럼의 정렬 설정을 변경하려면 sortAsc와 sortDesc 속성을 사용합니다. 이 속성은 각각 오름차순과 내림차순으로 정렬되었음을 나타냅니다.

columns[0].sortAsc = true;
columns[0].sortDesc = false;

위 예시에서는 첫 번째 컬럼을 오름차순으로 정렬하고 내림차순은 비활성화합니다.

컬럼 헤더 스타일

컬럼 헤더의 스타일을 변경하려면 SlickGrid의 slick-default-header 클래스를 사용합니다. 이 클래스에 CSS 스타일을 적용하여 컬럼 헤더의 외관을 변경할 수 있습니다.

.slick-default-header {
  background-color: #f5f5f5;
  color: #333333;
  font-weight: bold;
}

위 예시에서는 컬럼 헤더의 배경색을 밝은 회색으로 변경하고 글자색을 검정색으로 설정하며, 글자의 굵기를 두꺼운체로 지정합니다.

참고 자료

© 2018 Colin. All rights reserved.