Components

Tree Table

A table whose rows expand to reveal nested child rows.

php artisan blatui:add tree-table

Department	Owner	Headcount	Budget
Engineering	A. Rivera	48	$6.4M
Platform	J. Okafor	18	$2.5M
Infrastructure	M. Lind	9	$1.3M
Developer Tools	S. Park	9	$1.2M
Product	D. Mehta	30	$3.9M
Web	L. Chen	16	$2.1M
Mobile	R. Boateng	14	$1.8M
Sales	P. Nguyen	26	$3.1M
Enterprise	K. Adebayo	12	$1.7M
SMB	T. Wallace	14	$1.4M
Operations	C. Bianchi	11	$1.2M

<x-ui.tree-table
    class="max-w-2xl"
    :columns="[
        ['key' => 'name', 'label' => 'Department'],
        ['key' => 'owner', 'label' => 'Owner'],
        ['key' => 'headcount', 'label' => 'Headcount', 'align' => 'right'],
        ['key' => 'budget', 'label' => 'Budget', 'align' => 'right'],
    ]"
    :rows="[
        [
            'name' => 'Engineering',
            'owner' => 'A. Rivera',
            'headcount' => 48,
            'budget' => '$6.4M',
            'expanded' => true,
            'children' => [
                [
                    'name' => 'Platform',
                    'owner' => 'J. Okafor',
                    'headcount' => 18,
                    'budget' => '$2.5M',
                    'expanded' => true,
                    'children' => [
                        ['name' => 'Infrastructure', 'owner' => 'M. Lind', 'headcount' => 9, 'budget' => '$1.3M'],
                        ['name' => 'Developer Tools', 'owner' => 'S. Park', 'headcount' => 9, 'budget' => '$1.2M'],
                    ],
                ],
                [
                    'name' => 'Product',
                    'owner' => 'D. Mehta',
                    'headcount' => 30,
                    'budget' => '$3.9M',
                    'children' => [
                        ['name' => 'Web', 'owner' => 'L. Chen', 'headcount' => 16, 'budget' => '$2.1M'],
                        ['name' => 'Mobile', 'owner' => 'R. Boateng', 'headcount' => 14, 'budget' => '$1.8M'],
                    ],
                ],
            ],
        ],
        [
            'name' => 'Sales',
            'owner' => 'P. Nguyen',
            'headcount' => 26,
            'budget' => '$3.1M',
            'children' => [
                ['name' => 'Enterprise', 'owner' => 'K. Adebayo', 'headcount' => 12, 'budget' => '$1.7M'],
                ['name' => 'SMB', 'owner' => 'T. Wallace', 'headcount' => 14, 'budget' => '$1.4M'],
            ],
        ],
        [
            'name' => 'Operations',
            'owner' => 'C. Bianchi',
            'headcount' => 11,
            'budget' => '$1.2M',
        ],
    ]"
/>

Copyable

File
my-app
public
favicon.ico
index.html
src
components
Button.js
Header.js
App.js
index.js
.gitignore
package.json
README.md

{{-- `copyable` adds a button that copies the hierarchy as a markdown ├──/└──/│ tree. --}}
<x-ui.tree-table
    copyable
    class="max-w-md"
    :columns="[['key' => 'name', 'label' => 'File']]"
    :rows="[
        ['name' => 'my-app', 'expanded' => true, 'children' => [
            ['name' => 'public', 'expanded' => true, 'children' => [
                ['name' => 'favicon.ico'],
                ['name' => 'index.html'],
            ]],
            ['name' => 'src', 'expanded' => true, 'children' => [
                ['name' => 'components', 'expanded' => true, 'children' => [
                    ['name' => 'Button.js'],
                    ['name' => 'Header.js'],
                ]],
                ['name' => 'App.js'],
                ['name' => 'index.js'],
            ]],
            ['name' => '.gitignore'],
            ['name' => 'package.json'],
            ['name' => 'README.md'],
        ]],
    ]"
/>

API Reference

Props, slots and exposed methods for <x-ui.tree-table>.

Props

Prop	Type	Default	Description
`columns`*	`array`	`[]`	The column definitions, in display order. The first column is the tree column: it carries the expand/collapse toggle and indents nested rows. See Each column below.
`rows`*	`array`	`[]`	The hierarchical row data. Each row is keyed by the column keys and may carry a "children" array of rows with the same shape, nested to any depth. See Each row below.
`copyable`	`bool`	`false`	Show a button that copies the hierarchy to the clipboard as a markdown tree (├──/└──/│), using the first column as the label.

* Required.

Each column

Prop	Type	Default	Description
`key`*	`string`	—	The row-data key this column reads its cell value from.
`label`	`string`	—	The header text for the column.
`align`	`string`	`'left'`	Horizontal alignment of the column's header and cells. `left` `center` `right`

Each row

Prop	Type	Default	Description
`children`	`array`	—	Optional nested child rows, each with the same shape as a top-level row. Rows with children render an expand/collapse toggle in the tree column.
`expanded`	`bool`	`false`	Start this branch expanded on first render. Only meaningful on a row that has children.