투케이2K

565. (javaScript) 자바스크립트 tabulator 라이브러리 사용해 기본 배열 데이터 Grid 그리드 형식 표 그리기 및 페이징 처리 수행 본문

JavaScript

565. (javaScript) 자바스크립트 tabulator 라이브러리 사용해 기본 배열 데이터 Grid 그리드 형식 표 그리기 및 페이징 처리 수행

투케이2K 2026. 6. 30. 19:09
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">

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

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

    </style>





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

    
    <!-- [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>







    <!-- [자바스크립트 코드 지정] -->
    <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 를 그리드 형식으로 표시 수행
          // ------------------------------------------------           
          const table = new Tabulator("#userTable", {
              data: tableData, // 테이블에 표시할 데이터를 지정합니다.

              layout: "fitColumns", // 컬럼 너비를 어떻게 계산할지 결정합니다.
            
              pagination: true, // 페이징 기능 활성화합니다.
              paginationSize: 5, // 페이지당 표시 건수입니다.

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

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

              columns: [ // 컬럼 정의 영역입니다.
                  { title:"ID", field:"id" },
                  { title:"이름", field:"name" },
                  { title:"나이", field:"age" }
              ]
          });
          
        }
        catch (exception) {
          console.error("[window onload] : [Exception] : ❌ 예외 상황 발생 : ", exception);

        }

      };


    </script>


</head>


<body>

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

</body>

</html>

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





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

▶️ [자바스크립트 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' 카테고리의 다른 글

567. (javaScript) 자바스크립트 웹 브라우저에서 앱 딥링크 (Deep Link) 스키마 (Scheme) 앱 실행 및 앱 마켓 페이지 이동 수행  (0) 2026.07.06
566. (javaScript) 자바스크립트 tabulator 라이브러리 사용해 Custom Table Style 커스텀 그리드 형식 표 테이블 스타일 지정 및 기본 이벤트 확인  (0) 2026.07.02
564. (javaScript) 자바스크립트 new Function 사용해 동적 string 문자열 소스 코드 작성 후 함수 실행 - 파라미터 첨부  (0) 2026.06.29
563. (javaScript) 자바스크립트 string 문자열 JSON Path 경로 체크 , 값 확인 및 갱신 - Path Check , Get Value , Set Value  (0) 2026.06.26
562. (javaScript) 자바스크립트 new Function 사용해 문자열로 작성 된 소스 코드 동적 런타임 함수 생성 및 실행 수행  (0) 2026.06.26
'JavaScript' Related Articles more
Comments