728x90
반응형
✅ Tabulator란?
Tabulator는 HTML 테이블을 쉽고 강력하게 만들 수 있게 도와주는 JavaScript 테이블 라이브러리입니다.
표 데이터를 정렬, 필터, 편집, 내보내기 등 다양한 기능으로 다룰 수 있으며, React/Vue 등 프레임워크와도 잘 통합됩니다.
주요 특징:
- 셀 정렬, 필터링, 검색, 페이지네이션 지원
- Excel/CSV/PDF 내보내기 가능
- 인라인 편집 기능
- 성능 좋은 가상 스크롤
- 반응형 UI 및 테마 제공
- 모듈 기반 구조
🛠️ Tabulator 설치하기
방법 1. CDN 사용 (가장 간단한 방식)
<!-- head 태그에 추가 -->
<link href="https://unpkg.com/tabulator-tables@6.3.0/dist/css/tabulator.min.css" rel="stylesheet">
<script src="https://unpkg.com/tabulator-tables@6.3.0/dist/js/tabulator.min.js"></script>방법 2. NPM 설치 (프론트 빌드 환경)
npm install tabulator-tables --save// 예: React 프로젝트에서
import { TabulatorFull as Tabulator } from "tabulator-tables";
import "tabulator-tables/dist/css/tabulator.min.css";
*** React 기본 예제 확인하기 ***
더보기
TabulatorTable.js - Tabulator 테이블을 보여주는 컴포넌트
import React, { useEffect, useRef } from "react";
import { TabulatorFull as Tabulator } from "tabulator-tables";
import "tabulator-tables/dist/css/tabulator.min.css";
const TabulatorTable = () => {
const tableRef = useRef(null); //<div ref={tableRef} />에 접근하기 위한 DOM 참조
const tabulatorInstance = useRef(null); // Tabulator 인스턴스를 저장해두기 위한 변수 (destroy 등 관리 목적)
useEffect(() => {
// 샘플 데이터
const tableData = [
{ id: 1, name: "홍길동", age: 28, gender: "남성" },
{ id: 2, name: "김영희", age: 34, gender: "여성" },
{ id: 3, name: "이철수", age: 45, gender: "남성" },
];
// 컬럼 정의
const columns = [
{ title: "ID", field: "id", width: 100 },
{ title: "이름", field: "name" },
{ title: "나이", field: "age", sorter: "number" },
{ title: "성별", field: "gender" },
];
// Tabulator 초기화
// new Tabulator(...): 실제 테이블을 생성하는 코드
tabulatorInstance.current = new Tabulator(tableRef.current, {
data: tableData,
columns: columns,
layout: "fitColumns", //각 컬럼을 테이블 너비에 맞게 자동 조정
});
// cleanup
return () => {
if (tabulatorInstance.current) {
tabulatorInstance.current.destroy(); //컴포넌트가 사라질 때 기존 테이블 정리해서 메모리 누수 방지
}
};
}, []);
return (
<div>
<h2>📊 Tabulator Core 테이블</h2>
<div ref={tableRef} />
</div>
);
};
export default TabulatorTable;
App.js - 전체 애플리케이션의 시작점
import React from "react";
import TabulatorTable from "./TabulatorTable";
function App() {
return (
<div className="App">
<h1>React + Tabulator v6.3 기본 예제</h1>
<TabulatorTable />
</div>
);
}
export default App;
🧪 실습 예제: 기본 테이블 만들기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tabulator Demo</title>
<link href="https://unpkg.com/tabulator-tables@6.3.0/dist/css/tabulator.min.css" rel="stylesheet">
<script src="https://unpkg.com/tabulator-tables@6.3.0/dist/js/tabulator.min.js"></script>
</head>
<body>
<h2>📋 사용자 목록 테이블</h2>
<div id="example-table"></div>
<script>
const tableData = [
{id:1, name:"홍길동", age:25, gender:"남자"},
{id:2, name:"김영희", age:30, gender:"여자"},
{id:3, name:"박철수", age:28, gender:"남자"},
];
const table = new Tabulator("#example-table", {
height: "300px",
layout: "fitColumns",
data: tableData,
columns: [
{title:"ID", field:"id", width:50},
{title:"이름", field:"name"},
{title:"나이", field:"age", hozAlign:"center"},
{title:"성별", field:"gender"},
],
});
</script>
</body>
</html>✔️ 브라우저에서 바로 실행 가능하며, 테이블 정렬과 반응형 레이아웃을 바로 경험할 수 있습니다!
💡 실제 적용 사례
사례: 사내 관리자 시스템의 사용자 관리 페이지
- 사용자 정보를 테이블로 나열하고, 필터와 검색 기능 추가
- CSV로 사용자 목록 내보내기 기능 사용
- 인라인 편집으로 직접 이름/권한 수정
- Spring Boot에서 사용자 API를 만들어 Tabulator에 연동
Tabulator를 사용하면 기존에 복잡했던 HTML 테이블 관리 작업을 코드 몇 줄로 처리 가능합니다.
📌 마무리
- Tabulator는 설치도 간단하고, 기본 테이블부터 고급 기능까지 쉽게 확장 가능해요.
- 다음 글에서는 "기본 테이블 구성과 데이터 삽입"을 통해 실질적인 UI 구성을 시작해볼게요.
728x90
반응형
'공부기록 > 라이브러리' 카테고리의 다른 글
| [Tabulator] 페이징 방법(pagination local vs. remote) (0) | 2022.12.28 |
|---|---|
| Bootstarp Datepicker 시작날짜, 끝날짜 정하기(startdate, enddate) (0) | 2021.10.07 |
| [Tabulator] 체크박스로 행 선택 / rowSelectionChanged 콜백함수 (0) | 2021.07.27 |
| [Tabulator] cell & row click event 동시에! (0) | 2021.07.20 |
| [Tabulator] 검색기능 커스터마이징 (1) | 2021.07.19 |
