TreeTable

'use client';
import { ChevronDown } from '@primeicons/react/chevron-down';
import { ChevronRight } from '@primeicons/react/chevron-right';
import { File } from '@primeicons/react/file';
import { Folder } from '@primeicons/react/folder';
import { Video } from '@primeicons/react/video';
import { Image as ImageIcon } from '@primeicons/react/image';
import type { DataTableExpansionEvent } from '@primereact/types/headless/datatable';
import { DataTable } from '@primereact/ui/datatable';
import { Tag } from '@primereact/ui/tag';
import * as React from 'react';

const typeSeverity: Record<string, 'info' | 'warn' | 'success' | 'secondary'> = {
    Folder: 'warn',
    Document: 'info',
    Text: 'secondary',
    Picture: 'success',
    Video: 'success'
};

function TypeIcon({ type }: { type: string }) {
    const className = 'w-4 h-4 text-surface-500 dark:text-surface-400';

    if (type === 'Folder') return <Folder className={`${className} text-yellow-500`} />;
    if (type === 'Picture') return <ImageIcon className={className} />;
    if (type === 'Video') return <Video className={className} />;

    return <File className={className} />;
}

interface TreeNode {
    key: string;
    data: {
        name: string;
        size: string;
        type: string;
    };
    children?: TreeNode[];
}

const nodes: TreeNode[] = [
    {
        key: '0',
        data: { name: 'Documents', size: '75kb', type: 'Folder' },
        children: [
            {
                key: '0-0',
                data: { name: 'Work', size: '55kb', type: 'Folder' },
                children: [
                    { key: '0-0-0', data: { name: 'Expenses.doc', size: '30kb', type: 'Document' } },
                    { key: '0-0-1', data: { name: 'Resume.doc', size: '25kb', type: 'Document' } }
                ]
            },
            {
                key: '0-1',
                data: { name: 'Home', size: '20kb', type: 'Folder' },
                children: [{ key: '0-1-0', data: { name: 'Invoices.txt', size: '20kb', type: 'Text' } }]
            }
        ]
    },
    {
        key: '1',
        data: { name: 'Pictures', size: '150kb', type: 'Folder' },
        children: [
            { key: '1-0', data: { name: 'barcelona.jpg', size: '90kb', type: 'Picture' } },
            { key: '1-1', data: { name: 'primeui.png', size: '30kb', type: 'Picture' } },
            { key: '1-2', data: { name: 'optimus.jpg', size: '30kb', type: 'Picture' } }
        ]
    },
    {
        key: '2',
        data: { name: 'Movies', size: '1500kb', type: 'Folder' },
        children: [
            {
                key: '2-0',
                data: { name: 'Al Pacino', size: '1000kb', type: 'Folder' },
                children: [
                    { key: '2-0-0', data: { name: 'Scarface', size: '500kb', type: 'Video' } },
                    { key: '2-0-1', data: { name: 'Serpico', size: '500kb', type: 'Video' } }
                ]
            },
            {
                key: '2-1',
                data: { name: 'Robert De Niro', size: '500kb', type: 'Folder' },
                children: [
                    { key: '2-1-0', data: { name: 'Goodfellas', size: '250kb', type: 'Video' } },
                    { key: '2-1-1', data: { name: 'Untouchables', size: '250kb', type: 'Video' } }
                ]
            }
        ]
    }
];

export default function TreeTableDemo() {
    const [expandedKeys, setExpandedKeys] = React.useState<Record<string, boolean>>({ '0': true });

    return (
        <div className="w-full">
            <DataTable.Root
                data={nodes}
                dataKey="key"
                treeMode
                expandedKeys={expandedKeys}
                onExpandedChange={(e: DataTableExpansionEvent) => setExpandedKeys(e.value)}
            >
                <DataTable.TableContainer>
                    <DataTable.Table style={{ minWidth: '50rem' }}>
                        <DataTable.THead>
                            <DataTable.THeadRow>
                                <DataTable.THeadCell>Name</DataTable.THeadCell>
                                <DataTable.THeadCell>Size</DataTable.THeadCell>
                                <DataTable.THeadCell>Type</DataTable.THeadCell>
                            </DataTable.THeadRow>
                        </DataTable.THead>
                        <DataTable.TBody>
                            {({ item }: { item: any }) => (
                                <DataTable.Row key={String(item.key)}>
                                    <DataTable.Cell>
                                        <div className="flex items-center gap-2">
                                            <DataTable.RowToggle>
                                                <DataTable.RowToggleIndicator match="expanded">
                                                    <ChevronDown />
                                                </DataTable.RowToggleIndicator>
                                                <DataTable.RowToggleIndicator match="collapsed">
                                                    <ChevronRight />
                                                </DataTable.RowToggleIndicator>
                                            </DataTable.RowToggle>
                                            <TypeIcon type={String(item.type)} />
                                            <span className={item.type === 'Folder' ? 'font-medium' : ''}>{String(item.name)}</span>
                                        </div>
                                    </DataTable.Cell>
                                    <DataTable.Cell>
                                        <span className="text-sm text-surface-500 dark:text-surface-400">{String(item.size)}</span>
                                    </DataTable.Cell>
                                    <DataTable.Cell>
                                        <Tag severity={typeSeverity[String(item.type)] ?? 'secondary'}>{String(item.type)}</Tag>
                                    </DataTable.Cell>
                                </DataTable.Row>
                            )}
                        </DataTable.TBody>
                    </DataTable.Table>
                </DataTable.TableContainer>
            </DataTable.Root>
        </div>
    );
}

'use client';
import { ChevronDown } from '@primeicons/react/chevron-down';
import { ChevronRight } from '@primeicons/react/chevron-right';
import { File } from '@primeicons/react/file';
import { Folder } from '@primeicons/react/folder';
import { Image as ImageIcon } from '@primeicons/react/image';
import { Video } from '@primeicons/react/video';
import type { DataTableExpansionEvent } from '@primereact/types/headless/datatable';
import { DataTable } from '@primereact/ui/datatable';
import { Tag } from '@primereact/ui/tag';
import { ToggleButton } from '@primereact/ui/togglebutton';
import { ToggleButtonGroup } from '@primereact/ui/togglebuttongroup';
import * as React from 'react';

const typeSeverity: Record<string, 'info' | 'warn' | 'success' | 'secondary'> = {
    Folder: 'warn',
    Document: 'info',
    Text: 'secondary',
    Picture: 'success',
    Video: 'success'
};

function TypeIcon({ type }: { type: string }) {
    if (type === 'Folder') return <Folder className="w-4 h-4 text-yellow-500" />;
    if (type === 'Picture') return <ImageIcon className="w-4 h-4 text-surface-500 dark:text-surface-400" />;
    if (type === 'Video') return <Video className="w-4 h-4 text-surface-500 dark:text-surface-400" />;

    return <File className="w-4 h-4 text-surface-500 dark:text-surface-400" />;
}

