코딩&AI프로젝트

Tabulator로 간단한 데이터 테이블 만들기

mywarmstory 2024. 12. 17. 13:33

Tabulator는 웹에서 데이터 테이블을 쉽게 생성하고 관리할 수 있는 JavaScript 기반 라이브러리입니다. 필터링, 정렬, 페이징, 데이터 입력 등 강력한 기능을 제공하며, 기본 사용법도 매우 간단합니다.

아래에서 Tabulator의 기본 사용법을 친절히 설명하겠습니다.

1. Tabulator 설치

Tabulator를 사용하려면 다음과 같은 방법으로 설치할 수 있습니다.

1.1. CDN 사용

HTML 파일에 Tabulator의 CSS와 JavaScript를 추가합니다:

1.2. NPM 설치

Node.js 환경에서 NPM으로 설치:

npm install tabulator-tables

설치 후 import를 사용하여 Tabulator를 로드:

import Tabulator from 'tabulator-tables';
import 'tabulator-tables/dist/css/tabulator.min.css';

2. 기본 테이블 생성

2.1. HTML 구조

Tabulator는 빈 <div> 태그에 데이터를 렌더링합니다:

<div id="example-table"></div>

2.2. JavaScript로 Tabulator 초기화

Tabulator 생성자를 사용하여 테이블을 초기화합니다:

// 데이터 배열
const tableData = [
    { id: 1, name: "John", age: 29, gender: "Male" },
    { id: 2, name: "Jane", age: 34, gender: "Female" },
    { id: 3, name: "Steve", age: 23, gender: "Male" },
];

// Tabulator 초기화
const table = new Tabulator("#example-table", {
    data: tableData, // 테이블에 표시할 데이터
    layout: "fitColumns", // 칼럼 크기 자동 맞춤
    columns: [ // 컬럼 정의
        { title: "ID", field: "id", sorter: "number" },
        { title: "Name", field: "name", sorter: "string", editor: "input" },
        { title: "Age", field: "age", sorter: "number", editor: "number" },
        { title: "Gender", field: "gender", sorter: "string" },
    ],
});

결과:

위 코드는 다음과 같은 테이블을 생성합니다:

ID: 숫자로 정렬 가능.
Name: 입력 창에서 수정 가능.
Age: 숫자로 정렬 및 입력 가능.
Gender: 문자열 정렬 가능.

3. 기본 기능

3.1. 데이터 추가

JavaScript 코드에서 새로운 행을 추가하려면:

table.addRow({ id: 4, name: "Alice", age: 28, gender: "Female" });

3.2. 데이터 삭제

특정 행을 삭제하려면:

table.deleteRow(2); // ID가 2인 행 삭제

3.3. 데이터 가져오기

테이블 데이터를 가져오려면:

const allData = table.getData();
console.log(allData);

3.4. 데이터 필터링

특정 조건으로 데이터를 필터링:

table.setFilter("age", ">", 30); // 나이가 30보다 큰 데이터만 표시

필터 제거:

table.clearFilter();

3.5. 데이터 정렬

특정 컬럼으로 정렬:

table.setSort("name", "asc"); // 이름 기준 오름차순 정렬

4. 추가 옵션

4.1. 페이징

Tabulator는 기본적으로 페이징을 지원합니다:

const table = new Tabulator("#example-table", {
    data: tableData,
    layout: "fitColumns",
    pagination: "local", // 로컬 데이터 페이징
    paginationSize: 5, // 한 페이지당 표시할 행 수
    columns: [
        { title: "ID", field: "id" },
        { title: "Name", field: "name" },
        { title: "Age", field: "age" },
    ],
});

4.2. AJAX 데이터 로딩

서버에서 데이터를 불러오려면 AJAX를 설정합니다:

const table = new Tabulator("#example-table", {
    ajaxURL: "https://api.example.com/data", // 데이터 가져올 URL
    layout: "fitColumns",
    columns: [
        { title: "ID", field: "id" },
        { title: "Name", field: "name" },
        { title: "Age", field: "age" },
    ],
});

5. Tabulator 활용 예제

5.1. CSV/Excel 내보내기

Tabulator는 CSV, Excel 파일로 데이터를 내보낼 수 있습니다:

table.download("csv", "data.csv"); // CSV 파일로 다운로드
table.download("xlsx", "data.xlsx", { sheetName: "Data" }); // Excel 파일로 다운로드

