Skip to content

tui-grid #

Find similar titles

1회 업데이트 됨.

Edit
  • 최초 작성자
    Shin
  • 최근 업데이트
    jmchoi

Structured data

Category
Programming

tui-grid 란 #

tui-grid는 TOAST UI의 일부로 개발된 JavaScript 기반의 테이블 컴포넌트이다. 이는 다양한 브라우저 및 환경에서 작동하도록 설계되었으며, 대용량 데이터의 렌더링과 처리에 특히 최적화되어 있다.

tui-grid 장점 #

  1. 대용량 데이터 처리: 대용량의 데이터셋을 빠르게 렌더링하고 효율적으로 처리할 수 있다.
  2. 다양한 기능 제공: 정렬, 필터링, 편집, 셀 병합 등 다양한 기능을 내장하고 있어 일반적인 테이블 작업을 지원한다.
  3. 다양한 플러그인 및 확장성: 플러그인 아키텍처를 통해 필요한 경우 기능을 확장할 수 있다.
  4. 가로 스크롤 지원: 수평 스크롤을 지원하여 가로 너비가 큰 테이블도 효과적으로 다룰 수 있다.
  5. 다양한 데이터 형식 지원: 다양한 데이터 형식(JSON, CSV 등)에서 데이터를 가져와 사용할 수 있다.

따라서 tui-grid는 다음과 같은 상황에서 유용하다:

  • 대규모 데이터 관리: 수천 또는 수백만 개의 데이터 항목을 효율적으로 처리하고 표시해야 할 때.
  • 사용자 정의 요구사항: 다양한 기능과 스타일을 가진 사용자 정의 가능한 테이블이 필요한 경우.
  • 화면 크기 조절: 화면 크기에 따라, 가로 및 세로 스크롤이 필요한 경우.

설치하기 #

cdn을 사용하거나, Npm을 사용해 tui-grid를 설치할 수 있다.
<link " rel="stylesheet">
<script ></script>

$ npm install --save @toast-ui/grid
디렉토리 경로
tui-grid
├─ dist/
│ ├─ tui-grid.css
│ └─ tui-grid.js

Tui-grid 예제 #

<body>
    <!-- 그리드를 렌더링할 div 요소 -->
    <div id="tui_grid"></div>

    <script>
        // data, columns 설정
        const data = [
            {
                num: '1',
                name: '홍길동',
                birth: '1999.01.01',
                location: '서울',
                phone: '010-1111-1111',
            },
            {
                num: '2',
                name: '김민수',
                birth: '2000.12.30',
                location: '용인',
                phone: '010-1234-5678',
            },
            {
                num: '3',
                name: '김민지',
                birth: '2001.6.15',
                location: '수원',
                phone: '010-0000-0000',
            },
        ];

        const columns = [
            // ...컬럼 정의
            {
                header: '순서',
                name: 'num',
                align: 'center',
                width: 50
            },
            {
                header: '이름',
                name: 'name',
                align: 'left',
                width: 100
            },
            {
                header: '생일',
                name: 'birth',
                align: 'left',
                width: 100
            },
            {
                header: '지역',
                name: 'location',
                align: 'right',
                width: 100
            },
            {
                header: '전화번호',
                name: 'phone',
                align: 'center',
                width: 120
            },
        ];

        // tui-grid 인스턴스 생성
        const grid = new tui.Grid({
            el: document.getElementById('tui_grid'),
            data: data,
            columns: columns,
            columnOptions: {
                // 컬럼 설정
            },
            options: {
                // 전체 옵션 설정
            },
            header: {
                // 헤더 설정
            },
            // ...기타 설정

        });
    </script>
</body>

Image
위의 예제는 tui-grid를 가장 기본적인 형태로 사용하는 방법이다. 필요에 따라 공식문서를 참고해 데이터와 옵션을 조정하여 사용한다.

Reference #

0.0.1_20240214_1_v81