반응형 공부기록/라이브러리12 Tabulator란 무엇인가? – 소개 및 설치 ✅ Tabulator란?Tabulator는 HTML 테이블을 쉽고 강력하게 만들 수 있게 도와주는 JavaScript 테이블 라이브러리입니다.표 데이터를 정렬, 필터, 편집, 내보내기 등 다양한 기능으로 다룰 수 있으며, React/Vue 등 프레임워크와도 잘 통합됩니다.주요 특징:셀 정렬, 필터링, 검색, 페이지네이션 지원Excel/CSV/PDF 내보내기 가능인라인 편집 기능성능 좋은 가상 스크롤반응형 UI 및 테마 제공모듈 기반 구조🛠️ Tabulator 설치하기방법 1. CDN 사용 (가장 간단한 방식) 방법 2. NPM 설치 (프론트 빌드 환경)npm install tabulator-tables --save // 예: React 프로젝트에서import { TabulatorFull as Tabul.. 2025. 3. 26. [Tabulator] 페이징 방법(pagination local vs. remote) Tabulator에는 pagination 기능을 지원한다. 두 가지 방식으로 사용이 가능하다. local과 remote 용어에서 보면 알 수 있듯 local은 tabulator를 사용한 페이지 내에서 pagination을 가능하게 하고 remote는 서버 자체에서 pagination을 구현할 수 있도록 지원하는 속성이다. 1. local ------ javascript ------ var table = new Tabulator("#table1", { layout:"fitColumns", placeholder:"데이터가 존재하지 않습니다.", pagination:"local", paginationSize: 10, columns : [ { title: "순번", field: "", minWidth: 50, .. 2022. 12. 28. Bootstarp Datepicker 시작날짜, 끝날짜 정하기(startdate, enddate) Bootstarp Datepicker 시작날짜, 끝날짜 정하기(startdate, enddate) 시작날짜에선 끝날짜 "이전"만 선택 가능하도록 끝날짜에선 시작날짜 "이후"만 선택 가능하도록 코드는 아래와 같음 $("#start").datepicker({ format: "yyyy-mm-dd", autoclose : true, calendarWeeks : false, clearBtn : false, showWeekDays : true , todayHighlight : true , language : "kr" }).on("changeDate", function(){ $("#end").datepicker("setStartDate", new Date($("#start").val())); }); $("#end").. 2021. 10. 7. [Tabulator] 체크박스로 행 선택 / rowSelectionChanged 콜백함수 구현 목표: 첫 번째 컬럼에 체크박스 삽입 후 체크박스로 행 선택 컨트롤 위와 같이 체크박스로 행 선택하는 건 옵션으로 간단하게 만들 수 있다. var table = new Tabulator("#example-table", { height:"311px", columns:[ {formatter:"rowSelection", titleFormatter:"rowSelection", hozAlign:"center", headerSort:false }, {title:"Name", field:"name", width:200}, {title:"Progress", field:"progress", width:100, hozAlign:"right", sorter:"number"}, {title:"Gender", field:.. 2021. 7. 27. 이전 1 2 3 다음 728x90 반응형
