SpreadJS 서비스 팩 1이 출시되었습니다! 새로운 셀 유형, 업데이트된 프레임워크 지원, 차트, 피벗 테이블, 테이블 시트 등의 성능 개선과 같이 많은 새로운 기능이 생기고 기존 기능이 향상되었습니다!

• 피벗 테이블의 향상된 기능
• TableSheet의 향상된 기능
• 계산의 향상된 기능
• 도형의 향상된 기능
• 차트의 향상된 기능
• 통합 문서의 향상된 기능
• 프레임워크 지원
• 디자이너 컴포넌트 접근성
• 디자이너 컴포넌트의 향상된 기능

피벗 테이블의 향상된 기능 

단일 필드의 부분합 옵션

단일 필드의 부분합 옵션을 추가하였습니다! SpreadJS에서는 이전에 부분합 위치가 각 필드의 하단에 있도록 변경했으나, 이제는 개별 필드에 대한 위치를 본인이 직접 변경할 수 있습니다.

대화형 피벗 테이블 데모 >

피벗 테이블 참조에 대한 GetPivotData 함수

“피벗 테이블 참조에 GetPivotData 함수 사용” 옵션이 수식에 대한 옵션으로 통합 문서에 추가되었습니다. 여러분은 이를 활성화하거나 비활성화할 수 있습니다.

이 옵션을 통해 데이터의 레이아웃이 변경되면 피벗 테이블 셀을 참조할 수 있습니다.

GetPivotData 데모 >

피벗 테이블 정렬

이번 릴리스에서 피벗 테이블에 있는 셀을 마우스 오른쪽 버튼으로 클릭하여 액세스 가능한 정렬 기능을 추가했습니다.

피벗 테이블 정렬 데모 >

TableSheet의 향상된 기능 

데이터 소스 스프레드 변환

경우에 따라 DataManager에서 데이터가 다양한 속성이 있는 중첩된 객체의 양식에 있을 수 있습니다. 이전에는 계산된 열 또는 점 구분 기호를 사용해서 객체의 속성을 필드로 나타내야 했습니다.

이 릴리스에서는 “spread: true”를 지정하여 객체의 첫 번째 수준 하위가 별도의 필드를 차지하고 있는지 확인할 수 있습니다.

스프레드 변환 데모 >

스프레드시트 필터

이제 테이블 시트를 통해 여러 열을 동시에 필터링할 수 있습니다.

대화형 필터 데모 >

순서 변경

통합 문서의 하단에서 시트 탭을 클릭하여 드래그하여 통합 문서에서 시트의 순서를 변경할 수 있습니다. 이 릴리스에서는 이제 워크시트와 테이블 시트의 순서를 함께 변경할 수 있으므로 워크시트와 테이블 시트의 순서를 원하는 방식대로 변경할 수 있습니다.

헤더 스타일 규칙

이제 스타일 규칙이 테이블 시트의 열 헤더에 지원됩니다. 기본적으로 테이블 시트는 읽기 전용으로 설정된 경우 자물쇠 아이콘을 자동으로 열에 추가합니다.

특정 환경에서 열 헤더 표시에 대한 특정 스타일 규칙을 설정할 수 있습니다.

스타일 규칙 데모 >

계산의 향상된 기능 

수식 결과에 대한 자동 서식 지정

SpreadJS에 수식을 입력한 후 수식의 데이터에 따라 자동으로 서식이 지정된 결과를 보유할 수 있습니다. 예를 들어, 값이 0.1이며 백분율 서식(0%)이 적용된 셀(A1)이 있다고 가정해 보겠습니다. 이런 경우, =A1+1과 같은 수식에서 해당 셀을 참조하면, 결과는 110%와 같이 자동으로 백분율 형식으로 표시됩니다 . 자동 서식은 다음 유형 중 하나입니다.

• 비어 있음 - null/undefined/”general”/””
• 숫자 - 0 0.00
• 통화(회계) - $#,##0.00
• 날짜(시간) - m/d/yyyy h:mm 또는 h:mm:ss AM/PM
• 백분율 - 0.00%
• 분수 - # ?/?
• 지수 - 0.00E+00
• 텍스트 - @

서식 힌트 데모 >

정규식(RegEx) 함수

SpreadJS에 몇 가지 새로운 정규식 함수를 추가했습니다.

