[javascript] TableSorter를 이용한 테이블에서 엑셀 피벗테이블 생성하기

18 Dec 2023

javascript

테이블 데이터를 시각화하는 데 피벗테이블은 매우 유용한 도구입니다. 이번 게시물에서는 TableSorter 플러그인과 PivotTable.js를 사용하여 테이블 데이터를 엑셀 피벗테이블로 변환하는 방법에 대해 살펴보겠습니다.

TableSorter에 대한 간단한 소개

TableSorter는 HTML 테이블을 정렬하고 필터링하는 JavaScript 플러그인입니다. 사용자가 열 머리글을 클릭하거나 필터를 적용하여 데이터를 정렬하고 필터링할 수 있도록 합니다.

<!DOCTYPE html>
<html>
<head>
  <title>TableSorter Example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.33.1/js/jquery.tablesorter.min.js"></script>
</head>
<body>
  <table id="myTable" class="tablesorter">
    <!-- 테이블 내용 -->
  </table>

  <script>
    $(document).ready(function() {
      $("#myTable").tablesorter();
    });
  </script>
</body>
</html>

위 예제는 TableSorter를 사용하여 HTML 테이블을 정렬하는 간단한 예시를 보여줍니다.

PivotTable.js를 사용하여 피벗테이블 생성하기

PivotTable.js는 테이블 데이터를 바탕으로 엑셀 스타일의 피벗테이블을 생성하는 데 사용됩니다. TableSorter로 정렬된 테이블 데이터를 PivotTable.js로 가져와 피벗테이블을 만들 수 있습니다.

<!DOCTYPE html>
<html>
<head>
  <title>PivotTable.js Example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.33.1/js/jquery.tablesorter.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/2.23.0/pivot.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/pivottable/2.23.0/pivot.min.css">
</head>
<body>
  <div id="pivotTable"></div>

  <script>
    $(document).ready(function() {
      $("#myTable").tablesorter();
      $("#pivotTable").pivotUI(
        // 테이블 데이터,
        {
          rows: ["row1", "row2"],
          cols: ["col1", "col2"],
          aggregatorName: "Sum",
          vals: ["value1", "value2"],
        }
      );
    });
  </script>
</body>
</html>

위 예제는 PivotTable.js를 사용하여 TableSorter로 정렬되고 필터링된 테이블 데이터를 바탕으로 피벗테이블을 생성하는 간단한 예시를 보여줍니다.

피벗테이블을 통해 데이터를 요약하고 시각화하는 것은 데이터 분석의 효과적인 방법 중 하나입니다. TableSorter와 PivotTable.js를 결합하여 데이터 시각화 및 분석 프로세스를 향상시킬 수 있습니다.

참고 자료

TableSorter: https://github.com/christianbach/tablesorter
PivotTable.js: https://pivottable.js.org/