표 크기 조정

SpreadJS는 Excel과 마찬가지로 표 크기 조정 기능을 지원합니다.

• 표 크기 조정 인디케이터 - showResizeHandle 메서드의 값을 true로 설정하면 표의 오른쪽 하단 모서리에 크기 조정 인디케이터가 표시됩니다.

• 표 크기 조정 핸들러 - 사용자가 마우스를 크기 조정 인디케이터 위로 가져가면 표 크기 조정 핸들러가 표시됩니다.

스프레드시트에서 표 작업 시, showResizeHandle 메서드를 사용하여 표에 대한 크기 조정 핸들을 표시할지 여부를 설정하거나 가져올 수 있습니다. 이 값을 true로 설정하면 표의 오른쪽 하단 모서리에 작은 크기 조정 인디케이터가 표시됩니다. 이후 사용자는 표 크기 조정 핸들러를 드래그하여 아래 이미지처럼 원하는 크기로 표를 조정할 수 있습니다.

표를 범위에 맞게 크기 조정

사용자는 필요에 따라 표를 더 큰 범위 또는 더 작은 범위로 조정할 수 있습니다.

• 더 큰 범위 – 표 크기 조정 핸들러를 오른쪽 또는 아래 방향으로 이동하면, 확장된 영역의 셀은 동일한 스타일을 복사하며 새 열 또는 행이 각각 추가되고 이름도 새로 지정됩니다.

• 더 작은 범위 – 표 크기 조정 핸들러를 왼쪽 또는 위 방향으로 이동하면, 테이블의 데이터 값은 유지되지만 해당 열 또는 행의 스타일은 제거됩니다.

머리글 행과 요약 행을 포함한 표 크기 조정

사용자는 머리글 행과 요약 행을 포함하는 표도 크기 조정할 수 있습니다.

머리글 행과 요약 행이 포함된 표를 오른쪽으로 크기 조정할 경우, 확장된 영역의 셀은 동일한 스타일을 복사하고 새 열이 새 이름과 함께 추가됩니다.

아래 방향으로 크기 조정할 경우, 조정된 범위의 행 수에는 머리글 행과 요약 행이 포함됩니다. 왼쪽 방향으로는 표의 데이터 값은 유지되지만 다른 열의 스타일은 제거됩니다. 위 방향으로는 행 수가 (조정된 범위의 행 수 + 1)로 조정됩니다.

수식을 포함한 표 크기 조정

표를 크기 조정할 경우, 선택된 범위는 유지됩니다. 스타일과 데이터가 포함된 표를 조정한 후에도 수식은 유지되며, 새 범위에 자동으로 적용됩니다. 표 범위를 참조하는 수식도 표 크기 조정 후 업데이트됩니다.

표를 조정할 때 다음 사항을 유의해야 합니다:

• 표는 한 번에 열 방향 또는 행 방향 중 하나로만 조정할 수 있습니다.

• 표의 최소 크기는 머리글 행과 요약 행을 제외한 1개의 표 행과 1개의 표 열을 포함하는 셀 범위입니다.

• 표의 최대 크기는 표 행 수, 열 수, 시트의 행 수, 열 수를 포함하는 셀 범위입니다.

• 확장된 영역에 값이 있는 경우, 해당 값은 자동으로 표에 채워집니다.

• Excel에서는 요약 행이 있는 표를 크기 조정하면 기존 표 범위 아래의 모든 값이 확장된 범위로 채워집니다. 하지만 SpreadJS에서는 요약 행이 기존 표 범위 아래의 마지막 행을 덮습니다.

• 스프레드시트의 셀이 스파크라인을 포함하더라도 표 크기 조정 기능은 지원됩니다.

다음 코드는 스프레드시트 작업 시 표 크기 조정 핸들러를 활성화하여 표의 크기를 조정하는 방법을 보여줍니다.

// Spread 초기화
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });

// activesheet 가져오기
var activeSheet = spread.getActiveSheet();
// 표 추가
var table = activeSheet.tables.add("table1", 1, 1, 4, 4, GC.Spread.Sheets.Tables.TableThemes.light1);
// 표의 showResizeHandle 메서드를 true로 설정하여 표 크기 조정 핸들을 활성화
table.showResizeHandle(true);
activeSheet.getCell(1, 1).text("First Name");
activeSheet.getCell(1, 2).text("Last Name");
activeSheet.getCell(1, 3).text("Score");
activeSheet.getCell(1, 4).text("Position");
activeSheet.getCell(2, 1).text("Alexa");
activeSheet.getCell(2, 2).text("Wilder");
activeSheet.getCell(2, 3).text("90");
activeSheet.getCell(2, 4).text("Web Developer");
activeSheet.getCell(3, 1).text("Victor");
activeSheet.getCell(3, 2).text("Wooten");
activeSheet.getCell(3, 3).text("70");
activeSheet.getCell(3, 4).text(".NET Developer");
activeSheet.getCell(4, 1).text("Ifeoma");
activeSheet.getCell(4, 2).text("Mays");
activeSheet.getCell(4, 3).text("85");
activeSheet.getCell(4, 4).text("Sales Manager");
for (var i = 0; i < 3; i++)
activeSheet.setColumnWidth(i, 90.0, GC.Spread.Sheets.SheetArea.viewport);
activeSheet.setColumnWidth(4, 120);

표 크기 조정 시 크기 제한 설정

SpreadJS는 표가 가질 수 있는 행 또는 열 수에 대한 제한을 설정하여 표 크기 조정을 제어할 수 있도록 지원합니다. 이를 통해 사용자가 지정된 제약 조건을 초과하여 표를 크기 조정하지 못하도록 할 수 있습니다. TableResizing 이벤트의 Cancel 매개변수를 사용하면 현재 크기 조정 작업을 중단할 지를 프로그래밍 방식으로 설정할 수 있습니다. 기본적으로 Cancel 매개변수는 false로 설정되어 있습니다. true로 설정하면, 사용자가 설정된 제한을 초과하여 표를 크기 조정하려고 할 때 해당 작업이 취소되고 사용자에게 알림이 표시됩니다.

이 기능은 사전에 정의된 제약 조건(예: 행 수 또는 열 수 제한)을 반드시 준수해야 하는 경우 특히 유용합니다. 표가 허용된 크기 내에서 유지되도록 하여 데이터 레이아웃의 일관성과 무결성을 보장할 수 있습니다.

아래 GIF는 최대 행 수가 8로 설정된 표를 보여줍니다. 사용자가 표를 8행을 초과하도록 크기 조정하려고 시도하면 자동으로 차단되며, 이에 대한 알림이 사용자에게 표시됩니다.

다음 샘플 코드는 TableResizing 이벤트의 Cancel 매개변수를 사용하여 표 크기 조정에 대한 크기 제한을 구현하는 방법을 보여줍니다.

Ask ChatGPT

var table = sheet.tables.add("table1", 1, 1, 4, 4, GC.Spread.Sheets.Tables.TableThemes.medium2); 
table.showResizeHandle(true); 
const tableMaxRows = 8; 
spread.bind(GC.Spread.Sheets.Events.TableResizing, function (e, args) { 
    if (args.newRange.rowCount > tableMaxRows) { 
        args.cancel = true; 
        alert(`Table Rows Cannot Be Resized to more than ${tableMaxRows} rows`); 
    } 
}); 
spread.bind(GC.Spread.Sheets.Events.TableResized, function (e, args) { 
    alert("Table Resized SuccessFully"); 
});