# 데이터 정렬
## Content
스프레드시트에서 데이터를 정렬할 수 있으며, 정렬 기준이 되는 열 또는 행 인덱스를 지정하고 정렬 조건을 설정할 수 있습니다.
또한 여러 개의 정렬 키를 지정하여 첫 번째 기준 열 또는 행, 두 번째 기준 열 또는 행 등의 순서로 정렬할 수 있습니다.
## 오름차순 또는 내림차순으로 범위 정렬하기
[sortRange](/spreadjs/api/classes/GC.Spread.Sheets.Worksheet#sortRange)메서드를 사용하여 데이터를 정렬할 수 있으며, 이 메서드에서 `sortInfo` 객체를 통해 정렬 키와 오름차순 또는 내림차순 여부를 지정합니다.
아래 GIF는 열을 오름차순과 내림차순으로 정렬하는 예시를 보여줍니다.
```javascript
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"),{sheetCount:3});
var activeSheet = spread.getActiveSheet();
activeSheet.setValue(0, 0, 10);
activeSheet.setValue(1, 0, 100);
activeSheet.setValue(2, 0, 50);
activeSheet.setValue(3, 0, 40);
activeSheet.setValue(4, 0, 80);
activeSheet.setValue(5, 0, 1);
activeSheet.setValue(6, 0, 65);
activeSheet.setValue(7, 0, 20);
activeSheet.setValue(8, 0, 30);
activeSheet.setValue(9, 0, 35);
$("#button1").click(function(){
// Column1을 오름차순으로 정렬
activeSheet.sortRange(-1, 0, -1, 1, true, [{index:0, ascending:true}]);
});
$("#button2").click(function(){
// Column1을 내림차순으로 정렬
activeSheet.sortRange(-1, 0, -1, 1, true, [
{index:0, ascending:false}
]);
});
//Add button controls to the page
```
## 다중 범위 정렬
`sortInfo` 객체에 여러 정렬 키를 지정하여 여러 범위 기준으로 정렬할 수 있습니다.
```javascript
$(document).ready(function ()
{
var spread =
new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {sheetCount:3});
var activeSheet = spread.getActiveSheet();
activeSheet.setRowCount(6);
activeSheet.setValue(0, 0, 10);
activeSheet.setValue(1, 0, 100);
activeSheet.setValue(2, 0, 100);
activeSheet.setValue(3, 0, 10);
activeSheet.setValue(4, 0, 5);
activeSheet.setValue(5, 0, 10);
activeSheet.setValue(0, 1, 10);
activeSheet.setValue(1, 1, 40);
activeSheet.setValue(2, 1, 10);
activeSheet.setValue(3, 1, 20);
activeSheet.setValue(4, 1, 10);
activeSheet.setValue(5, 1, 40);
$("#button1").click(function()
{
// SortInfo 객체 생성: 첫 번째 기준은 Column1(0번째 열)을 오름차순 정렬,
// 두 번째 기준은 Column2(1번째 열)을 내림차순 정렬
var sortInfo =
[
{index:0, ascending:true},
{index:1, ascending:false}
];
// 전체 6행에 대해 (0행부터 시작), 2열(0,1열)에 대해 정렬을 수행
spread.getActiveSheet().sortRange(0, 0, 6, 2, true, sortInfo);
});
});
//Add button control to page
```
## 셀 배경색 기준으로 정렬
`sortInfo.backColor` 옵션을 사용하여 셀의 배경색을 기준으로 정렬할 수 있으며, `sortInfo.order` 옵션으로 셀 색상의 위치를 범위의 상단 또는 하단으로 지정할 수 있습니다.
아래 GIF는 녹색 셀을 하단으로 정렬하는 예시를 보여줍니다.
```javascript
sheet.setArray(0, 0, [
["Order No.","Order Date","Product Type","Qty","Customer ID","Delivery Status"],
["1234", "11-Jul", "Electronic", "1", "861861", "Delivered"],
["1235", "12-Jul", "Clothing", "4", "530317", "Past Due"],
["1236", "13-Jul", "Cleaning", "2", "753904", "Past Due"],
["1237", "14-Jul", "Food Item", "6", "623424", "Delivered"],
["1238", "15-Jul", "Electronic", "3", "214403", "Past Due"],
["1239", "16-Jul", "Clothing", "7", "105146", "Due in 4 Days"],
["1240", "17-Jul", "Cleaning", "3", "860876", "Past Due"],
["1241", "18-Jul", "Food Item", "8", "126990", "Delivered"],
["1242", "19-Jul", "Electronic", "2", "505788", "Delivered"],
["1243", "20-Jul", "Clothing", "5", "298332", "Due in 4 Days"]
]);
spread.getSheet(0).getCell(1, 5).backColor("#E2EFDA");
spread.getSheet(0).getCell(2, 5).backColor("#FCE4D6");
spread.getSheet(0).getCell(3, 5).backColor("#FCE4D6");
spread.getSheet(0).getCell(4, 5).backColor("#E2EFDA");
spread.getSheet(0).getCell(5, 5).backColor("#FCE4D6");
spread.getSheet(0).getCell(6, 5).backColor("#FFF2CC");
spread.getSheet(0).getCell(7, 5).backColor("#FCE4D6");
spread.getSheet(0).getCell(8, 5).backColor("#E2EFDA");
spread.getSheet(0).getCell(9, 5).backColor("#E2EFDA");
spread.getSheet(0).getCell(10, 5).backColor("#FFF2CC");
var ColorList = new GC.Spread.Sheets.CellTypes.RadioButtonList();
ColorList.items([
{ text: "Green", value: "green" },
{ text: "Red", value: "red" },
{ text: "Yellow", value: "yellow" }
]);
spread.getSheet(0).getCell(12, 2).cellType(ColorList);
var OrderList = new GC.Spread.Sheets.CellTypes.RadioButtonList();
OrderList.items([
{ text: "Top", value: "top" },
{ text: "Bottom", value: "bottom" }
]);
spread.getSheet(0).getCell(12, 3).cellType(OrderList);
sortBackColor(spread.getSheet(0));
function sortBackColor (sheet){
const CELL_COLOR_MAPPING = {
green: "#E2EFDA",
red: "#FCE4D6",
yellow: "#FFF2CC",
}
sheet.setColumnWidth(3,120);
var style = new GC.Spread.Sheets.Style();
style.cellButtons = [{
caption: "Sort By Cell Color",
useButtonStyle:true,
width: 120,
command: function (sheet) {
var value = sheet.getValue(12,2);
var order = sheet.getValue(12,3);
value = value ? value : "green";
order = order ? order : "top";
var color = CELL_COLOR_MAPPING[value];
sheet.sortRange(1,0,10,6,true,[{
index:5,
backColor:color,
order:order,
}])
}
}];
sheet.setStyle(13,3,style);
}
```
## SpreadJS 디자이너에서 사용하기
SpreadJS 디자이너에서는 "정렬 기준(SortOn)" 드롭다운의 "셀 색(Cell Color)" 옵션을 선택하여 배경색 기준으로 정렬할 수 있습니다.
정렬 대화상자는 `홈 > 편집 > 정렬 및 필터 > 사용자 지정 정렬` 경로에서 접근할 수 있습니다.
## **글꼴 색상 기준 정렬**
셀의 **글꼴 색상**을 기준으로 정렬할 수 있습니다. 이를 위해 `sortInfo.foreColor` 옵션을 사용합니다. 선택된 범위 내에서 글꼴 색상이 일치하는 셀들은 `sortInfo.order` 옵션에 따라 **위(top)** 또는 **아래(bottom)** 에 그룹화됩니다.
아래 GIF는 빨간색 글꼴을 가진 셀들이 맨 위로 정렬되는 모습을 보여줍니다.
```javascript
spread.getSheet(1).setArray(0, 0, [
["Order No.","Order Date","Product Type","Qty","Customer ID","Delivery Status"],
["1234", "11-Jul", "Electronic", "1", "861861", "Delivered"],
["1235", "12-Jul", "Clothing", "4", "530317", "Past Due"],
["1236", "13-Jul", "Cleaning", "2", "753904", "Past Due"],
["1237", "14-Jul", "Food Item", "6", "623424", "Delivered"],
["1238", "15-Jul", "Electronic", "3", "214403", "Past Due"],
["1239", "16-Jul", "Clothing", "7", "105146", "Due in 4 Days"],
["1240", "17-Jul", "Cleaning", "3", "860876", "Past Due"],
["1241", "18-Jul", "Food Item", "8", "126990", "Delivered"],
["1242", "19-Jul", "Electronic", "2", "505788", "Delivered"],
["1243", "20-Jul", "Clothing", "5", "298332", "Due in 4 Days"]
]);
spread.getSheet(1).name("Sort by font color");
spread.getSheet(1).getCell(1, 5).foreColor("#548235");
spread.getSheet(1).getCell(2, 5).foreColor("#C65911");
spread.getSheet(1).getCell(3, 5).foreColor("#C65911");
spread.getSheet(1).getCell(4, 5).foreColor("#548235");
spread.getSheet(1).getCell(5, 5).foreColor("#C65911");
spread.getSheet(1).getCell(6, 5).foreColor("#BF8F00");
spread.getSheet(1).getCell(7, 5).foreColor("#C65911");
spread.getSheet(1).getCell(8, 5).foreColor("#548235");
spread.getSheet(1).getCell(9, 5).foreColor("#548235");
spread.getSheet(1).getCell(10, 5).foreColor("#BF8F00");
var FontColorList = new GC.Spread.Sheets.CellTypes.RadioButtonList();
FontColorList.items([
{ text: "Green", value: "green" },
{ text: "Red", value: "red" },
{ text: "Yellow", value: "yellow" }
]);
spread.getSheet(1).getCell(12, 2).cellType(FontColorList);
var FontColorOrder = new GC.Spread.Sheets.CellTypes.RadioButtonList();
FontColorOrder.items([
{ text: "Top", value: "top" },
{ text: "Bottom", value: "bottom" }
]);
spread.getSheet(1).getCell(12, 3).cellType(FontColorOrder);
sortFontColor(spread.getSheet(1));
function sortFontColor (sheet){
const FONT_COLOR_MAPPING = {
green:"#548235",
red:"#C65911",
yellow: "#BF8F00"
}
sheet.setColumnWidth(3,120);
var style = new GC.Spread.Sheets.Style();
style.cellButtons = [{
caption:"Sort By Font Color",
useButtonStyle:true,
width:120,
command:function (sheet){
var value = sheet.getValue(12,2);
var order = sheet.getValue(12,3);
value = value ? value : "green";
order = order ? order : "top";
var color = FONT_COLOR_MAPPING[value];
sheet.sortRange(1,0,10,6,true,[{
index:5,
fontColor:color,
order:order
}])
}
}];
sheet.setStyle(13,3,style);
}
```
## **SpreadJS 디자이너 사용하기**
"정렬 기준(SortOn)" 드롭다운에서 **"글꼴 색(Font Color)"** 옵션을 선택하여 글꼴 색상 기준으로 정렬할 수 있습니다.
정렬 대화 상자는 **홈 > 편집 > 정렬 및 필터 > 사용자 지정 정렬(Custom Sort)** 옵션에서 접근할 수 있습니다.
## 마지막 정렬 상태 유지
데이터를 정렬할 때, 기본값이나 마지막으로 적용된 정렬 상태를 유지할 수 있습니다.
정렬 상태는 다른 정렬 순서를 적용해도 변경되지 않습니다. 현재 워크시트의 마지막 정렬 상태를 확인하려면 `getSortState` 메서드를 사용하고, 데이터를 다시 정렬하려면 `sortRange` 메서드를 사용합니다.
아래 이미지는 정렬 상태가 유지된 모습을 보여줍니다.
다음 예제 코드는 워크시트의 **ValueChanged** 이벤트를 구현한 것으로, 변경이 감지될 때마다 `getSortRange`로 정렬 상태를 복원하고 `sortRange` 메서드를 호출합니다.
```auto
// 값이 변경될 때마다 자동으로 정렬 호출
sheet.bind(GC.Spread.Sheets.Events.ValueChanged, function (e, info) {
let sortState = sheet.getSortState();
if (inSortStateRange(sortState, info.row, info.col)) {
sheet.sortRange();
}
});
```
> **참고**:
>
> * 이 기능은 SSJSON, SJS, XLSX 형식의 내보내기/가져오기를 지원합니다.
> * `worksheet.getSortState()`로 필터링 시, 정렬 상태는 반환되지 않습니다.
## **정렬 시 숨겨진 데이터 무시하기**
API에서 `ignoreHidden` 옵션을 사용하면 정렬 시 숨겨진 데이터를 건너뛸 수 있습니다.
셀 또는 범위가 **다음 조건 중 하나 이상**에 해당하면 숨겨진 것으로 간주됩니다:
* 행 높이나 열 너비가 0인 경우
* 행 또는 열이 숨김 처리된 경우
* 행 또는 열이 필터링되어 제외된 경우
* 일부 행 또는 열이 그룹화되었고 확장되지 않은 경우
아래 예제에서는 **숨겨진 행(A5:A6)** 을 포함하고 있으며, `ignoreHidden` 값에 따라 정렬 결과가 어떻게 달라지는지를 보여줍니다:
| **원본 데이터** | **ignoreHidden가 true인 경우** | **ignoreHidden 가 false인 경우** |
| ------ | ---------------------- | ------------------------ |
|  |  |  |
다음 코드는 숨겨진 행을 건너뛰며 데이터 정렬을 수행하는 방법을 보여줍니다:
```javascript
// 활성화 시트 가져오기
var activeSheet = spread.getSheet(0);
// 데이터 설정
activeSheet.setValue(0, 0, "Name");
activeSheet.setValue(0, 1, "Age");
activeSheet.setValue(1, 0, "Rick");
activeSheet.setValue(1, 1, 52);
activeSheet.setValue(2, 0, "Tim");
activeSheet.setValue(2, 1, 50);
activeSheet.setValue(3, 0, "Jerry");
activeSheet.setValue(3, 1, 46);
activeSheet.setValue(4, 0, "Jack");
activeSheet.setValue(4, 1, 98);
activeSheet.setValue(5, 0, "Sandy");
activeSheet.setValue(5, 1, 99);
activeSheet.setValue(6, 0, "Smith");
activeSheet.setValue(6, 1, 42);
activeSheet.setValue(7, 0, "Greg");
activeSheet.setValue(7, 1, 41);
activeSheet.setValue(8, 0, "Sia");
activeSheet.setValue(8, 1, 36);
activeSheet.setValue(9, 0, "Jennet");
activeSheet.setValue(9, 1, 38);
activeSheet.setValue(10, 0, "Rachel");
activeSheet.setValue(10, 1, 37);
// 행 숨김
activeSheet.setRowHeight(4, 0.0, GC.Spread.Sheets.SheetArea.viewport);
activeSheet.setRowHeight(5, 0.0, GC.Spread.Sheets.SheetArea.viewport);
ignoreHidden을 true로 설정하여 "Age" 열을 정렬합니다.
activeSheet.sortRange(1, 1, 10, 1, true, [{ index: 1, ascending: true }], { ignoreHidden: true });
```
SpreadJS는 `groupSort` 열거형을 사용하여 그룹화된 데이터를 정렬할 수도 있습니다. 그룹화되어 펼쳐지지 않은 데이터는 숨겨진 행 또는 열로 간주됩니다. 그룹화된 데이터 정렬에 대한 자세한 내용은 [그룹화된 데이터와 함께 정렬](/spreadjs/docs/features/sort-data/sort-with-grouped-data) 항목을 참고하시기 바랍니다.
`groupSort`와 `ignoreHidden`을 함께 사용할 때의 동작 방식은 아래 표와 같습니다:
| **groupSort 값** | **ignoreHidden = true** | **ignoreHidden = false** | **ignoreHidden 미설정** |
| ----------- | ------------------- | -------------------- | ---------------- |
| group, child 또는 full | @cols=3:그룹 정렬이 작동하며, 숨겨진 값은 무시되지 않음 |
| groupSort flat | 숨겨진 값 무시함 | 숨겨진 값 무시하지 않음 | 숨겨진 값 무시함 |
| groupSort 미설정 | 숨겨진 값 무시함 | 숨겨진 값 무시하지 않음 | 정렬 범위에 그룹이 있으면 그룹 정렬 적용됨
정렬 범위에 그룹이 없으면 숨겨진 값 무시함 |
아래 코드는 `ignoreHidden`과 `groupSort`를 함께 사용하는 방법을 보여줍니다.
```javascript
// 데이터 설정
activeSheet.setArray(3, 0, [
[6221], [5125], ['Samsung'], [4348], [3432], ['LG'], [1928], [2290], ['Oppo'], [8939], [7006], ['Apple']
]);
activeSheet.rowOutlines.group(3, 2);
activeSheet.rowOutlines.group(6, 2);
activeSheet.rowOutlines.group(9, 2);
activeSheet.rowOutlines.group(12, 2);
spread.resumePaint();
// rowFilter 설정
activeSheet.rowFilter(new GC.Spread.Sheets.Filter.HideRowFilter(new GC.Spread.Sheets.Range(3, 0, 13, 1)));
// 행 숨김
activeSheet.setRowHeight(4, 0.0, GC.Spread.Sheets.SheetArea.viewport);
activeSheet.setRowHeight(5, 0.0, GC.Spread.Sheets.SheetArea.viewport);
// 1) 필터 대화상자를 사용하여 그룹 기능과 ignoreHidden 기능을 포함한 정렬을 수행하려면 RangeSorting 이벤트를 사용해야 함
spread.bind(GC.Spread.Sheets.Events.RangeSorting, function (e, info) {
// groupSort 를 full로 설정
info.groupSort = GC.Spread.Sheets.GroupSort.full;
// ignoreHidden 을 true로 설정
info.ignoreHidden = true;
});
// 2) API를 사용하여 그룹 기능과 ignoreHidden 기능을 포함한 정렬을 수행하려면 다음 코드 사용
// activeSheet.sortRange(3, 0, 13, 1, true, [{ index: 0, ascending: true }], { ignoreHidden: true, groupSort: GC.Spread.Sheets.GroupSort.full });
```
## 정렬 시 데이터 헤더 제외
워크시트에서 데이터를 정렬할 때, 헤더 행은 고정하여 열 제목이 데이터와 함께 정렬되지 않도록 하는 경우가 많습니다.
**SpreadJS는 선택한 범위에서 헤더 행을 자동으로 감지**하고, 이를 정렬에서 제외할 수 있습니다.
**지원 환경**
* SpreadJS 디자이너의 **사용자 지정 정렬(Custom Sort)** 대화 상자에서 접근 가능.
* 테이블, **일반 범위**, 조건 필터가 적용된 데이터셋에서도 사용 가능.
* 헤더 감지는 **위에서 아래로(top-to-bottom) 정렬**할 때만 적용.
### 주요 장점
* **자동 헤더 감지**
SpreadJS가 선택 범위의 최상단 행을 기준으로 헤더를 감지하고 데이터 범위와 분리합니다.
필요시 바로 위 행까지 평가하며, 셀 유형, 내용, 스타일 차이를 기준으로 판단합니다. 일부 빈 셀은 허용됩니다.
명확한 헤더를 감지하지 못하면, 기본적으로 현재 선택 범위의 첫 번째 행이 헤더로 사용됩니다.
* **간편한 워크플로우**
전체 데이터셋을 바로 정렬할 수 있으며, 헤더가 자동으로 보호되므로 열 제목이 잘못 정렬될 가능성이 줄어듭니다.
* **정확한 정렬 라벨**
헤더가 감지되면, 정렬 대화 상자의 **SortBy** 목록에 헤더 텍스트가 표시됩니다.
**“My Data Has Headers”** 옵션을 해제하면, 열 문자가 기본값으로 표시됩니다(예: Column A, Column B).
### 정렬 수행 방법
1. 워크시트에서 정렬하려는 데이터 범위를 선택합니다.
2. 사용자 지정 정렬(Custom Sort) 대화 상자를 엽니다.
* **방법 1:** **데이터(Data)** 탭 → **정렬 및 필터(Sort & Filter)** 그룹 → **정렬(Sort)** 클릭
* **방법 2:** 선택한 범위에서 마우스 오른쪽 클릭 → **정렬(Sort)** → **사용자 지정 정렬(Custom Sort)** 선택
### 정렬 동작 예시
| **시나리오** | **동작** | **예시** |
| ---- | --- | --- |
| 헤더가 감지된 범위 | - “My Data Has Headers” 자동 선택
- Sort 대화 상자에서 헤더 텍스트 표시
| 헤더가 있는 범위: 
헤더 없는 범위:  |
| 헤더 감지 불가 범위 | - “My Data Has Headers” 해제
- Sort 대화 상자에서 기본 열 참조 표시(예: Column A, Column B)
|  |
| 테이블, 헤더 표시 | - “My Data Has Headers” 선택 및 비활성화
- 모든 행 정렬
- SpreadJS가 헤더 자동 제외 관리
|  |
| 테이블, 헤더 숨김 | - “My Data Has Headers” 해제 및 비활성화
- 모든 행 정렬
- SortBy 목록에 기본 열 참조 표시
|  |
| 필터링된 범위 | - “My Data Has Headers” 옵션 비활성화
|  |
| 좌→우 정렬 | - “My Data Has Headers” 옵션 비활성화
|  |
| 헤더 행에 빈 셀 포함 | |  |
> **참고**:
>
> * **Custom Sort 기억:** 사용자 지정 정렬 대화 상자는 선택한 범위의 마지막 정렬 구성을 자동으로 기억합니다. 나중에 열 수준이나 정렬 순서를 다시 확인하거나 수정할 수 있습니다.
> * **원클릭 정렬:** **A→Z** 또는 **Z→A** 명령 사용 시
> * 파일을 열고 처음 정렬할 경우, SpreadJS가 선택 범위의 첫 행이 헤더인지 확인 후 정렬에서 제외
> * 이후 사용자 지정 정렬을 수행하면, 마지막 **“My Data Has Headers”** 옵션 상태가 기억되어 동일 세션 내 모든 원클릭 정렬에 적용