SpreadJS로 JSON 데이터 바인딩하기

SpreadJS 여러 기능을 테스트를 하는 중 이번에는 setDataSource() 메서드로 JSON 데이터 바인딩하는 기능에 대해서 보았습니다.

---

1. 기본 바인딩 구조

SpreadJS에서 JSON 데이터를 시트에 바인딩하려면  워크북 생성 → 시트 지정 → `setDataSource()` 순서로 연결하면 됩니다.

예제:

<div id="ss" style="height: 400px;"></div>

<script>
  const data = [
    { name: "Alice", age: 30, dept: "개발" },
    { name: "Bob", age: 25, dept: "디자인" }
  ];

  const spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 1 });
  const sheet = spread.getActiveSheet();

  sheet.autoGenerateColumns = true;
  sheet.setDataSource(data);
</script>

엑셀 데이터 바인딩

딱히 설정할 게 없고, JSON 객체의 key가 열로 자동 매핑됩니다.

 

 

2. 열 수동 설정

자동으로 열이 생성되는 게 싫다면 autoGenerateColumns를 꺼두고 보여줄 열만 직접 바인딩할 수 있습니다.

 

sheet.autoGenerateColumns = false;
sheet.setDataSource(data); // 데이터 먼저 바인딩

sheet.bindColumns([
  { name: "name", displayName: "이름", size: 100 },
  { name: "dept", displayName: "부서", size: 120 }
]);

sheet.setColumnCount(2); // 필요 없는 열 숨김

 

이 방식이 더 명확합니다. 헤더 이름도 설정 가능하구요

3. 데이터 추가 반영

바인딩된 데이터는 시트에서 직접 수정할 수 있습니다.
아래 코드는 이외 데이터 추가 후 반영하는 방법입니다

  sheet.autoGenerateColumns = true;
  sheet.setDataSource(data);

  // 데이터 추가 후 다시 바인딩
  data.push({ name: "Charlie", age: 28, dept: "마케팅" });
  sheet.setDataSource([...data]);

 

4. 활용 예: API 연결

실제로는 서버에서 데이터를 받아와서 바인딩하는 경우가 많은데 간단한 fetch 연동 예시는 아래와 같습니다.

 fetch('/api/employees')
   .then(res => {
    return res.json();
  })
    .then(data => {
    // json 출력
    sheet.setDataSource(data);
    sheet.bindColumn(0,"name")
    sheet.bindColumn(1,"address")
  })
    .catch(err => {
  });

 

---

결론적으로 복잡한 테이블 구성 없이도 setDataSource() 하나로 데이터를 바인딩할 수 있는 점은 확실히 편한 거 같아요.

 

SpreadJS에서 필터, 정렬도 지원하기 때문에 데이터 테이블 UI 만들 때는 앞으로도 개발할 때 나쁘지 않을 거 같네요

여기서 적지는 않았지만 표 바인딩도 있어서 데이터 연결해서 바로 테이블로 데이터 띄워야 할 때 한 번 써봐야겠어요