SlickGrid는 JavaScript로 작성된 강력한 데이터 그리드 라이브러리입니다. 데이터를 표시하고 편집하는 데 사용할 수 있으며, 다양한 형식으로 데이터를 포맷팅할 수 있는 기능을 제공합니다. 이 글에서는 SlickGrid에서 숫자를 원하는 포맷으로 지정하는 방법에 대해 알아보겠습니다.

1. SlickGrid 컬럼 정의

먼저, SlickGrid에서 사용할 컬럼을 정의합니다. 이 컬럼에는 포맷을 적용하려는 숫자 데이터가 포함되어야 합니다. 아래 예제에서는 dataView 객체와 columns 배열을 사용하여 컬럼을 정의합니다.

var dataView = new Slick.Data.DataView();
var columns = [
  { id: "id", name: "ID", field: "id" },
  { id: "sales", name: "Sales", field: "sales", formatter: numberFormatter }
];

2. 포맷터 함수 작성

포맷터 함수는 데이터를 받아서 원하는 형식으로 포맷팅하는 역할을 합니다. 아래 예제에서는 numberFormatter 함수가 사용됩니다. 이 함수는 숫자를 받아서 천 단위 구분 기호와 소수점 자릿수를 포함한 문자열로 변환합니다.

function numberFormatter(row, cell, value, columnDef, dataContext) {
  if (value === null || value === undefined) {
    return "";
  }
  return value.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

3. 포맷터 함수 적용

마지막으로, 정의한 컬럼에 포맷터 함수를 적용합니다. 위에서 작성한 columns 배열에 formatter 속성을 추가하고, 포맷터 함수를 할당합니다.

columns = [
  { id: "id", name: "ID", field: "id" },
  { id: "sales", name: "Sales", field: "sales", formatter: numberFormatter }
];

이제 SlickGrid를 초기화하고 데이터를 로드하면, 숫자 데이터가 원하는 포맷으로 표시될 것입니다.

마무리

SlickGrid를 사용하여 숫자 데이터를 원하는 포맷으로 표시하는 방법에 대해 알아보았습니다. 포맷터 함수를 사용하면 데이터 그리드에 다양한 형식의 데이터를 표시할 수 있습니다. 물론 숫자 포맷 외에도 다른 형식의 데이터 포맷팅도 가능합니다. SlickGrid 문서를 참조하여 필요에 맞게 활용해보세요!

References

• SlickGrid GitHub Repository
• SlickGrid Documentation