> ## Documentation Index > Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt > Use this file to discover all available pages before exploring further. # Komponen Tree > Dokumentasi komponen Tree di YiDA — pelajari struktur data, perilaku expand/ciutkan, keterkaitan checkbox, serta properti dan Peristiwa untuk menampilkan dan mengelola data hierarkis. ## Kapan digunakan * Gunakan komponen Tree untuk menampilkan data hierarkis dalam jumlah besar. Interaksi expand/ciutkan dan pemilihan terkait mempermudah pengelolaan data. ## Contoh komponen ## Properti komponen | Properti | Deskripsi | Tipe | Default | | --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `canDrop` | Peristiwa yang dipicu untuk menentukan apakah sebuah node dapat menjadi target drop. | `(info: any) => boolean` | - | | `checkStrictly` | Membuat kotak centang sepenuhnya terkontrol. | `boolean` | `false` | | `checkStrictly` | Menentukan cara node yang dipilih dikembalikan. `all`: mengembalikan semua node yang Dipilih; `parent`: hanya mengembalikan node induk ketika semua anak Dipilih; `child`: hanya mengembalikan node anak ketika semua anak Dipilih. | `'all' \| 'parent' \| 'child'` | `'parent'` | | `checkStrictly` | Membuat kotak centang sepenuhnya terkontrol. | `boolean` | `false` | | `checkable` | Apakah menampilkan kotak centang. | `boolean` | `false` | | `checkedKeys` | Node yang Dipilih secara default. | `string[]` | `['0-0-0']` | | `checkedKeys` | Node yang dicentang secara default. | `string[]` | `["0-0-0"]` | | `dataSource` | Data node. | [TreeDataSource\[\]](/id/open/yida/components/interface#treedatasource) | `[ { key: "0-0", label: "0-0", children: [ { key: "0-0-0", label: "0-0-0", children: [ { key: "0-0-0-0", label: "0-0-0-0", children: [ { key: "0-0-0-0-0", label: "0-0-0-0-0", }, ], }, { key: "0-0-0-1", label: "0-0-0-1", }, ], }, { key: "0-0-1", label: "0-0-1", children: [ { key: "0-0-1-0", label: "0-0-1-0", }, { key: "0-0-1-1", label: "0-0-1-1", }, ], }, ], }, ]` | | `defaultExpandAll` | Memperluas semua node secara default. | `boolean` | `true` | | `defaultExpandedKeys` | Node yang diperluas secara default. | `string[]` | `['0-0-0']` | | `draggable` | Apakah drag didukung. | `boolean` | `false` | | `editable` | Apakah pengeditan didukung. | `boolean` | `false` | | `expandedKeys` | Node yang diperluas. | `string[]` | `['0-0-0']` | | `isLoadData` | Apakah Aktifkan pemuatan asinkron. | `boolean` | `false` | | `loadData` | Peristiwa yang dipicu saat pemuatan asinkron berlangsung. | `(data: TreeDataSource) => Promise` | - | | `multiple` | Apakah Pilih Banyak didukung. | `boolean` | `false` | | `onCheck` | Peristiwa yang dipicu ketika kotak centang dicentang atau dilepas. | `(checkedKeys: string[], extra: any) => void` | - | | `onDragEnd` | Peristiwa yang dipicu ketika drag berakhir. | `(info: any) => void` | - | | `onDragEnter` | Peristiwa yang dipicu ketika node yang didrag memasuki node target. | `(info: any) => void` | - | | `onDragLeave` | Peristiwa yang dipicu ketika node yang didrag meninggalkan node target. | `(info: any) => void` | - | | `onDragOver` | Peristiwa yang dipicu ketika node yang didrag bergerak di atas node target. | `(info: any) => void` | - | | `onDragStart` | Peristiwa yang dipicu ketika drag node dimulai. | `(info: any) => void` | - | | `onDrop` | Peristiwa yang dipicu ketika node yang didrag dijatuhkan di dalam, sebelum, atau setelah node target. | `(info: any) => void` | - | | `onEditFinish` | Peristiwa yang dipicu ketika pengeditan Konten sebuah node Selesai. | `(key: string, label: string, node: TreeDataSource) => void` | - | | `onExpand` | Peristiwa yang dipicu ketika sebuah node diperluas atau diciutkan. | `(expandedKeys: string[], extra: any) => void` | - | | `onSelect` | Peristiwa yang dipicu ketika sebuah node dipilih atau batal dipilih. | `(selectedKeys: string[], extra: any) => void` | - | | `processDataSource` | Fungsi prapemrosesan data. | `(data: any) => TreeDataSource[]` | - | | `selectable` | Apakah node dapat dipilih. | `boolean` | `true` | | `selectedKeys` | Node yang Dipilih secara default. | `string[]` | `['0-0-0']` | | `showLine` | Apakah menampilkan garis penghubung antar node. | `boolean` | `true` |