interface TreeNode {
    key: string;
    data: {
        name: string;
        size: string;
        type: string;
    };
    children?: TreeNode[];
}

const nodes: TreeNode[] = [
    {
        key: '0',
        data: { name: 'Documents', size: '75kb', type: 'Folder' },
        children: [
            {
                key: '0-0',
                data: { name: 'Work', size: '55kb', type: 'Folder' },
                children: [
                    { key: '0-0-0', data: { name: 'Expenses.doc', size: '30kb', type: 'Document' } },
                    { key: '0-0-1', data: { name: 'Resume.doc', size: '25kb', type: 'Document' } }
                ]
            },
            {
                key: '0-1',
                data: { name: 'Home', size: '20kb', type: 'Folder' },
                children: [{ key: '0-1-0', data: { name: 'Invoices.txt', size: '20kb', type: 'Text' } }]
            }
        ]
    },
    {
        key: '1',
        data: { name: 'Pictures', size: '150kb', type: 'Folder' },
        children: [
            { key: '1-0', data: { name: 'barcelona.jpg', size: '90kb', type: 'Picture' } },
            { key: '1-1', data: { name: 'primeui.png', size: '30kb', type: 'Picture' } },
            { key: '1-2', data: { name: 'optimus.jpg', size: '30kb', type: 'Picture' } }
        ]
    },
    {
        key: '2',
        data: { name: 'Movies', size: '1500kb', type: 'Folder' },
        children: [
            { key: '2-0', data: { name: 'Scarface', size: '500kb', type: 'Video' } },
            { key: '2-1', data: { name: 'Goodfellas', size: '250kb', type: 'Video' } }
        ]
    }
];

type Size = 'small' | 'normal' | 'large';

const sizeOptions: { label: string; value: Size }[] = [
    { label: 'Small', value: 'small' },
    { label: 'Normal', value: 'normal' },
    { label: 'Large', value: 'large' }
];

export default function TreeTableSizeDemo() {
    const [expandedKeys, setExpandedKeys] = React.useState<Record<string, boolean>>({ '0': true });
    const [size, setSize] = React.useState<Size>('normal');

    return (
        <div className="w-full">
            <div style={{ marginBottom: '0.75rem' }}>
                <ToggleButtonGroup
                    allowEmpty={false}
                    multiple={false}
                    value={size}
                    onValueChange={(e: { value: unknown }) => setSize(e.value as Size)}
                >
                    {sizeOptions.map((opt) => (
                        <ToggleButton.Root key={opt.value} value={opt.value}>
                            <ToggleButton.Indicator>{opt.label}</ToggleButton.Indicator>
                        </ToggleButton.Root>
                    ))}
                </ToggleButtonGroup>
            </div>
            <DataTable.Root
                data={nodes}
                dataKey="key"
                treeMode
                expandedKeys={expandedKeys}
                onExpandedChange={(e: DataTableExpansionEvent) => setExpandedKeys(e.value)}
                size={size === 'normal' ? undefined : size}
            >
                <DataTable.TableContainer>
                    <DataTable.Table style={{ minWidth: '50rem' }}>
                        <DataTable.THead>
                            <DataTable.THeadRow>
                                <DataTable.THeadCell>Name</DataTable.THeadCell>
                                <DataTable.THeadCell>Size</DataTable.THeadCell>
                                <DataTable.THeadCell>Type</DataTable.THeadCell>
                            </DataTable.THeadRow>
                        </DataTable.THead>
                        <DataTable.TBody>
                            {({ item }: { item: any }) => (
                                <DataTable.Row key={String(item.key)}>
                                    <DataTable.Cell>
                                        <div className="flex items-center gap-2">
                                            <DataTable.RowToggle>
                                                <DataTable.RowToggleIndicator match="expanded">
                                                    <ChevronDown />
                                                </DataTable.RowToggleIndicator>
                                                <DataTable.RowToggleIndicator match="collapsed">
                                                    <ChevronRight />
                                                </DataTable.RowToggleIndicator>
                                            </DataTable.RowToggle>
                                            <TypeIcon type={String(item.type)} />
                                            <span className={item.type === 'Folder' ? 'font-medium' : ''}>{String(item.name)}</span>
                                        </div>
                                    </DataTable.Cell>
                                    <DataTable.Cell>
                                        <span className="text-sm text-surface-500 dark:text-surface-400">{String(item.size)}</span>
                                    </DataTable.Cell>
                                    <DataTable.Cell>
                                        <Tag severity={typeSeverity[String(item.type)] ?? 'secondary'}>{String(item.type)}</Tag>
                                    </DataTable.Cell>
                                </DataTable.Row>
                            )}
                        </DataTable.TBody>
                    </DataTable.Table>
                </DataTable.TableContainer>
            </DataTable.Root>
        </div>
    );
}

'use client';
import { ChevronDown } from '@primeicons/react/chevron-down';
import { ChevronRight } from '@primeicons/react/chevron-right';
import { File } from '@primeicons/react/file';
import { Folder } from '@primeicons/react/folder';
import { Image as ImageIcon } from '@primeicons/react/image';
import { Video } from '@primeicons/react/video';
import type { DataTableExpansionEvent } from '@primereact/types/headless/datatable';
import { DataTable } from '@primereact/ui/datatable';
import { Tag } from '@primereact/ui/tag';
import * as React from 'react';

const typeSeverity: Record<string, 'info' | 'warn' | 'success' | 'secondary'> = {
    Folder: 'warn',
    Document: 'info',
    Text: 'secondary',
    Picture: 'success',
    Video: 'success'
};

function TypeIcon({ type }: { type: string }) {
    if (type === 'Folder') return <Folder className="w-4 h-4 text-yellow-500" />;
    if (type === 'Picture') return <ImageIcon className="w-4 h-4 text-surface-500 dark:text-surface-400" />;
    if (type === 'Video') return <Video className="w-4 h-4 text-surface-500 dark:text-surface-400" />;

    return <File className="w-4 h-4 text-surface-500 dark:text-surface-400" />;
}

interface TreeNode {
    key: string;
    data: {
        name: string;
        size: string;
        type: string;
    };
    children?: TreeNode[];
}

