SlickGrid은 웹 기반의 고성능 그리드 컴포넌트입니다. 이 그리드에서 로우(행)의 모양과 동작을 사용자 정의할 수 있습니다. 이번 포스트에서는 SlickGrid의 로우 설정에 대해 알아보겠습니다.

로우 스타일 설정

SlickGrid에서 로우의 스타일을 설정하려면 rowCssClasses 옵션을 사용합니다. 이 옵션에는 함수 혹은 객체를 지정하여 로우별로 다른 스타일을 적용할 수 있습니다.

var options = {
  rowCssClasses: function(item) {
    if (item.id % 2 === 0) {
      return "even";
    } else {
      return "odd";
    }
  }
};

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

위의 예제에서는 rowCssClasses 옵션에 함수를 설정하여 짝수 번째 로우에는 “even” 클래스를, 홀수 번째 로우에는 “odd” 클래스를 적용하였습니다. 따라서 짝수 번째 로우는 백그라운드 색이 다르게 표시될 것입니다.

로우 셀 스타일 설정

로우 내의 각 셀에 대한 스타일을 설정하려면 rowFormatter 콜백 함수를 사용합니다. 이 함수는 각 로우의 HTML 요소를 생성하고 반환하는 역할을 합니다. 로우 내의 각 셀에 대한 스타일을 직접 지정할 수 있습니다.

var options = {
  rowFormatter: function(row, cell, value, columnDef, dataContext) {
    if (value === "error") {
      return `<span style="color: red;">${value}</span>`;
    } else {
      return value;
    }
  }
};

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

위의 예제에서는 rowFormatter 콜백 함수를 사용하여 “error” 값을 가진 셀에 대해 빨간색으로 표시하도록 스타일을 설정하였습니다.

로우 동작 설정

로우에 대한 클릭, 더블클릭 등의 동작을 설정하려면 onClick, onDblClick 등의 이벤트 핸들러 함수를 사용합니다.

var options = {
  onClick: function(e, args) {
    var row = args.row;
    var cell = args.cell;
    var item = dataView.getItem(row);

    // 클릭한 로우에 대한 동작 수행
    console.log("Clicked on row:", item);
  }
};

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

위의 예제에서는 onClick 이벤트 핸들러 함수를 사용하여 로우를 클릭했을 때 수행할 동작을 정의하였습니다. 클릭한 로우의 데이터를 콘솔에 출력하는 코드가 예시로 들어가 있습니다.

결론

SlickGrid을 사용하여 로우의 스타일과 동작을 설정하는 방법을 알아보았습니다. 로우 스타일을 설정하고, 각 셀에 대한 스타일을 지정하여 시각적인 효과를 줄 수 있습니다. 또한 로우에 대한 클릭, 더블클릭 등의 이벤트 동작을 설정하여 사용자와의 인터랙션을 추가할 수 있습니다.

더 자세한 내용은 SlickGrid 공식 문서를 참고하세요.