트리 테이블 (Tree Table)

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

기본 사용법 (Basic Usage)

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

이름

종류

크기

Selected:

<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" />
</template>

가상 스크롤 (Virtual Scrolling)

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

이름

종류

크기

커스텀 셀 (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	'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	하위 행을 추출하는 함수입니다.

Events

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

Slots

Slot Name	Description
loading-state	로딩 오버레이 영역에 표시할 커스텀 콘텐츠입니다.
empty-state	데이터가 없을 때 표시할 커스텀 콘텐츠입니다.
cell-{id}	특정 컬럼의 셀 내용을 커스터마이징합니다.