2026년 3분기 신규기능(Ver 8.4.0.10 ~ )
Ver 8.4.0.12-20260716-13
1. 브라우저 너비에 따라 컬럼을 자동으로 숨기고 sub-row로 확인할 수 있는 반응형 컬럼 (Cfg) ResponsiveCol 기능 추가
시트 너비가 좁아지면 우선순위가 낮은 컬럼이 자동으로 숨겨지고, 숨겨진 데이터는 확장 가능한 sub-row에서 확인할 수 있는 Cfg.ResponsiveCol 기능이 추가되었습니다.
SearchMode:2 조회 전용이며, 서브옵션 HeaderColor/HeaderWidth/Expanded를 지원합니다.
| value | description |
|---|---|
| true/false | 반응형 컬럼 사용 여부 |
| Object | 반응형 컬럼 관련 상세 설정 |
[Object 설정]
| value | type(defalut) | description |
|---|---|---|
| HeaderColor | Color String(#f0f2f5) | 서브 로우 헤더 색상 |
| HeaderWidth | Int(100) | 서브 로우 헤더 텍스트 영역 너비 |
| Expanded | boolean(false) | 서브 로우 표출 시 기본 펼침 여부 |
제약 사항은 아래와 같습니다.
[제약사항]
SearchMode:2인 단순 조회용 시트에서만 사용 가능sub-row편집 불가- ResponsiveCol 설정 시
DataMerge:0자동 설정,setMergeRange사용 불가 FitWidth,RelWidth사용 불가- 소계, 합계, Solid, Foot, Head 행 사용 불가
- 멀티레코드, 그룹시트, 트리시트 사용 불가
[사용 예시]
options.Cfg = { ResponsiveCol: true // 또는 상세 설정 // ResponsiveCol: { // HeaderColor: '#f0f2f5', // HeaderWidth: 100, // Expanded: false // } }; |
[사용 화면]
[CSS 추가]
각 테마별 css에 다음 규칙이 추가되었습니다.
| .IBResponsiveToggleIcon { display: inline-block !important; width: 16px !important; height: 16px !important; min-width: 16px; min-height: 16px; cursor: pointer; vertical-align: middle; background-repeat: no-repeat !important; background-position: center center !important; background-size: 12px 12px !important; user-select: none; } .IBMain .IBResponsiveSubRow { background: #f7f8fa; } .IBMain .IBResponsiveSubRow > td { padding: 0 !important; border-bottom: 1px solid #ddd; } .IBMain .IBResponsiveSubRowContent { padding: 0; width: 100%; box-sizing: border-box; } .IBMain .IBResponsiveSubGrid { border-collapse: collapse; font-size: 12px; table-layout: fixed; width: 100%; } .IBMain .IBResponsiveSubGrid > tbody > tr > td, .IBMain .IBResponsiveSubGrid > tr > td { border-bottom: 1px solid #ddd; } .IBMain .IBResponsiveSubGridLabel { background: #f0f2f5; font-weight: 600; color: #333; white-space: nowrap; width: 80px; overflow: hidden; text-overflow: ellipsis; padding: 5px 10px; border-right: 1px solid #ddd; } .IBMain .IBResponsiveSubGridValue { background: #fff; color: #555; text-align: left; padding: 5px 10px !important; border-right: 0 !important; } .IBMain .IBResponsiveSubGridValue > * { text-align: left !important; } .IBMain .IBResponsiveSubGridValue table { margin: 0 !important; } .IBMain .IBResponsiveSubGridValue .IBCellBase { border: 0 !important; } .IBMain .IBResponsiveSubGridValue u.IBSheetButton, .IBMain .IBResponsiveSubGridValue button.IBSheetButton, .IBMain .IBResponsiveSubGridValue button.IBRightButton { display: inline-block !important; width: auto !important; min-width: 60px; height: 16px; max-height: 16px; padding: 0 12px !important; margin: 0 !important; vertical-align: middle !important; text-align: center !important; line-height: 16px !important; } .IBMain .IBResponsiveSubGridValue u { display: inline-block !important; max-height: 16px !important; line-height: 16px !important; margin: 0 !important; vertical-align: middle !important; } |
Ver 8.4.0.11-20260709-13
1. Enum 리스트 표출 방향을 강제로 지정할 수 있는 Col.EnumExpand 옵션 추가
기존에는 Enum 리스트 표출 위/아래 방향이 자동 계산되어 원하는 방향으로 강제할 수 없었습니다. Col.EnumExpand으로 표출 방향을 강제 지정할 수 있습니다.
[사용 예시]
{ Header: "종류", Type: "Enum", EnumExpand: "Up" // "Up" = 위 강제, "Down" = 아래 강제 } |
2. 다이얼로그 관련 템플릿 폴더/파일 누락 시 출력하는 locale 메시지 추가
다이얼로그 템플릿 폴더 또는 html 파일이 없을 때 출력할 메시지가 로케일 파일에 추가되었습니다.
| "Lang" : { "Dialog" : { ... // ko, en, jp, cn 에 모두 추가 // ko "NoTemplate" : "템플릿 폴더 또는 파일이 존재하지 않습니다. (%1)", // en "NoTemplate" : " The template folder or file does not exist. (%1)", // jp "NoTemplate" : " テンプレートフォルダまたはファイルが存在しません (%1)", // cn "NoTemplate" : " 模板文件夹或文件不存在 (%1)", ... } } |
Ver 8.4.0.10-20260702-15
1. exportData CSV 다운로드 시 CSV Injection(수식 인젝션) 방어를 위한 escapeCsvInjection 옵션 추가
CSV 파일 다운로드 시 셀 값이 수식·명령으로 해석될 수 있는 문자(=, +, -, @ 등)로 시작하는 경우 앞에 작은따옴표(')를 붙여 텍스트로 강제하여 CSV Injection 공격을 방어합니다.
기본값은 false이며, 사용자가 옵션을 활성화한 경우에만 동작합니다. CSV 다운로드에만 적용되며 xlsx / xls 는 대상이 아닙니다.
[사용 예시]
sheet.exportData({ type: 'csv', escapeCsvInjection: true // CSV Injection 방어 활성화 }); |