const nodes: TreeNode[] = [
    {
        key: '0',
        data: { name: 'Documents', size: '75kb', type: 'Folder' },
        children: [
            {
                key: '0-0',
                data: { name: 'Work', size: '55kb', type: 'Folder' },
                children: [
                    { key: '0-0-0', data: { name: 'Expenses.doc', size: '30kb', type: 'Document' } },
                    { key: '0-0-1', data: { name: 'Resume.doc', size: '25kb', type: 'Document' } }
                ]
            },
            {
                key: '0-1',
                data: { name: 'Home', size: '20kb', type: 'Folder' },
                children: [{ key: '0-1-0', data: { name: 'Invoices.txt', size: '20kb', type: 'Text' } }]
            }
        ]
    },
    {
        key: '1',
        data: { name: 'Pictures', size: '150kb', type: 'Folder' },
        children: [
            { key: '1-0', data: { name: 'barcelona.jpg', size: '90kb', type: 'Picture' } },
            { key: '1-1', data: { name: 'primeui.png', size: '30kb', type: 'Picture' } },
            { key: '1-2', data: { name: 'optimus.jpg', size: '30kb', type: 'Picture' } }
        ]
    },
    {
        key: '2',
        data: { name: 'Movies', size: '1500kb', type: 'Folder' },
        children: [
            { key: '2-0', data: { name: 'Scarface', size: '500kb', type: 'Video' } },
            { key: '2-1', data: { name: 'Goodfellas', size: '250kb', type: 'Video' } }
        ]
    }
];

export default function TreeTableGridlinesDemo() {
    const [expandedKeys, setExpandedKeys] = React.useState<Record<string, boolean>>({ '0': true });

    return (
        <div className="w-full">
            <DataTable.Root
                data={nodes}
                dataKey="key"
                treeMode
                expandedKeys={expandedKeys}
                onExpandedChange={(e: DataTableExpansionEvent) => setExpandedKeys(e.value)}
                showGridlines
            >
                <DataTable.TableContainer>
                    <DataTable.Table style={{ minWidth: '50rem' }}>
                        <DataTable.THead>
                            <DataTable.THeadRow>
                                <DataTable.THeadCell>Name</DataTable.THeadCell>
                                <DataTable.THeadCell>Size</DataTable.THeadCell>
                                <DataTable.THeadCell>Type</DataTable.THeadCell>
                            </DataTable.THeadRow>
                        </DataTable.THead>
                        <DataTable.TBody>
                            {({ item }: { item: any }) => (
                                <DataTable.Row key={String(item.key)}>
                                    <DataTable.Cell>
                                        <div className="flex items-center gap-2">
                                            <DataTable.RowToggle>
                                                <DataTable.RowToggleIndicator match="expanded">
                                                    <ChevronDown />
                                                </DataTable.RowToggleIndicator>
                                                <DataTable.RowToggleIndicator match="collapsed">
                                                    <ChevronRight />
                                                </DataTable.RowToggleIndicator>
                                            </DataTable.RowToggle>
                                            <TypeIcon type={String(item.type)} />
                                            <span className={item.type === 'Folder' ? 'font-medium' : ''}>{String(item.name)}</span>
                                        </div>
                                    </DataTable.Cell>
                                    <DataTable.Cell>
                                        <span className="text-sm text-surface-500 dark:text-surface-400">{String(item.size)}</span>
                                    </DataTable.Cell>
                                    <DataTable.Cell>
                                        <Tag severity={typeSeverity[String(item.type)] ?? 'secondary'}>{String(item.type)}</Tag>
                                    </DataTable.Cell>
                                </DataTable.Row>
                            )}
                        </DataTable.TBody>
                    </DataTable.Table>
                </DataTable.TableContainer>
            </DataTable.Root>
        </div>
    );
}

'use client';
import { ChevronDown } from '@primeicons/react/chevron-down';
import { ChevronRight } from '@primeicons/react/chevron-right';
import { File } from '@primeicons/react/file';
import { Folder } from '@primeicons/react/folder';
import { Image as ImageIcon } from '@primeicons/react/image';
import { Video } from '@primeicons/react/video';
import type { DataTableExpansionEvent } from '@primereact/types/headless/datatable';
import { DataTable } from '@primereact/ui/datatable';
import { Tag } from '@primereact/ui/tag';
import * as React from 'react';

const typeSeverity: Record<string, 'info' | 'warn' | 'success' | 'secondary'> = {
    Folder: 'warn',
    Document: 'info',
    Text: 'secondary',
    Picture: 'success',
    Video: 'success'
};

function TypeIcon({ type }: { type: string }) {
    if (type === 'Folder') return <Folder className="w-4 h-4 text-yellow-500" />;
    if (type === 'Picture') return <ImageIcon className="w-4 h-4 text-surface-500 dark:text-surface-400" />;
    if (type === 'Video') return <Video className="w-4 h-4 text-surface-500 dark:text-surface-400" />;

    return <File className="w-4 h-4 text-surface-500 dark:text-surface-400" />;
}

interface TreeNode {
    key: string;
    data: {
        name: string;
        size: string;
        type: string;
    };
    children?: TreeNode[];
}

const nodes: TreeNode[] = [
    {
        key: '0',
        data: { name: 'Documents', size: '75kb', type: 'Folder' },
        children: [
            {
                key: '0-0',
                data: { name: 'Work', size: '55kb', type: 'Folder' },
                children: [
                    { key: '0-0-0', data: { name: 'Expenses.doc', size: '30kb', type: 'Document' } },
                    { key: '0-0-1', data: { name: 'Resume.doc', size: '25kb', type: 'Document' } }
                ]
            },
            {
                key: '0-1',
                data: { name: 'Home', size: '20kb', type: 'Folder' },
                children: [{ key: '0-1-0', data: { name: 'Invoices.txt', size: '20kb', type: 'Text' } }]
            }
        ]
    },
    {
        key: '1',
        data: { name: 'Pictures', size: '150kb', type: 'Folder' },
        children: [
            { key: '1-0', data: { name: 'barcelona.jpg', size: '90kb', type: 'Picture' } },
            { key: '1-1', data: { name: 'primeui.png', size: '30kb', type: 'Picture' } },
            { key: '1-2', data: { name: 'optimus.jpg', size: '30kb', type: 'Picture' } }
        ]
    },
    {
        key: '2',
        data: { name: 'Movies', size: '1500kb', type: 'Folder' },
        children: [
            { key: '2-0', data: { name: 'Scarface', size: '500kb', type: 'Video' } },
            { key: '2-1', data: { name: 'Goodfellas', size: '250kb', type: 'Video' } }
        ]
    }
];