• GC.REGEXEXTRACT - 정규식에 따라 일치하는 하위 문자열 추출
• GC.REGEXMATCH - 텍스트 일부가 정규식과 일치하는지 확인하기 위한 테스트
• GC.REGEXREPLACE - 정규식을 사용하여 텍스트 문자열 일부를 다른 텍스트 문자열로 변경

이러한 새 함수는 셀 내에서 텍스트 추출, 일치 및 변경을 도와줄 수 있습니다.

RegEx 데모 >

시트 간 참조를 위한 빠른 입력

SpreadJS에서 수식을 입력하면 수식에서 이에 대한 참조를 포함하고 편집 모드로 유지하도록 통합 문서의 하단에서 시트 탭을 선택할 수 있습니다. 하지만 한 번에 표시할 시트가 너무 많을 수 있으므로 선택할 수 없습니다. 이제 새 AllSheetsList 버튼을 사용하여 수식에서 참조를 위한 시트를 선택할 수 있습니다.

도형의 향상된 기능 

스파크라인 함수

도형은 이제 소스 속성으로 스파크라인 함수 사용을 지원합니다. 이는 style.fill.src를 통해 완료할 수 있습니다. 사용되는 경우 스파크라인을 만들어 도형의 배경으로 사용합니다. 예를 들어, 표준 사각형 도형을 만들고 그 안에서 원형 차트 스파크라인을 사용할 수 있습니다.

스파크라인 도형 데모 >

텍스트 상자 도형

SpreadJS는 텍스트 상자 도형을 지원하여 내부에 있는 텍스트로 워크시트 어디에든 상자를 추가할 수 있습니다. 또한 resizeToFitText 옵션을 활용하여 사용자의 입력에 맞도록 텍스트 상자의 크기를 자동으로 조정할 수 있습니다.

텍스트 상자 도형 데모 >

Z-Order 메서드 지원

SpreadJS 및 디자이너 컴포넌트는 도형의 Z-Order 변경을 지원합니다. 즉, 다음 동작을 사용하여 서로 겹쳐있는 도형의 순서를 변경할 수 있습니다.

• 앞으로 가져오기 - 또 다른 도형 위로 도형 이동
• 맨 앞으로 가져오기 - 다른 모든 도형 위로 도형 이동
• 뒤로 보내기 - 또 다른 도형 아래로 도형 이동
• 맨 뒤로 보내기 - 다른 모든 도형 아래로 도형 이동

폼 컨트롤 활성화 속성

이전 릴리스에서는 다양한 유형의 버튼 및 폼과 유사한 인터페이스의 대화형 UI를 추가할 수 있는 폼 컨트롤을 추가했습니다. 이 릴리스에서는 사용자가 폼 컨트롤과 상호 작용할 수 있는지 여부를 넘어서 제어 기능을 제공하는 활성화된 속성도 추가했습니다.

폼 컨트롤 데모 >

차트의 향상된 기능 

게이지(Gauge) 차트

탁월한 차트의 향상된 기능은 게이지 차트의 추가입니다.

이 새 콤보 차트를 통해 일종의 계기 또는 속도계를 만들 수 있습니다. 게이지 차트는 원형 및 도넛형 차트의 조합으로, 데이터의 단일 값을 수량으로 시각화할 수 있습니다.

콤보 차트 데모 >

음수의 경우, 자동으로 반전

세로 막대형 및 막대형 차트가 invertIfNegative 옵션과 함께 향상되었습니다. 이를 통해 양수와 음수 값을 다르게 서식 지정하여 더욱 명확한 시각적 구별이 가능해집니다. 차트의 특정 계열에서 이 옵션을 활성화할 수 있으며 SpreadJS는 데이터를 자동으로 반전합니다. invertColor 옵션을 사용하여 반전된 계열에 특정 색을 선택할 수 있습니다.

통합 문서의 향상된 기능 

마스크 입력 스타일

추가된 새 입력 기능은 마스크입니다. 이는 설정된 서식에서 사용자 입력을 제한하여 서식이 지정된 전화번호 입력과 같이 입력 오류를 방지하면서 데이터 무결성을 확보하는 데 사용됩니다. 패턴은 문자열 또는 날짜 패턴이 될 수 있으며 특정 결과를 생성하도록 수식과 함께 사용할 수 있습니다.