5.2. 이벤트 처리

행을 클릭했을 때 이벤트를 처리하려면:

table.on("rowClick", function (e, row) {
    alert("You clicked on row " + row.getData().id);
});

6. Tabulator 사용 시 유용한 팁

CSS 커스터마이징: tabulator.min.css를 기반으로 UI를 쉽게 수정할 수 있습니다.
모듈화: Tabulator는 다양한 확장 기능(필터, 편집기 등)을 플러그인처럼 추가할 수 있습니다.
프레임워크 통합: React, Vue.js, Angular와 통합해 프로젝트에서 활용할 수 있습니다.

아래는 Tabulator를 사용한 HTML과 JavaScript 코드 예제입니다. 이 코드는 간단한 데이터 테이블을 생성하고 필터링, 정렬, 페이징, 데이터 추가 및 삭제 등의 기능을 보여줍니다.

예제: Tabulator로 간단한 데이터 테이블 만들기

HTML 코드

Tabulator Example

JavaScript 코드 (script.js)

// 샘플 데이터
const tableData = [
    { id: 1, name: "John Doe", age: 28, gender: "Male" },
    { id: 2, name: "Jane Smith", age: 34, gender: "Female" },
    { id: 3, name: "Steve Brown", age: 21, gender: "Male" },
    { id: 4, name: "Emily Davis", age: 42, gender: "Female" },
];

// Tabulator 테이블 생성
const table = new Tabulator("#example-table", {
    data: tableData, // 데이터 삽입
    layout: "fitColumns", // 컬럼 크기 자동 맞춤
    pagination: "local", // 로컬 페이징
    paginationSize: 3, // 한 페이지에 표시할 행 수
    selectable: 1, // 한 번에 하나의 행 선택 가능
    columns: [
        { title: "ID", field: "id", sorter: "number", width: 50 },
        { title: "Name", field: "name", sorter: "string", editor: "input" },
        { title: "Age", field: "age", sorter: "number", editor: "number" },
        { title: "Gender", field: "gender", sorter: "string", editor: "select", editorParams: { values: ["Male", "Female"] } },
    ],
});

// 행 추가 버튼 이벤트
document.getElementById("add-row").addEventListener("click", () => {
    table.addRow({ id: table.getData().length + 1, name: "New Person", age: 30, gender: "Male" });
});

// 행 삭제 버튼 이벤트
document.getElementById("delete-row").addEventListener("click", () => {
    const selectedRow = table.getSelectedRows()[0]; // 선택된 행 가져오기
    if (selectedRow) {
        selectedRow.delete();
    } else {
        alert("Please select a row to delete!");
    }
});

// 필터 제거 버튼 이벤트
document.getElementById("clear-filter").addEventListener("click", () => {
    table.clearFilter(); // 모든 필터 제거
});

// CSV 다운로드 버튼 이벤트
document.getElementById("download-csv").addEventListener("click", () => {
    table.download("csv", "table-data.csv"); // CSV 파일 다운로드
});

결과

테이블 표시: 기본적으로 ID, Name, Age, Gender 필드가 표시됩니다.
기능:
- 행 추가: Add Row 버튼을 누르면 새로운 행이 추가됩니다.
- 행 삭제: 테이블에서 행을 선택한 뒤 Delete Selected Row 버튼을 누르면 해당 행이 삭제됩니다.
- 필터 제거: 필터를 설정한 후 Clear Filter 버튼을 누르면 필터가 초기화됩니다.
- CSV 다운로드: Download CSV 버튼을 누르면 현재 테이블 데이터를 CSV 파일로 다운로드합니다.
페이징: 3개의 행씩 표시되며, 페이징 버튼으로 이동할 수 있습니다.
편집 가능: 각 셀은 클릭하면 값을 수정할 수 있습니다.

스크린샷 (결과 예상)

테이블이 중앙에 배치되고, 상단에는 ID, Name, Age, Gender 컬럼이 표시됩니다.
아래에는 각 버튼이 배치되어 있으며, 버튼을 클릭할 때마다 테이블에 변경 사항이 반영됩니다.

이 코드를 실행해 보면서 Tabulator의 기본 기능을 경험해 보세요! 필요하면 추가적인 기능도 알려드릴 수 있습니다. 😊

저작자표시 (새창열림)