export default function TreeTableStripedRowsDemo() {
    const [expandedKeys, setExpandedKeys] = React.useState<Record<string, boolean>>({ '0': true, '1': true });

    return (
        <div className="w-full">
            <DataTable.Root
                data={nodes}
                dataKey="key"
                treeMode
                expandedKeys={expandedKeys}
                onExpandedChange={(e: DataTableExpansionEvent) => setExpandedKeys(e.value)}
                stripedRows
            >
                <DataTable.TableContainer>
                    <DataTable.Table style={{ minWidth: '50rem' }}>
                        <DataTable.THead>
                            <DataTable.THeadRow>
                                <DataTable.THeadCell>Name</DataTable.THeadCell>
                                <DataTable.THeadCell>Size</DataTable.THeadCell>
                                <DataTable.THeadCell>Type</DataTable.THeadCell>
                            </DataTable.THeadRow>
                        </DataTable.THead>
                        <DataTable.TBody>
                            {({ item }: { item: any }) => (
                                <DataTable.Row key={String(item.key)}>
                                    <DataTable.Cell>
                                        <div className="flex items-center gap-2">
                                            <DataTable.RowToggle>
                                                <DataTable.RowToggleIndicator match="expanded">
                                                    <ChevronDown />
                                                </DataTable.RowToggleIndicator>
                                                <DataTable.RowToggleIndicator match="collapsed">
                                                    <ChevronRight />
                                                </DataTable.RowToggleIndicator>
                                            </DataTable.RowToggle>
                                            <TypeIcon type={String(item.type)} />
                                            <span className={item.type === 'Folder' ? 'font-medium' : ''}>{String(item.name)}</span>
                                        </div>
                                    </DataTable.Cell>
                                    <DataTable.Cell>
                                        <span className="text-sm text-surface-500 dark:text-surface-400">{String(item.size)}</span>
                                    </DataTable.Cell>
                                    <DataTable.Cell>
                                        <Tag severity={typeSeverity[String(item.type)] ?? 'secondary'}>{String(item.type)}</Tag>
                                    </DataTable.Cell>
                                </DataTable.Row>
                            )}
                        </DataTable.TBody>
                    </DataTable.Table>
                </DataTable.TableContainer>
            </DataTable.Root>
        </div>
    );
}

'use client';
import { ChevronDown } from '@primeicons/react/chevron-down';
import { ChevronRight } from '@primeicons/react/chevron-right';
import { NodeService, type TreeTableNode } from '@/shared/services/node.service';
import type { DataTableExpansionEvent, DataTableSelectionEvent } from '@primereact/types/headless/datatable';
import { DataTable } from '@primereact/ui/datatable';
import { Tag } from '@primereact/ui/tag';
import * as React from 'react';
import { File } from '@primeicons/react/file';
import { Folder } from '@primeicons/react/folder';
import { Image as ImageIcon } from '@primeicons/react/image';
import { Video } from '@primeicons/react/video';

const typeSeverity: Record<string, 'info' | 'warn' | 'success' | 'secondary'> = {
    Folder: 'warn',
    Document: 'info',
    Resume: 'info',
    Text: 'secondary',
    Application: 'info',
    Picture: 'success',
    Video: 'success',
    Zip: 'secondary',
    PDF: 'info',
    Link: 'secondary'
};

function TypeIcon({ type }: { type: string }) {
    const cls = 'w-4 h-4 text-surface-500 dark:text-surface-400';

    if (type === 'Folder') return <Folder className={`${cls} text-yellow-500`} />;

    if (type === 'Picture') return <ImageIcon className={cls} />;

    if (type === 'Video') return <Video className={cls} />;

    return <File className={cls} />;
}

export default function SingleSelectionDemo() {
    const [nodes, setNodes] = React.useState<TreeTableNode[]>([]);
    const [selectedKeys, setSelectedKeys] = React.useState<Record<string, boolean>>({});
    const [expandedKeys, setExpandedKeys] = React.useState<Record<string, boolean>>({ '0': true });

    React.useEffect(() => {
        setNodes(NodeService.getTreeTableNodesData().slice(0, 5));
    }, []);

    return (
        <div className="w-full">
            <DataTable.Root
                data={nodes}
                dataKey="key"
                treeMode
                expandedKeys={expandedKeys}
                onExpandedChange={(e: DataTableExpansionEvent) => setExpandedKeys(e.value)}
                selectionMode="single"
                selectedKeys={selectedKeys}
                onSelectionChange={(e: DataTableSelectionEvent) => setSelectedKeys(e.value)}
            >
                <DataTable.TableContainer>
                    <DataTable.Table style={{ minWidth: '40rem' }}>
                        <DataTable.THead>
                            <DataTable.THeadRow>
                                <DataTable.THeadCell>Name</DataTable.THeadCell>
                                <DataTable.THeadCell>Size</DataTable.THeadCell>
                                <DataTable.THeadCell>Type</DataTable.THeadCell>
                            </DataTable.THeadRow>
                        </DataTable.THead>
                        <DataTable.TBody>
                            {({ item }: { item: any }) => (
                                <DataTable.Row key={String(item.key)}>
                                    <DataTable.Cell>
                                        <div className="flex items-center gap-2">
                                            <DataTable.RowToggle>
                                                <DataTable.RowToggleIndicator match="expanded">
                                                    <ChevronDown />
                                                </DataTable.RowToggleIndicator>
                                                <DataTable.RowToggleIndicator match="collapsed">
                                                    <ChevronRight />
                                                </DataTable.RowToggleIndicator>
                                            </DataTable.RowToggle>
                                            <TypeIcon type={String(item.type)} />
                                            <span className={item.type === 'Folder' ? 'font-medium' : ''}>{String(item.name)}</span>
                                        </div>
                                    </DataTable.Cell>
                                    <DataTable.Cell>
                                        <span className="text-sm text-surface-500 dark:text-surface-400">{String(item.size)}</span>
                                    </DataTable.Cell>
                                    <DataTable.Cell>
                                        <Tag severity={typeSeverity[String(item.type)] ?? 'secondary'}>{String(item.type)}</Tag>
                                    </DataTable.Cell>
                                </DataTable.Row>
                            )}
                        </DataTable.TBody>
                    </DataTable.Table>
                </DataTable.TableContainer>
            </DataTable.Root>
        </div>
    );
}

'use client';
import { ChevronDown } from '@primeicons/react/chevron-down';
import { ChevronRight } from '@primeicons/react/chevron-right';
import { NodeService, type TreeTableNode } from '@/shared/services/node.service';
import type { DataTableExpansionEvent, DataTableSelectionEvent } from '@primereact/types/headless/datatable';
import { DataTable } from '@primereact/ui/datatable';
import { Tag } from '@primereact/ui/tag';
import * as React from 'react';
import { File } from '@primeicons/react/file';
import { Folder } from '@primeicons/react/folder';
import { Image as ImageIcon } from '@primeicons/react/image';
import { Video } from '@primeicons/react/video';

const typeSeverity: Record<string, 'info' | 'warn' | 'success' | 'secondary'> = {
    Folder: 'warn',
    Document: 'info',
    Resume: 'info',
    Text: 'secondary',
    Application: 'info',
    Picture: 'success',
    Video: 'success',
    Zip: 'secondary',
    PDF: 'info',
    Link: 'secondary'
};

