투케이2K

566. (javaScript) 자바스크립트 tabulator 라이브러리 사용해 Custom Table Style 커스텀 그리드 형식 표 테이블 스타일 지정 및 기본 이벤트 확인 본문

JavaScript

566. (javaScript) 자바스크립트 tabulator 라이브러리 사용해 Custom Table Style 커스텀 그리드 형식 표 테이블 스타일 지정 및 기본 이벤트 확인

투케이2K 2026. 7. 2. 19:28
728x90
반응형

[개발 환경 설정]

​

개발 툴 : Edit++ / Vscode

​

개발 언어 : JavaScript

​

 

[소스 코드]

 

-----------------------------------------------------------------------------------------
[사전 설명 및 설정 사항]
-----------------------------------------------------------------------------------------

- 개발 환경 : Web


- 개발 기술 : JavaScript / tabulator / Library


- 사전) 👉 tabulator 라이브러리 간략 설명 : 

  >> Tabulator 은 브라우저에서 AG Grid 비슷한 기능을 제공하는 데이터 그리드 라이브러리입니다.

  >> Tabulator 은 정렬, 필터, 페이징, 셀 편집, 엑셀 다운로드 등을 기본 지원합니다.

  >> Tabulator 은 특히 CDN 으로 바로 사용할 수 있어서 사내 운영툴이나 관리자 화면에 많이 적합합니다.

  >> Tabulator 웹 CDN 의존성 설정 코드 : 

    <link href="https://unpkg.com/tabulator-tables/dist/css/tabulator.min.css" rel="stylesheet">
    <script src="https://unpkg.com/tabulator-tables/dist/js/tabulator.min.js"></script>

-----------------------------------------------------------------------------------------





-----------------------------------------------------------------------------------------
[소스 코드]
-----------------------------------------------------------------------------------------

