[]
DEMOS DOC DESIGNER API
DOWNLOAD
(Showing Draft Content)

데이터 테이블 변환

SpreadJS는 일반 테이블과 데이터 테이블 간의 변환을 원활하게 수행할 수 있어, 동적 데이터 통합이나 정적 데이터 관리가 필요한 상황에서 유용합니다. 이 기능은 구조화된 데이터 바인딩이 필요한 애플리케이션(예: 실시간 분석, 보고) 또는 스냅샷 보존이 필요한 경우(예: 데이터 감사, 템플릿 재사용)에 필수적입니다. 변환 과정은 두 가지 방법으로 구현할 수 있습니다.

  1. API 기반 접근: convertToDataTable 및 convertFromDataTable과 같은 전용 메서드를 사용하여 프로그래밍 방식으로 제어.

  2. 디자이너 UI 조작: SpreadJS 디자이너의 시각적 인터페이스를 통해 변환 수행.

이 가이드에서는 두 가지 접근 방식을 단계별로 설명하며, 실용적인 사용 사례와 기술적 정확성을 강조합니다.

테이블을 데이터 테이블로 변환

기존 테이블 데이터를 데이터 매니저 환경에 쉽게 통합할 수 있습니다. 이를 통해 데이터 매니저가 제공하는 컨트롤 직접 바인딩, 고급 필터링, 정렬, 그룹화 및 데이터 소스 조작 기능을 활용하면서 시트 상의 시각적 테이블 표현을 계속 사용할 수 있습니다.

주요 정책 및 주의사항

테이블을 데이터 테이블로 변환할 때 다음 사항을 유의하세요.

  • 바인딩되지 않은 테이블: 이미 데이터 소스에 바인딩되지 않은 일반 시트 테이블만 변환 가능.

  • 데이터 및 수식 초기화: 변환 후, 원래 일반 테이블의 데이터 범위에 있는 데이터와 수식은 시트 셀에서 한 번 삭제되며, 데이터 매니저 테이블에서 가져온 데이터와 열 정의로 테이블이 채워집니다.

  • 데이터 매니저 테이블 생성: spread.dataManager().tables 컬렉션에 새로운 테이블 생성.

  • 바인딩: 원래 시트 테이블은 새로 생성된 데이터 매니저 테이블에 바인딩됩니다. 시트 테이블은 이제 데이터 매니저가 관리하는 데이터의 뷰 역할을 수행.

  • 이름 지정: 새 데이터 매니저 테이블은 원래 테이블과 동일한 이름을 사용하려 시도합니다. 동일한 이름의 테이블이 이미 존재하면, 기존 최대 숫자 +1을 붙여 자동으로 고유 이름으로 조정됩니다.

API 사용

다음 코드를 통해 일반 테이블을 데이터 테이블로 변환할 수 있습니다.

// 시트에 일반 테이블 추가
var sheet = spread.getActiveSheet();
sheet.tables.add('table1', 0, 0, 4, 4, GC.Spread.Sheets.Tables.TableThemes.light1);

// 테이블에 값 설정
sheet.setArray(0, 0, [
      ['Id', 'Name', 'Age', 'Grade'],
      [1000, 'Tom', 23, 98],
      [1001, 'Bob', 22, 80],
      [1002, 'Tony', 23, 99]
]);

let dmTable = spread.dataManager().tables['table1']; // dmTable은 undefined
// 일반 테이블을 데이터 테이블로 변환하고 데이터 매니저 테이블 생성 및 바인딩
let table = sheet.tables.convertToDataTable('table1');
// table1에서 데이터 매니저 테이블이 생성됨
let bindingTable = table.getBindingSource(); // 일반 테이블이 데이터 테이블로 변환됨
dmTable = spread.dataManager().tables['table1']; // dmTable이 생성됨
// bindingTable === dmTable // true 반환. table에서 가져온 bindingTable은 데이터 매니저의 dmTable과 동일

디자이너 사용

디자이너를 통해 시각적으로 변환을 수행할 수 있습니다.

  1. 테이블 선택: 변환할 일반 테이블 내 아무 셀이나 클릭. 그러면 리본의 Table Design 탭이 활성화됩니다. Table Design 탭의 Tables Binding 박스 내 Binding Source가 비어 있음.

    5.2.93b35a.png

  2. 변환 옵션 접근:

    • 리본의 Table Design 탭 → "Table Binding" 섹션 → "Convert to Data Table" 버튼 클릭.

      5.3.04d0ff.png

    • 또는 테이블에서 마우스 오른쪽 클릭 → "Table" 서브 메뉴 → "Convert to Data Table" 선택.

      image.309a89.png

  3. OK 클릭: 변환 확인.

    image.1f15a6.png

  4. 변환 완료. 이전에 비어있던 바인딩 소스에 "Table2"가 표시되며, 원래 일반 테이블이 데이터 테이블로 성공적으로 변환됨.

    5.6.82217d.png

    image.909744.png

데이터 테이블을 일반 테이블로 변환

SpreadJS는 시트 테이블을 데이터 매니저 소스와 연결 해제할 수 있습니다. 데이터 바인딩된 테이블을 변환하면:

  • 테이블에 표시된 데이터와 열 수식이 테이블이 차지하는 시트 범위의 셀에 직접 복사되어 설정됩니다.

  • 시트 테이블 인스턴스가 일반 테이블로 변경되며, 더 이상 데이터 매니저에 바인딩되지 않습니다.

  • 원본 데이터 매니저 테이블은 삭제되지 않고 유지되며, 다른 용도로 계속 사용 가능.

이 기능은 특정 테이블 인스턴스에서 데이터 소스로부터 스냅샷을 가져와, 데이터 매니저 연결 없이 정적으로 작업하고자 할 때 유용합니다.

API 사용

다음 코드를 통해 데이터 바인딩 테이블을 일반 테이블로 변환할 수 있습니다.

var sheet = spread.getActiveSheet();

// 데이터 소스 추가
const productsTable = spread.dataManager().addTable("products", {
  remote: {
         read: {
         url: 'https://northwind.vercel.app/api/products'
        }
  }
});

productsTable.fetch().then(()=>{
// 일반 테이블 추가 및 데이터 매니저 테이블 바인딩
sheet.tables.addFromDataSource("Table1", 0, 0, "products", GC.Spread.Sheets.Tables.TableThemes.medium7);

// 데이터 매니저 테이블을 바인딩한 테이블을 일반 테이블로 변환
let table = sheet.tables.convertFromDataTable('Table1');
let bindingTable = table.getBindingSource(); // 데이터 테이블이 일반 테이블로 변환되면 bindingTable은 null
});

디자이너 사용

디자이너 를 통해 시각적으로 변환을 수행할 수 있습니다.

  1. 테이블 선택: 변환할 데이터 테이블 내 아무 셀이나 클릭. Table Design 탭이 활성화됨.

    4.1.9b0807.png

  2. 변환 옵션 접근:

    • 리본의 Table Design 탭 → "Table Binding" 섹션 → "Convert from Data Table" 버튼 클릭.

      4.2.fd44d3.png

    • 또는 테이블에서 마우스 오른쪽 클릭 → "Table" 서브 메뉴 → "Convert from Data Table" 선택.

      image.b7e434.png

  3. OK 클릭: 변환 확인.

    image.d076e1.png

  4. 변환 완료. Table Design 탭의 Tables Binding 박스 내 Binding Source가 비어 있음.

    4.3.6b0de3.png