function TypeIcon({ type }: { type: string }) {
    const cls = 'w-4 h-4 text-surface-500 dark:text-surface-400';

    if (type === 'Folder') return <Folder className={`${cls} text-yellow-500`} />;

    if (type === 'Picture') return <ImageIcon className={cls} />;

    if (type === 'Video') return <Video className={cls} />;

    return <File className={cls} />;
}

export default function MultipleSelectionDemo() {
    const [nodes, setNodes] = React.useState<TreeTableNode[]>([]);
    const [selectedKeys, setSelectedKeys] = React.useState<Record<string, boolean>>({});
    const [expandedKeys, setExpandedKeys] = React.useState<Record<string, boolean>>({ '0': true });

    React.useEffect(() => {
        setNodes(NodeService.getTreeTableNodesData().slice(0, 5));
    }, []);

    return (
        <div className="w-full">
            <DataTable.Root
                data={nodes}
                dataKey="key"
                treeMode
                expandedKeys={expandedKeys}
                onExpandedChange={(e: DataTableExpansionEvent) => setExpandedKeys(e.value)}
                selectionMode="multiple"
                metaKeySelection
                selectedKeys={selectedKeys}
                onSelectionChange={(e: DataTableSelectionEvent) => setSelectedKeys(e.value)}
            >
                <DataTable.TableContainer>
                    <DataTable.Table style={{ minWidth: '40rem' }}>
                        <DataTable.THead>
                            <DataTable.THeadRow>
                                <DataTable.THeadCell>Name</DataTable.THeadCell>
                                <DataTable.THeadCell>Size</DataTable.THeadCell>
                                <DataTable.THeadCell>Type</DataTable.THeadCell>
                            </DataTable.THeadRow>
                        </DataTable.THead>
                        <DataTable.TBody>
                            {({ item }: { item: any }) => (
                                <DataTable.Row key={String(item.key)}>
                                    <DataTable.Cell>
                                        <div className="flex items-center gap-2">
                                            <DataTable.RowToggle>
                                                <DataTable.RowToggleIndicator match="expanded">
                                                    <ChevronDown />
                                                </DataTable.RowToggleIndicator>
                                                <DataTable.RowToggleIndicator match="collapsed">
                                                    <ChevronRight />
                                                </DataTable.RowToggleIndicator>
                                            </DataTable.RowToggle>
                                            <TypeIcon type={String(item.type)} />
                                            <span className={item.type === 'Folder' ? 'font-medium' : ''}>{String(item.name)}</span>
                                        </div>
                                    </DataTable.Cell>
                                    <DataTable.Cell>
                                        <span className="text-sm text-surface-500 dark:text-surface-400">{String(item.size)}</span>
                                    </DataTable.Cell>
                                    <DataTable.Cell>
                                        <Tag severity={typeSeverity[String(item.type)] ?? 'secondary'}>{String(item.type)}</Tag>
                                    </DataTable.Cell>
                                </DataTable.Row>
                            )}
                        </DataTable.TBody>
                    </DataTable.Table>
                </DataTable.TableContainer>
            </DataTable.Root>
        </div>
    );
}

'use client';
import { Check } from '@primeicons/react/check';
import { ChevronDown } from '@primeicons/react/chevron-down';
import { ChevronRight } from '@primeicons/react/chevron-right';
import { File } from '@primeicons/react/file';
import { Folder } from '@primeicons/react/folder';
import { Image as ImageIcon } from '@primeicons/react/image';
import { Minus } from '@primeicons/react/minus';
import { Video } from '@primeicons/react/video';
import type { DataTableExpansionEvent, DataTableSelectionEvent } from '@primereact/types/headless/datatable';
import type { CheckboxRootChangeEvent } from '@primereact/types/primitive/checkbox';
import type { DataTableSelectionInstance } from '@primereact/types/primitive/datatable';
import { Checkbox } from '@primereact/ui/checkbox';
import { DataTable } from '@primereact/ui/datatable';
import { Tag } from '@primereact/ui/tag';
import * as React from 'react';

const typeSeverity: Record<string, 'info' | 'warn' | 'success' | 'secondary'> = {
    Folder: 'warn',
    Document: 'info',
    Text: 'secondary',
    Picture: 'success',
    Video: 'success'
};

function TypeIcon({ type }: { type: string }) {
    if (type === 'Folder') return <Folder className="w-4 h-4 text-yellow-500" />;
    if (type === 'Picture') return <ImageIcon className="w-4 h-4 text-surface-500 dark:text-surface-400" />;
    if (type === 'Video') return <Video className="w-4 h-4 text-surface-500 dark:text-surface-400" />;

    return <File className="w-4 h-4 text-surface-500 dark:text-surface-400" />;
}

interface TreeNode {
    key: string;
    data: {
        name: string;
        size: string;
        type: string;
    };
    children?: TreeNode[];
}

const nodes: TreeNode[] = [
    {
        key: '0',
        data: { name: 'Documents', size: '75kb', type: 'Folder' },
        children: [
            {
                key: '0-0',
                data: { name: 'Work', size: '55kb', type: 'Folder' },
                children: [
                    { key: '0-0-0', data: { name: 'Expenses.doc', size: '30kb', type: 'Document' } },
                    { key: '0-0-1', data: { name: 'Resume.doc', size: '25kb', type: 'Document' } }
                ]
            },
            {
                key: '0-1',
                data: { name: 'Home', size: '20kb', type: 'Folder' },
                children: [{ key: '0-1-0', data: { name: 'Invoices.txt', size: '20kb', type: 'Text' } }]
            }
        ]
    },
    {
        key: '1',
        data: { name: 'Pictures', size: '150kb', type: 'Folder' },
        children: [
            { key: '1-0', data: { name: 'barcelona.jpg', size: '90kb', type: 'Picture' } },
            { key: '1-1', data: { name: 'primeui.png', size: '30kb', type: 'Picture' } },
            { key: '1-2', data: { name: 'optimus.jpg', size: '30kb', type: 'Picture' } }
        ]
    },
    {
        key: '2',
        data: { name: 'Movies', size: '1500kb', type: 'Folder' },
        children: [
            {
                key: '2-0',
                data: { name: 'Al Pacino', size: '1000kb', type: 'Folder' },
                children: [
                    { key: '2-0-0', data: { name: 'Scarface', size: '500kb', type: 'Video' } },
                    { key: '2-0-1', data: { name: 'Serpico', size: '500kb', type: 'Video' } }
                ]
            },
            {
                key: '2-1',
                data: { name: 'Robert De Niro', size: '500kb', type: 'Folder' },
                children: [
                    { key: '2-1-0', data: { name: 'Goodfellas', size: '250kb', type: 'Video' } },
                    { key: '2-1-1', data: { name: 'Untouchables', size: '250kb', type: 'Video' } }
                ]
            }
        ]
    }
];