<!DOCTYPE HTML>
<html lang="ko" translate="no">
<head>
    <title>javaScriptTest</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- 반응형 구조 만들기 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

    <!-- Chrome / Edge (Chromium)에서 자동 번역 기능을 완전히 비활성화 -->
    <meta name="google" content="notranslate">


    <!-- [Tabulator : 스타일 적용 CDN 주소 설정] --> 
    <link href="https://unpkg.com/tabulator-tables/dist/css/tabulator.min.css" rel="stylesheet">
    

    <!-- 내부 CSS 스타일 지정 -->
    <style>

      html, body {
        width: 100%;
        height: 100%;
        margin : 0 auto;
        padding : 0;
        border : none;
        background-color: #666;
      }

      
      /* Tabulator 커스텀 스타일 지정 */
      
      /* 테이블 전체 */
      .tabulator {
          background: #fff;
          border: 1px solid #e9ecef;
          border-radius: 12px;
          overflow: hidden;
          font-size: 14px;

          box-shadow:
              0 2px 8px rgba(0,0,0,.06),
              0 1px 2px rgba(0,0,0,.04);
      }

      /* Header */
      .tabulator-header {
          height: 50px;
          background: #0d6efd !important;
          border-bottom: none;
      }

      /* Header Cell */
      .tabulator-col {
          height: 50px;
          background: #0d6efd !important;
          color: white;
          border-right: 1px solid rgba(255,255,255,.15);
      }

      /* Header Title */
      .tabulator-col-title {
          font-weight: 600;
          text-align: center;
      }

      /* Header Content */
      .tabulator-col-content {
          height: 50px;
          display: flex;
          align-items: center;
          justify-content: center;
      }
      
      /* 정렬 화살표 */
      /* .tabulator-col-sorter {
          margin-left: auto;
      } */

      /* 행 */
      .tabulator-row {
          min-height: 50px;
          border-bottom: 1px solid #f1f3f5;
          transition: all .15s ease;
      }

      /* Zebra */
      .tabulator-row:nth-child(even) {
          background: #f8faff;
      }

      /* Hover */
      .tabulator-row:hover {
          background: #e7f1ff !important;
      }

      /* 선택 */
      .tabulator-row.tabulator-selected {
          background: #cfe2ff !important;
          color: #084298;
      }

      /* Cell */
      .tabulator-cell {
          line-height: 50px;
                    
          display: flex;
          align-items: center;   /* 세로 중앙 */          

          padding: 0 12px;

          border-right: 1px solid #f1f3f5;                  
      }

      /* 마지막 컬럼 border 제거 */
      .tabulator-cell:last-child {
          border-right: none;
      }
      
      /* Footer */
      .tabulator-footer {          
          background: #f8fbff !important;
          border-top: 1px solid #dbeafe;
          padding: 10px 12px;
      }

      /* Page Button 공통 */
      .tabulator-page {
          min-width: 36px;
          height: 36px;

          border: 1px solid #013970 !important;
          border-radius: 8px !important;

          background: #fff !important;
          color: #495057 !important;

          margin: 0 3px;
          transition: all .15s ease;
      }

      /* Page Button 공통 */
      .tabulator-footer button {
          min-width: 36px;
          height: 36px;

          border: 1px solid #dee2e6;
          background: #fff;
          color: #0d6efd;

          border-radius: 8px;

          margin: 0 2px;

          font-size: 13px;
          font-weight: 500;

          transition: all .2s ease;
      }

      /* Hover */
      .tabulator-footer button:hover {
          background: #e7f1ff;
          border-color: #0d6efd;
      }

      /* 현재 페이지 */

      .tabulator-page.active,
      .tabulator-page[aria-current="page"] {
          background: #0d6efd !important;
          color: white !important;
          border-color: #0d6efd !important;
      }

      /* Disabled */
      .tabulator-footer button:disabled {
          opacity: .5;
          cursor: not-allowed;
      }

    </style>





    <!-- [jquery : CDN 주소 설정] --> 
    <script src="https://code.jquery.com/jquery-latest.min.js"></script>

    
    <!-- [Tabulator : CDN 주소 설정] -->     
    <script src="https://unpkg.com/tabulator-tables/dist/js/tabulator.min.js"></script>







    <!-- [자바스크립트 코드 지정] -->
    <script type="module">    


      // -----------------------------------------------------------------
      // ✅ [Window.onload 웹 브라우저 로드 완료]
      // -----------------------------------------------------------------
      window.onload = async function() {
        console.log("[window onload] : [html 최초 로드 및 이벤트 상시 대기 실시] : [start]");

        try {

          // ------------------------------------------------
          // 🟦 Tabulator 간략 설명
          // ------------------------------------------------ 
          /*
          1. Tabulator 은 브라우저에서 AG Grid 비슷한 기능을 제공하는 데이터 그리드 라이브러리입니다.

          2. Tabulator 은 정렬, 필터, 페이징, 셀 편집, 엑셀 다운로드 등을 기본 지원합니다.

          3. Tabulator 은 특히 CDN 으로 바로 사용할 수 있어서 사내 운영툴이나 관리자 화면에 많이 적합합니다.
          */
          // ------------------------------------------------ 


          // ------------------------------------------------
          // 🟦 tableData 변수 생성
          // ------------------------------------------------           
          const tableData = [
              { id:1, name:"A", age:30 },
              { id:2, name:"B", age:25 },
              { id:3, name:"C", age:28 },
              { id:4, name:"D", age:24 },
              { id:5, name:"E", age:26 },
              { id:6, name:"F", age:38 },
              { id:7, name:"G", age:28 },
              { id:8, name:"H", age:40 },
              { id:9, name:"I", age:70 },
              { id:10, name:"H", age:80 },
          ];


          // ------------------------------------------------
          // 🟦 new Tabulator 사용해 정의 된 data 를 그리드 형식으로 표시 수행
          // ------------------------------------------------           
          /*
          1. layout 속성 타입 정리 : 

            - fitColumns : 현재 테이블 폭에 맞춰 컬럼을 자동 분배 (전체 영역을 꽉 채움)
            - fitData : 컬럼 내용 길이에 맞게 너비를 계산 (필요한 크기만 사용)
            - fitDataStretch : 내용 기준으로 계산 후 남는 공간을 마지막 컬럼에 할당

          2. selectable 행 선택 기능 조회 방법 정리 : 

            - const rows = table.getSelectedData();

          3. columns 컬럼 정의 영역 추가 설명 : 

            - title : 화면에 표시되는 헤더명
            - field : 데이터 객체의 속성명과 매핑됩니다.
            - 컬럼에 자주 추가하는 옵션 : 
                width : 컬럼 폭 지정
                sorter : 데이터 정렬 타입
                editor : 셀 편집 가능
                hozAlign : 데이터 표시 정렬
                formatter : 기본 제공 UI 표시

          4. responsiveLayout 속성 타입 정리 : 

            - hide : 화면이 좁아지면 우측 컬럼부터 자동으로 숨깁니다.
            - collapse : 숨겨진 컬럼 데이터를 행 아래쪽으로 표시합니다.
          */
          // ------------------------------------------------           
          const table = new Tabulator("#userTable", {
              data: tableData, // 테이블에 표시할 데이터를 지정합니다.

              // height:"500px", // 영역 높이 지정

              layout: "fitColumns", // 컬럼 너비를 어떻게 계산할지 결정합니다.

              responsiveLayout:"hide", // 화면 크기가 작아져서 컬럼이 모두 표시되지 못할 때 어떻게 처리할지 결정
            
              pagination: true, // 페이징 기능 활성화합니다.
              paginationSize: 5, // 페이지당 표시 건수입니다.

              movableColumns: true, // 컬럼 순서를 Drag & Drop으로 변경할 수 있습니다.

              selectable: true, // 행 선택 기능 활성화 설정입니다. 

              columns: [ // 컬럼 정의 영역입니다.
                  { 
                    title:"ID", 
                    field:"id",                    
                    sorter:"number", // 데이터 정렬 기준 (string | number)
                    headerHozAlign: "center", // 헤더 표시 정렬 (left | center | right)
                    hozAlign:"center" // 데이터 표시 정렬 (left | center | right)
                  },
                  { 
                    title:"이름", 
                    field:"name",
                    editor:"input", // 셀 편집 기능
                    headerHozAlign: "center", // 헤더 표시 정렬 (left | center | right)
                    hozAlign:"center" // 데이터 표시 정렬 (left | center | right)
                  },
                  { 
                    title:"나이", 
                    field:"age",                  
                    sorter:"number",
                    headerHozAlign: "center", // 헤더 표시 정렬 (left | center | right)
                    hozAlign:"center" // 데이터 표시 정렬 (left | center | right)

                  }
              ]
          });


          // ------------------------------------------------
          // 🟦 rowClick 이벤트 감지
          // ------------------------------------------------   
          table.on("rowClick", function(e, row){
              console.log("행 클릭 : ", row.getData());
          });


          // ------------------------------------------------
          // 🟦 cellClick 이벤트 감지
          // ------------------------------------------------            
          table.on("cellClick", function(e, cell){
              console.log("셀 클릭 : ", cell.getValue());
          });


          // ------------------------------------------------
          // 🟦 cellEdited 이벤트 감지
          // ------------------------------------------------    
          table.on("cellEdited", function(cell){
              console.log("셀 수정 완료 : ", cell.getValue());
          });
          
        }
        catch (exception) {
          console.error("[window onload] : [Exception] : ❌ 예외 상황 발생 : ", exception);

        }

      };


    </script>