사용자 입력 마스크 데모 >

워크시트 암호 보호

워크시트를 암호로 보호할 수 있습니다. Excel 기능과 일치시켜 특정 시트 또는 전체 통합 문서에 대해 암호를 설정할 수 있습니다.

대화형 보호 데모 >

드롭다운 필터 대화 상자 크기 조정 가능

이제 드롭다운 필터 대화 상자를 사용자의 요구 사항에 맞도록 크기를 조정할 수 있습니다.

크기 조정은 다음 동작을 따릅니다.

• 사용자가 마지막으로 설정한 크기 추적
• 내용에 맞추기 위한 최소 필수 크기 아래로 크기를 조정하지 않음
• 크기 조정 가능 필터 대화 상자를 활성화/비활성화하는 전역 설정

필터 대화 상자 데모 >

단어 줄바꿈

SpreadJS는 줄바꿈이 발생해야 하는 경우를 나타내는 문자를 정의할 수 있는 사용자 정의 줄바꿈을 지원합니다. 예를 들어, 문화권을 만든 다음 텍스트 서식에 줄바꿈 정보를 추가할 수 있습니다.

var myCulture = GC.Spread.Common.CultureManager.getCultureInfo();
myCulture.TextFormat.lineBreakingChar = [" ", "+", 
myCulture.TextFormat.lineBreakingForbidStart = ["》"];
myCulture.TextFormat.lineBreakingForbidEnd = ["《"];

activeSheet.setValue(0, 0, "1-1+2+3+4+5+6+7");
activeSheet.getCell(0, 0).wordWrap(true);
activeSheet.setValue(1, 0, "《abc》《def》《ghk》");
activeSheet.getCell(1, 0).wordWrap(true);

대화형 세계화 데모 >

콤보박스 AllowFloat

경우에 따라 사용자는 콤보박스와 상호 작용하며 위치와 내용에 따라 전체 콤보박스가 적절히 표시되지 않을 수 있습니다.

이번 릴리스에서는 활성화되면 콤보박스가 이와 같이 페이지에서 SpreadJS 인스턴스 외부에 표시될 수 있는 allowFloat 속성을 ComboBoxCellType에 추가했습니다.

콤보 상자 데모 >

표에서 복사하거나 잘라낸 셀 삽입

SpreadJS는 이전부터 표 범위 외부에서 복사하거나 자른 셀 삽입을 지원하고 있습니다.

이번 릴리스에서는 복사하여 자른 셀을 표에 삽입할 수 있습니다.

대화형 표 데모 >

0 표시

워크시트에는 셀에 결과값이 0이 되는 수식이 있을 수 있으며 사용자는 이러한 셀이 어떤 값도 표시하지 않길 바랄 수도 있습니다. 이를 지원하기 위해 showZeros 옵션을 추가하였으며 이 옵션을 사용하여 셀에서 0을 표시하거나 빈 값으로 표시할 수 있습니다.

체크박스 셀 유형 줄바꿈

체크박스는 상자 옆에 레이블이 있는 SpreadJS의 셀 유형이자 셀 내에 배치할 수 있습니다. 어떤 경우에는 텍스트가 셀에 너무 길 수 있으므로 cellStyle.wordWrap 속성을 통해 체크박스 셀 유형에 줄바꿈 지원을 추가했습니다. True로 설정하면 셀의 너비보다 큰 경우 텍스트가 셀에서 자동으로 줄을 바꿉니다.

체크박스 데모 >

스타일 복사 클립보드 콘텐츠 최적화

SpreadJS는 스타일이 지정된 범위를 복사할 때 클립보드에 최적화된 HTML 콘텐츠를 생성합니다. 이는 대용량 클립보드 작업의 성능 및 메모리 사용량을 개선합니다.

WordWrap 유지

또 다른 복사/붙여넣기 기능 향상으로 SpreadJS는 하나의 SpreadJS 인스턴스에서 또 다른 항목으로 또는 SpreadJS에서 Excel로 복사하는 경우 셀 단어-줄바꿈 유지를 지원합니다. wordwrap이 셀에 활성화되면 해당 셀 wordwrap은 복사된 경우 자동으로 작동합니다.

열/행 헤더 레이아웃 기능 향상

SpreadJS는 addRows/Columns 및 deleteRows/Columns를 지원하며 이 릴리스에서 이러한 함수는 이제 열 및 행 헤더와 작동됩니다. 이러한 함수를 호출할 때 SheetArea.colHeader 또는 SheetArea.rowHeader를 지정하기만 하면 됩니다.

행 및 열 데모 >

스타일 꾸미기 아이콘

SpreadJS의 아이콘 속성이 스타일 꾸미기를 지원하기 위해 향상되었습니다. 이러한 아이콘은 셀 내부 또는 외부에 포함할 수 있는 자체 정의된 아이콘 집합입니다. 스타일을 사용하여 구현되므로 아이콘의 소스, 너비, 높이 및 위치를 지정할 수 있습니다.

SetRowCount 및 SetColumnCount 데이터 보호

SpreadJS의 이전 릴리스에서 SetRowCount 및 SetColumnCount 함수는 삭제된 행과 열에 데이터가 있는 경우에도 행 또는 열을 삭제할 수 있었습니다. 이 릴리스에서는 guardContent라는 새 매개 변수를 추가하였으며 이러한 함수를 사용하여 데이터가 있는 행과 열을 보호할 수 있습니다.

프레임워크 지원 

Next.js 지원

Next.js 프레임워크는 풀스택 웹 응용 프로그램을 만들 수 있는 React 기반 프레임워크입니다. SpreadJS는 이제 Next.js 내에서도 사용이 가능합니다. 이는 하이브리드 정적 및 서버 렌더링, TypeScript 지원, 스마트 번들링, 경로 미리 가져오기 등을 포함하여 프로덕션에 필요한 모든 기능을 제공해야 합니다.

Nuxt 지원

Nuxt는 Vue 기반의 오픈 소스 프레임워크로 웹 개발을 도우며 이제 Nuxt에서도 SpreadJS를 사용할 수 있습니다.

Angular 15 지원

SpreadJS는 이제 Angular Wrapper와 함께 최신 Angular 15를 지원합니다.

디자이너 컴포넌트 접근성 

디자이너 컴포넌트에 추가한 항목들 중 가장 주목할 만한 항목은 접근성 옵션 추가입니다. 이는 스프레드 설정 대화 상자에서 활성화할 수 있습니다.

이 기본 접근성은 WAI-ARIA(WAI-ARIA 개요)를 기반으로 합니다. 다른 화면 리더를 사용하면 특정 옵션에 대해 다른 텍스트가 읽혀질 수 있습니다. 모든 디자이너 컴포넌트 기능에서 이 지원을 계속해서 향상시킬 계획입니다.

디자이너 컴포넌트의 향상된 기능 

조건부 서식 및 명명된 범위 대화 상자 크기 조정 가능

디자이너 컴포넌트는 이제 대화 상자 크기 조정을 지원합니다. 이는 대화 상자 템플릿에 추가된 새로운 “resizable” 속성입니다.

// GC.Spread.Sheets.Designer.IDialogTemplate
export interface IDialogTemplate {
    templateName: string;
    title?: string;
    modal?: boolean;
    content: IComponentRenderType[];
    buttons?: IComponentDialogButtonOption[];
    resizable?: boolean;  // new 
}

해당 속성이 true로 설정되면 대화 상자에서는 왼쪽, 오른쪽 및 아래쪽 방향에서 크기 조정을 지원합니다. 또한 대화 상자의 초기 크기는 대화 상자의 최소 크기입니다.

글꼴 크기 드롭다운 기능 향상

디자이너 컴포넌트에서는 드롭다운을 클릭하고 숫자를 선택하여 글꼴 크기를 변경할 수 있습니다. 이 릴리스에서는 이제 드롭다운 상자를 편집할 수 있으므로 소수점을 포함하도록 글꼴 크기를 설정할 수 있습니다. 이는 1에서 409까지로 제한되며 소수점은 0.5의 배수여야 합니다.

상단의 기능들은 이번 새로운 릴리스에서 SpreadJS에 추가된 몇 가지 기능에 불과합니다! 전체 수정 사항 목록은 여기에서 찾아볼 수 있으니, 자세하게 확인해 보시길 바랍니다!

지금 바로 SpreadJS를 다운로드하여 직접 테스트해보세요!

• SpreadJS 공식 홈페이지
• SpreadJS 튜토리얼 및 샘플
• SpreadJS Q&A
• SpreadJS FAQ