export default function TreeTableSelectionDemo() {
    const [expandedKeys, setExpandedKeys] = React.useState<Record<string, boolean>>({ '0': true, '0-0': true });
    const [selectedKeys, setSelectedKeys] = React.useState<Record<string, boolean>>({});

    return (
        <div className="w-full">
            <div style={{ marginBottom: '0.5rem' }}>
                <strong>Selected:</strong>{' '}
                {Object.keys(selectedKeys)
                    .filter((k) => selectedKeys[k])
                    .join(', ') || 'None'}
            </div>
            <DataTable.Root
                data={nodes}
                dataKey="key"
                treeMode
                selectionMode="multiple"
                expandedKeys={expandedKeys}
                onExpandedChange={(e: DataTableExpansionEvent) => setExpandedKeys(e.value)}
                selectedKeys={selectedKeys}
                onSelectionChange={(e: DataTableSelectionEvent) => setSelectedKeys(e.value)}
            >
                <DataTable.TableContainer>
                    <DataTable.Table style={{ minWidth: '50rem' }}>
                        <DataTable.THead>
                            <DataTable.THeadRow>
                                <DataTable.THeadCell>
                                    <div className="flex items-center gap-2">
                                        <DataTable.Selection>
                                            {({ isAllSelected, isSomeSelected, toggleAll }: DataTableSelectionInstance) => (
                                                <Checkbox.Root
                                                    checked={isAllSelected}
                                                    indeterminate={isSomeSelected && !isAllSelected}
                                                    onCheckedChange={(e: CheckboxRootChangeEvent) => toggleAll(e.originalEvent)}
                                                >
                                                    <Checkbox.Box>
                                                        <Checkbox.Indicator match="checked">
                                                            <Check />
                                                        </Checkbox.Indicator>
                                                        <Checkbox.Indicator match="indeterminate">
                                                            <Minus />
                                                        </Checkbox.Indicator>
                                                    </Checkbox.Box>
                                                </Checkbox.Root>
                                            )}
                                        </DataTable.Selection>
                                        <span>Name</span>
                                    </div>
                                </DataTable.THeadCell>
                                <DataTable.THeadCell>Size</DataTable.THeadCell>
                                <DataTable.THeadCell>Type</DataTable.THeadCell>
                            </DataTable.THeadRow>
                        </DataTable.THead>
                        <DataTable.TBody key={JSON.stringify(selectedKeys)}>
                            {({ item }: { item: any }) => (
                                <DataTable.Row key={String(item.key)}>
                                    <DataTable.Cell>
                                        <div className="flex items-center gap-2">
                                            <DataTable.RowToggle>
                                                <DataTable.RowToggleIndicator match="expanded">
                                                    <ChevronDown />
                                                </DataTable.RowToggleIndicator>
                                                <DataTable.RowToggleIndicator match="collapsed">
                                                    <ChevronRight />
                                                </DataTable.RowToggleIndicator>
                                            </DataTable.RowToggle>
                                            <DataTable.Selection>
                                                {({ isSelected, isPartiallySelected, toggle }: DataTableSelectionInstance) => (
                                                    <Checkbox.Root
                                                        checked={isSelected}
                                                        indeterminate={isPartiallySelected}
                                                        onCheckedChange={(e: CheckboxRootChangeEvent) => toggle(e.originalEvent)}
                                                    >
                                                        <Checkbox.Box>
                                                            <Checkbox.Indicator match="checked">
                                                                <Check />
                                                            </Checkbox.Indicator>
                                                            <Checkbox.Indicator match="indeterminate">
                                                                <Minus />
                                                            </Checkbox.Indicator>
                                                        </Checkbox.Box>
                                                    </Checkbox.Root>
                                                )}
                                            </DataTable.Selection>
                                            <TypeIcon type={String(item.type)} />
                                            <span className={item.type === 'Folder' ? 'font-medium' : ''}>{String(item.name)}</span>
                                        </div>
                                    </DataTable.Cell>
                                    <DataTable.Cell>
                                        <span className="text-sm text-surface-500 dark:text-surface-400">{String(item.size)}</span>
                                    </DataTable.Cell>
                                    <DataTable.Cell>
                                        <Tag severity={typeSeverity[String(item.type)] ?? 'secondary'}>{String(item.type)}</Tag>
                                    </DataTable.Cell>
                                </DataTable.Row>
                            )}
                        </DataTable.TBody>
                    </DataTable.Table>
                </DataTable.TableContainer>
            </DataTable.Root>
        </div>
    );
}

'use client';
import { ChevronDown } from '@primeicons/react/chevron-down';
import { ChevronRight } from '@primeicons/react/chevron-right';
import { NodeService, type TreeTableNode } from '@/shared/services/node.service';
import type { DataTableExpansionEvent, DataTableSelectionEvent } from '@primereact/types/headless/datatable';
import type { DataTableSelectionInstance } from '@primereact/types/primitive/datatable';
import type { RadioButtonRootChangeEvent } from '@primereact/types/primitive/radiobutton';
import { DataTable } from '@primereact/ui/datatable';
import { RadioButton } from '@primereact/ui/radiobutton';
import { Tag } from '@primereact/ui/tag';
import * as React from 'react';
import { File } from '@primeicons/react/file';
import { Folder } from '@primeicons/react/folder';
import { Image as ImageIcon } from '@primeicons/react/image';
import { Video } from '@primeicons/react/video';

const typeSeverity: Record<string, 'info' | 'warn' | 'success' | 'secondary'> = {
    Folder: 'warn',
    Document: 'info',
    Resume: 'info',
    Text: 'secondary',
    Application: 'info',
    Picture: 'success',
    Video: 'success',
    Zip: 'secondary',
    PDF: 'info',
    Link: 'secondary'
};

function TypeIcon({ type }: { type: string }) {
    const cls = 'w-4 h-4 text-surface-500 dark:text-surface-400';

    if (type === 'Folder') return <Folder className={`${cls} text-yellow-500`} />;

    if (type === 'Picture') return <ImageIcon className={cls} />;

    if (type === 'Video') return <Video className={cls} />;

    return <File className={cls} />;
}