</head>


<body>

    <div id="userTable"></div>

</body>

</html>

-----------------------------------------------------------------------------------------





-----------------------------------------------------------------------------------------
[참고 사이트]
-----------------------------------------------------------------------------------------

▶️ [자바스크립트 tabulator 라이브러리 사용해 기본 배열 데이터 Grid 그리드 형식 표 그리기 및 페이징 처리 수행]

https://kkh0977.tistory.com/8946

https://blog.naver.com/kkh0977/224332093603


▶️ [자바스크립트 marked 라이브러리 Markdown md 파일 형식 HTML 로 변환 출력 수행 - Markdown 문자열을 HTML로 파싱]

https://kkh0977.tistory.com/8923

https://blog.naver.com/kkh0977/224319102680


▶️ [자바스크립트 SweetAlert 라이브러리 사용해 input 입력 받기 팝업창 생성 - prompt , text , number , password]

https://kkh0977.tistory.com/8788

https://blog.naver.com/kkh0977/224267047454


▶️ [자바스크립트 SweetAlert 라이브러리 사용해 팝업창 활성 시 확인 및 취소 버튼 외 동적 버튼 추가 생성 , 팝업창 자동 닫힘 방지 수행]

https://kkh0977.tistory.com/8784

https://blog.naver.com/kkh0977/224261592220


▶️ [자바스크립트 SweetAlert 라이브러리 사용해 메뉴 리스트 표시 및 메뉴 선택 팝업창 생성 수행 - radio list alert]

https://kkh0977.tistory.com/8783

https://blog.naver.com/kkh0977/224261583820


▶️ [toastr js 라이브러리 사용해 토스트 알림 메시지 표시 실시]

https://kkh0977.tistory.com/981

https://blog.naver.com/kkh0977/222429771901?trackingCode=blog_bloghome_searchlist

-----------------------------------------------------------------------------------------
 

[화면 출력]

​

 
728x90
반응형
저작자표시 (새창열림)

'JavaScript' 카테고리의 다른 글

568. (javaScript) 자바스크립트 document.addEventListener visibilitychange 이벤트 사용해 실시간 브라우저 표시 및 보이는 상태 확인  (0) 2026.07.07
567. (javaScript) 자바스크립트 웹 브라우저에서 앱 딥링크 (Deep Link) 스키마 (Scheme) 앱 실행 및 앱 마켓 페이지 이동 수행  (0) 2026.07.06
565. (javaScript) 자바스크립트 tabulator 라이브러리 사용해 기본 배열 데이터 Grid 그리드 형식 표 그리기 및 페이징 처리 수행  (0) 2026.06.30
564. (javaScript) 자바스크립트 new Function 사용해 동적 string 문자열 소스 코드 작성 후 함수 실행 - 파라미터 첨부  (0) 2026.06.29
563. (javaScript) 자바스크립트 string 문자열 JSON Path 경로 체크 , 값 확인 및 갱신 - Path Check , Get Value , Set Value  (0) 2026.06.26
'JavaScript' Related Articles more
Comments