트리 테이블 (Tree Table)

TreeTable은 DataTable과 유사하지만 계층 구조(Tree)를 표현할 수 있는 컴포넌트입니다. 첫 번째 컬럼에 확장/축소 토글이 자동으로 추가됩니다.

기본 사용법 (Basic Usage)

data prop에 계층 구조가 포함된 데이터를 전달하고, columns를 정의합니다. 기본적으로 children 속성을 하위 노드로 인식합니다.

이름

종류

크기

Selected:

모두 펼치기 / 모두 닫기 (Expand / Collapse All)

showExpandAll, showCollapseAll prop을 통해 헤더에 전체 펼치기/닫기 버튼을 표시할 수 있습니다.

이름

종류

크기

<script setup lang="ts">
import { TreeTable } from '@jennifersoft/vue-components-v2';

const data = [
    {
        id: '1',
        name: 'Documents',
        children: [{ id: '1-1', name: 'Report.doc' }],
    },
    // ...
];

const columns = [
    { accessorKey: 'name', header: 'Name', size: 300 },
    // ...
];
</script>

<template>
    <TreeTable
        :data="data"
        :columns="columns"
        selection-mode="single"
        show-expand-all
        show-collapse-all
    />
</template>

Expand Row (행 확장)

단일 선택 모드(selection-mode="single")일 때, 이미 선택된 행을 한 번 더 클릭하면 행이 확장되면서 하위 계층과 함께 추가 정보를 보여주는 슬롯을 그릴 수 있습니다. expanded-row 슬롯을 사용하여 확장 영역의 내용을 정의합니다.

이름

종류

크기

<template>
    <TreeTable :data="data" :columns="columns" selection-mode="single">
        <template #expanded-row="{ row }">
            <div class="expanded-content">
                <p>
                    <strong>상세 정보:</strong> '{{ row.name }}' 항목의 타입은
                    {{ row.type }} 이고 크기는 {{ row.size }} 입니다.
                </p>
            </div>
        </template>
    </TreeTable>
</template>

<style scoped>
.expanded-content {
    padding: 16px;
    background-color: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
}
</style>

가상 스크롤 (Virtual Scrolling)

TreeTable도 DataTable과 마찬가지로 가상 스크롤을 지원합니다. 대량의 계층 데이터를 효율적으로 렌더링할 수 있습니다.

이름

종류

크기

부모 높이 채우기 (Fill Parent Height)

TreeTable의 높이를 직접 지정하지 않고, 부모 요소의 높이에 맞춰 자동으로 채우도록 할 수 있습니다.

이름

종류

크기

커스텀 셀 (Custom Cells)

DataTable과 동일하게 셀 슬롯을 지원합니다.

이름

종류

크기

Props

Prop	Type	Default	Description
data	T[]	Required	계층 구조를 가진 데이터 객체들의 배열입니다.
columns	ColumnDef<T>[]	Required	컬럼 정의 설정입니다.
selection	T	undefined	선택된 행 데이터(v-model 지원). 단일 선택만 지원합니다.
selectionMode	'none' | 'single'	'none'	행 선택 모드를 설정합니다.
columnVisibility	VisibilityState	{}	컬럼의 표시 상태를 정의하는 객체입니다.
skeleton	boolean	false	true일 때 로딩 스켈레톤(Skeleton) 상태를 표시합니다.
emptyText	string	'No Data'	데이터 배열이 비어있을 때 표시할 텍스트입니다.
size	'mini' | 'small' | 'normal'	'small'	테이블의 크기(행 높이 및 폰트)를 설정합니다.
showColumnLines	boolean	false	true일 때 데이터 셀의 세로 구분선을 표시합니다.
showRowLines	boolean	false	true일 때 데이터 행의 가로 구분선을 표시합니다.
stripedRows	boolean	false	true일 때 홀수 행에 배경색을 적용합니다.
variant	'inset' | 'attached'	'inset'	테이블의 시각적 스타일을 설정합니다.
getSubRows	(row: T) => T[]	row => row.children	하위 행을 추출하는 함수입니다.
showExpandAll	boolean	false	true일 때 헤더에 모두 펼치기 버튼을 표시합니다.
showCollapseAll	boolean	false	true일 때 헤더에 모두 닫기 버튼을 표시합니다.

Events

Event	Payload	Description
update:selection	T	행 선택 상태가 변경될 때 발생합니다.
update:columnVisibility	VisibilityState	컬럼 표시 상태가 변경될 때 발생합니다.

Slots

Slot Name	Description
loading-state	로딩 오버레이 영역에 표시할 커스텀 콘텐츠입니다.
empty-state	데이터가 없을 때 표시할 커스텀 콘텐츠입니다.
cell-{id}	특정 컬럼의 셀 내용을 커스터마이징합니다.
expanded-row	선택된 행 다시 클릭시 보여지는 확장 콘텐츠입니다.