export default function RadioSelectionDemo() {
    const [nodes, setNodes] = React.useState<TreeTableNode[]>([]);
    const [selectedKeys, setSelectedKeys] = React.useState<Record<string, boolean>>({});
    const [expandedKeys, setExpandedKeys] = React.useState<Record<string, boolean>>({ '0': true });

    React.useEffect(() => {
        setNodes(NodeService.getTreeTableNodesData().slice(0, 5));
    }, []);

    return (
        <div className="w-full">
            <DataTable.Root
                data={nodes}
                dataKey="key"
                treeMode
                expandedKeys={expandedKeys}
                onExpandedChange={(e: DataTableExpansionEvent) => setExpandedKeys(e.value)}
                selectionMode="single"
                selectedKeys={selectedKeys}
                onSelectionChange={(e: DataTableSelectionEvent) => setSelectedKeys(e.value)}
            >
                <DataTable.TableContainer>
                    <DataTable.Table style={{ minWidth: '40rem' }}>
                        <DataTable.THead>
                            <DataTable.THeadRow>
                                <DataTable.THeadCell style={{ width: '3rem' }} />
                                <DataTable.THeadCell>Name</DataTable.THeadCell>
                                <DataTable.THeadCell>Size</DataTable.THeadCell>
                                <DataTable.THeadCell>Type</DataTable.THeadCell>
                            </DataTable.THeadRow>
                        </DataTable.THead>
                        <DataTable.TBody>
                            {({ item }: { item: any }) => (
                                <DataTable.Row key={String(item.key)}>
                                    <DataTable.Cell>
                                        <DataTable.Selection mode="radio">
                                            {({ isSelected, toggle }: DataTableSelectionInstance) => (
                                                <RadioButton.Root
                                                    checked={isSelected}
                                                    onCheckedChange={(e: RadioButtonRootChangeEvent) => toggle(e.originalEvent)}
                                                >
                                                    <RadioButton.Box>
                                                        <RadioButton.Indicator match="checked" />
                                                    </RadioButton.Box>
                                                </RadioButton.Root>
                                            )}
                                        </DataTable.Selection>
                                    </DataTable.Cell>
                                    <DataTable.Cell>
                                        <div className="flex items-center gap-2">
                                            <DataTable.RowToggle>
                                                <DataTable.RowToggleIndicator match="expanded">
                                                    <ChevronDown />
                                                </DataTable.RowToggleIndicator>
                                                <DataTable.RowToggleIndicator match="collapsed">
                                                    <ChevronRight />
                                                </DataTable.RowToggleIndicator>
                                            </DataTable.RowToggle>
                                            <TypeIcon type={String(item.type)} />
                                            <span className={item.type === 'Folder' ? 'font-medium' : ''}>{String(item.name)}</span>
                                        </div>
                                    </DataTable.Cell>
                                    <DataTable.Cell>
                                        <span className="text-sm text-surface-500 dark:text-surface-400">{String(item.size)}</span>
                                    </DataTable.Cell>
                                    <DataTable.Cell>
                                        <Tag severity={typeSeverity[String(item.type)] ?? 'secondary'}>{String(item.type)}</Tag>
                                    </DataTable.Cell>
                                </DataTable.Row>
                            )}
                        </DataTable.TBody>
                    </DataTable.Table>
                </DataTable.TableContainer>
            </DataTable.Root>
        </div>
    );
}

'use client';
import { ChevronDown } from '@primeicons/react/chevron-down';
import { ChevronRight } from '@primeicons/react/chevron-right';
import { NodeService, type TreeTableNode } from '@/shared/services/node.service';
import type { DataTableExpansionEvent, DataTableSelectionEvent } from '@primereact/types/headless/datatable';
import { Badge } from '@primereact/ui/badge';
import { DataTable } from '@primereact/ui/datatable';
import { Tag } from '@primereact/ui/tag';
import * as React from 'react';
import { File } from '@primeicons/react/file';
import { Folder } from '@primeicons/react/folder';
import { Image as ImageIcon } from '@primeicons/react/image';
import { Video } from '@primeicons/react/video';

const typeSeverity: Record<string, 'info' | 'warn' | 'success' | 'secondary'> = {
    Folder: 'warn',
    Document: 'info',
    Resume: 'info',
    Text: 'secondary',
    Application: 'info',
    Picture: 'success',
    Video: 'success',
    Zip: 'secondary',
    PDF: 'info',
    Link: 'secondary'
};

function TypeIcon({ type }: { type: string }) {
    const cls = 'w-4 h-4 text-surface-500 dark:text-surface-400';

    if (type === 'Folder') return <Folder className={`${cls} text-yellow-500`} />;

    if (type === 'Picture') return <ImageIcon className={cls} />;

    if (type === 'Video') return <Video className={cls} />;

    return <File className={cls} />;
}

export default function KeyboardDemo() {
    const [nodes, setNodes] = React.useState<TreeTableNode[]>([]);
    const [selectedKeys, setSelectedKeys] = React.useState<Record<string, boolean>>({});
    const [expandedKeys, setExpandedKeys] = React.useState<Record<string, boolean>>({ '0': true });

    React.useEffect(() => {
        setNodes(NodeService.getTreeTableNodesData().slice(0, 5));
    }, []);

    const selectedCount = Object.values(selectedKeys).filter(Boolean).length;

    return (
        <div className="w-full">
            <div className="flex items-center justify-between gap-3 mb-3 p-3 rounded-md border border-surface-200 dark:border-surface-700 bg-surface-50 dark:bg-surface-900">
                <span className="text-sm text-surface-500 dark:text-surface-400">
                    <kbd className="px-1.5 py-0.5 text-xs rounded bg-surface-200 dark:bg-surface-700">↑</kbd>{' '}
                    <kbd className="px-1.5 py-0.5 text-xs rounded bg-surface-200 dark:bg-surface-700">↓</kbd> navigate,{' '}
                    <kbd className="px-1.5 py-0.5 text-xs rounded bg-surface-200 dark:bg-surface-700">→</kbd> expand,{' '}
                    <kbd className="px-1.5 py-0.5 text-xs rounded bg-surface-200 dark:bg-surface-700">←</kbd> collapse,{' '}
                    <kbd className="px-1.5 py-0.5 text-xs rounded bg-surface-200 dark:bg-surface-700">Space</kbd> select
                </span>
                <div className="flex items-center gap-2">
                    <span className="text-sm font-medium">Selected</span>
                    <Badge severity={selectedCount ? 'info' : 'secondary'}>{selectedCount}</Badge>
                </div>
            </div>
            <DataTable.Root
                data={nodes}
                dataKey="key"
                treeMode
                expandedKeys={expandedKeys}
                onExpandedChange={(e: DataTableExpansionEvent) => setExpandedKeys(e.value)}
                selectionMode="multiple"
                metaKeySelection
                selectedKeys={selectedKeys}
                onSelectionChange={(e: DataTableSelectionEvent) => setSelectedKeys(e.value)}
            >
                <DataTable.TableContainer>
                    <DataTable.Table style={{ minWidth: '40rem' }}>
                        <DataTable.THead>
                            <DataTable.THeadRow>
                                <DataTable.THeadCell>Name</DataTable.THeadCell>
                                <DataTable.THeadCell>Size</DataTable.THeadCell>
                                <DataTable.THeadCell>Type</DataTable.THeadCell>
                            </DataTable.THeadRow>
                        </DataTable.THead>
                        <DataTable.TBody>
                            {({ item }: { item: any }) => (
                                <DataTable.Row key={String(item.key)}>
                                    <DataTable.Cell>
                                        <div className="flex items-center gap-2">
                                            <DataTable.RowToggle>
                                                <DataTable.RowToggleIndicator match="expanded">
                                                    <ChevronDown />
                                                </DataTable.RowToggleIndicator>
                                                <DataTable.RowToggleIndicator match="collapsed">
                                                    <ChevronRight />
                                                </DataTable.RowToggleIndicator>
                                            </DataTable.RowToggle>
                                            <TypeIcon type={String(item.type)} />
                                            <span className={item.type === 'Folder' ? 'font-medium' : ''}>{String(item.name)}</span>
                                        </div>
                                    </DataTable.Cell>
                                    <DataTable.Cell>
                                        <span className="text-sm text-surface-500 dark:text-surface-400">{String(item.size)}</span>
                                    </DataTable.Cell>
                                    <DataTable.Cell>
                                        <Tag severity={typeSeverity[String(item.type)] ?? 'secondary'}>{String(item.type)}</Tag>
                                    </DataTable.Cell>
                                </DataTable.Row>
                            )}
                        </DataTable.TBody>
                    </DataTable.Table>
                </DataTable.TableContainer>
            </DataTable.Root>
        </div>
    );
}

