[javascript] Parcel에서 표 라이브러리를 사용하는 방법은?

22 Nov 2023

javascript

먼저, 표 라이브러리를 설치해야합니다. 이 예제에서는 Tabulator 라이브러리를 사용합니다. 프로젝트의 루트 디렉토리에서 다음 명령을 실행하여 Tabulator를 설치합니다:

npm install tabulator-tables

이제 Tabulator를 사용할 준비가 되었습니다. 다음 단계는 HTML에서 스타일시트와 스크립트를 추가하는 것입니다. 배포용 HTML 파일을 프로젝트 루트에 생성하고 다음과 같이 수정하세요:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tabulator-tables@4.9.5/dist/css/tabulator.min.css">
</head>
<body>

  <div id="table"></div>
  
  <script src="index.js"></script>
</body>
</html>

이제 JavaScript 파일을 만들고 표를 생성합니다. 프로젝트 루트에 index.js 파일을 생성하고 다음과 같이 입력하세요:

import Tabulator from 'tabulator-tables';

// 데이터 배열
const data = [
  { id: 1, name: 'Alice', age: 27 },
  { id: 2, name: 'Bob', age: 32 },
  { id: 3, name: 'Charlie', age: 46 },
];

// 테이블 생성
const table = new Tabulator('#table', {
  data: data,
  columns: [
    { title: 'ID', field: 'id' },
    { title: 'Name', field: 'name' },
    { title: 'Age', field: 'age' },
  ],
});

// 테이블 렌더링
table.render();

이제 Parcel 개발 서버를 실행하여 애플리케이션을 실행할 수 있습니다. 프로젝트 루트에서 다음 명령을 실행하세요:

npx parcel index.html

애플리케이션이 성공적으로 실행되면 테이블이 표시됩니다. 데이터를 변경하고 스타일을 수정하여 Tabulator 라이브러리의 다양한 기능을 활용할 수 있습니다.

이 글에서는 Parcel에서 표 라이브러리를 사용하는 방법을 알아보았습니다. Parcel을 사용하면 빠르고 간편하게 표를 프로젝트에 추가할 수 있습니다. Tabulator 외에도 다른 표 라이브러리를 사용할 수 있으며, 동일한 절차에 따라 추가할 수 있습니다. Happy coding!