'use client';
import { ChevronDown } from '@primeicons/react/chevron-down';
import { ChevronRight } from '@primeicons/react/chevron-right';
import { SortAlt } from '@primeicons/react/sort-alt';
import { SortAmountDown } from '@primeicons/react/sort-amount-down';
import { SortAmountUpAlt } from '@primeicons/react/sort-amount-up-alt';
import { NodeService, type TreeTableNode } from '@/shared/services/node.service';
import type { DataTableExpansionEvent } from '@primereact/types/headless/datatable';
import type { DataTableSortOrderInstance } from '@primereact/types/primitive/datatable';
import { Badge } from '@primereact/ui/badge';
import { DataTable } from '@primereact/ui/datatable';
import { OverlayBadge } from '@primereact/ui/overlaybadge';
import { Tag } from '@primereact/ui/tag';
import * as React from 'react';
import { File } from '@primeicons/react/file';
import { Folder } from '@primeicons/react/folder';
import { Image as ImageIcon } from '@primeicons/react/image';
import { Video } from '@primeicons/react/video';

const typeSeverity: Record<string, 'info' | 'warn' | 'success' | 'secondary'> = {
    Folder: 'warn',
    Document: 'info',
    Resume: 'info',
    Text: 'secondary',
    Application: 'info',
    Picture: 'success',
    Video: 'success',
    Zip: 'secondary',
    PDF: 'info',
    Link: 'secondary'
};

function TypeIcon({ type }: { type: string }) {
    const cls = 'w-4 h-4 text-surface-500 dark:text-surface-400';

    if (type === 'Folder') return <Folder className={`${cls} text-yellow-500`} />;

    if (type === 'Picture') return <ImageIcon className={cls} />;

    if (type === 'Video') return <Video className={cls} />;

    return <File className={cls} />;
}

function SortableHeader({ field, children }: { field: string; children: React.ReactNode }) {
    return (
        <DataTable.Sort field={field} className="inline-flex items-center gap-2">
            {children}
            <OverlayBadge className="px-1">
                <DataTable.SortIndicator match="unsorted">
                    <SortAlt />
                </DataTable.SortIndicator>
                <DataTable.SortIndicator match="asc">
                    <SortAmountUpAlt />
                </DataTable.SortIndicator>
                <DataTable.SortIndicator match="desc">
                    <SortAmountDown />
                </DataTable.SortIndicator>
                <DataTable.SortOrder asChild>
                    {({ index }: DataTableSortOrderInstance) => (
                        <Badge shape="circle" size="small" severity="info" className="mt-1">
                            {index}
                        </Badge>
                    )}
                </DataTable.SortOrder>
            </OverlayBadge>
        </DataTable.Sort>
    );
}

export default function SortDemo() {
    const [nodes, setNodes] = React.useState<TreeTableNode[]>([]);
    const [expandedKeys, setExpandedKeys] = React.useState<Record<string, boolean>>({ '0': true });

    React.useEffect(() => {
        setNodes(NodeService.getTreeTableNodesData().slice(0, 5));
    }, []);

    return (
        <div className="w-full">
            <DataTable.Root
                data={nodes}
                dataKey="key"
                treeMode
                expandedKeys={expandedKeys}
                onExpandedChange={(e: DataTableExpansionEvent) => setExpandedKeys(e.value)}
                removableSort
            >
                <DataTable.TableContainer>
                    <DataTable.Table style={{ minWidth: '40rem' }}>
                        <DataTable.THead>
                            <DataTable.THeadRow>
                                <DataTable.THeadCell>
                                    <SortableHeader field="name">Name</SortableHeader>
                                </DataTable.THeadCell>
                                <DataTable.THeadCell>
                                    <SortableHeader field="size">Size</SortableHeader>
                                </DataTable.THeadCell>
                                <DataTable.THeadCell>
                                    <SortableHeader field="type">Type</SortableHeader>
                                </DataTable.THeadCell>
                            </DataTable.THeadRow>
                        </DataTable.THead>
                        <DataTable.TBody>
                            {({ item }: { item: any }) => (
                                <DataTable.Row key={String(item.key)}>
                                    <DataTable.Cell>
                                        <div className="flex items-center gap-2">
                                            <DataTable.RowToggle>
                                                <DataTable.RowToggleIndicator match="expanded">
                                                    <ChevronDown />
                                                </DataTable.RowToggleIndicator>
                                                <DataTable.RowToggleIndicator match="collapsed">
                                                    <ChevronRight />
                                                </DataTable.RowToggleIndicator>
                                            </DataTable.RowToggle>
                                            <TypeIcon type={String(item.type)} />
                                            <span className={item.type === 'Folder' ? 'font-medium' : ''}>{String(item.name)}</span>
                                        </div>
                                    </DataTable.Cell>
                                    <DataTable.Cell>
                                        <span className="text-sm text-surface-500 dark:text-surface-400">{String(item.size)}</span>
                                    </DataTable.Cell>
                                    <DataTable.Cell>
                                        <Tag severity={typeSeverity[String(item.type)] ?? 'secondary'}>{String(item.type)}</Tag>
                                    </DataTable.Cell>
                                </DataTable.Row>
                            )}
                        </DataTable.TBody>
                    </DataTable.Table>
                </DataTable.TableContainer>
            </DataTable.Root>
        </div>
    );
}