Table

await import('/components/data-display/table.js');
const { tags, $ } = Lightview;
const { Table } = tags;

const data = [
    { id: 1, name: 'Alice Johnson', job: 'Engineer', company: 'TechCorp' },
    { id: 2, name: 'Bob Smith', job: 'Designer', company: 'DesignCo' },
    { id: 3, name: 'Charlie Brown', job: 'Manager', company: 'BizInc' }
];

const table = Table({ zebra: true },
    Table.Head({},
        Table.Row({},
            Table.Th({}, '#'),
            Table.Th({}, 'Name'),
            Table.Th({}, 'Job'),
            Table.Th({}, 'Company')
        )
    ),
    Table.Body({},
        ...data.map(row => 
            Table.Row({},
                Table.Th({}, row.id),
                Table.Td({}, row.name),
                Table.Td({}, row.job),
                Table.Td({}, row.company)
            )
        )
    )
);

$('#example').content(table);

await import('/components/data-display/table.js');
const { $, tags } = Lightview;
const { Table } = tags;

const data = [
    { id: 1, name: 'Alice Johnson', job: 'Engineer', company: 'TechCorp' },
    { id: 2, name: 'Bob Smith', job: 'Designer', company: 'DesignCo' },
    { id: 3, name: 'Charlie Brown', job: 'Manager', company: 'BizInc' }
];

const table = {
    tag: Table,
    attributes: { zebra: true },
    children: [
        {
            tag: Table.Head,
            children: [{
                tag: Table.Row,
                children: [
                    { tag: Table.Th, children: ['#'] },
                    { tag: Table.Th, children: ['Name'] },
                    { tag: Table.Th, children: ['Job'] },
                    { tag: Table.Th, children: ['Company'] }
                ]
            }]
        },
        {
            tag: Table.Body,
            children: data.map(row => ({
                tag: Table.Row,
                children: [
                    { tag: Table.Th, children: [row.id] },
                    { tag: Table.Td, children: [row.name] },
                    { tag: Table.Td, children: [row.job] },
                    { tag: Table.Td, children: [row.company] }
                ]
            }))
        }
    ]
};

$('#example').content(table);

await import('/components/data-display/table.js');
const { $ } = Lightview;

const data = [
    { id: 1, name: 'Alice Johnson', job: 'Engineer', company: 'TechCorp' },
    { id: 2, name: 'Bob Smith', job: 'Designer', company: 'DesignCo' },
    { id: 3, name: 'Charlie Brown', job: 'Manager', company: 'BizInc' }
];

const table = {
    Table: {
        zebra: true,
        children: [
            {
                'Table.Head': {
                    children: [{
                        'Table.Row': {
                            children: [
                                { 'Table.Th': { children: ['#'] } },
                                { 'Table.Th': { children: ['Name'] } },
                                { 'Table.Th': { children: ['Job'] } },
                                { 'Table.Th': { children: ['Company'] } }
                            ]
                        }
                    }]
                }
            },
            {
                'Table.Body': {
                    children: data.map(row => ({
                        'Table.Row': {
                            children: [
                                { 'Table.Th': { children: [row.id] } },
                                { 'Table.Td': { children: [row.name] } },
                                { 'Table.Td': { children: [row.job] } },
                                { 'Table.Td': { children: [row.company] } }
                            ]
                        }
                    }))
                }
            }
        ]
    }
};

$('#example').content(table);

await import('/components/data-display/table.js');
await import('/components/data-display/badge.js');
const { signal, tags, $ } = Lightview;
const { div, span, Table, Badge, button } = tags;

const selected = signal(null);
const users = [
    { id: 1, name: 'Alice', status: 'active' },
    { id: 2, name: 'Bob', status: 'pending' },
    { id: 3, name: 'Charlie', status: 'inactive' }
];

const demo = div({},
    Table({ zebra: true, size: 'sm' },
        Table.Head({},
            Table.Row({},
                Table.Th({}, 'Name'),
                Table.Th({}, 'Status'),
                Table.Th({}, 'Action')
            )
        ),
        Table.Body({},
            ...users.map(user => 
                Table.Row({ 
                    hover: true,
                    active: () => selected.value === user.id,
                    onclick: () => { selected.value = user.id; }
                },
                    Table.Td({}, user.name),
                    Table.Td({}, 
                        Badge({ 
                            color: user.status === 'active' ? 'success' : 
                                   user.status === 'pending' ? 'warning' : 'error',
                            size: 'sm'
                        }, user.status)
                    ),
                    Table.Td({}, 
                        button({ class: 'btn btn-xs' }, 'Edit')
                    )
                )
            )
        )
    ),
    span({ class: 'text-sm opacity-70 mt-2 block' }, 
        () => selected.value ? `Selected: User ${selected.value}` : 'Click a row to select'
    )
);

$('#example').content(demo);

await import('/components/data-display/table.js');
await import('/components/data-display/badge.js');
const { signal, $, tags } = Lightview;
const { Table, Badge, div, span, button } = tags;

const selected = signal(null);
const users = [
    { id: 1, name: 'Alice', status: 'active' },
    { id: 2, name: 'Bob', status: 'pending' },
    { id: 3, name: 'Charlie', status: 'inactive' }
];

const demo = {
    tag: div,
    children: [
        {
            tag: Table,
            attributes: { zebra: true, size: 'sm' },
            children: [
                {
                    tag: Table.Head,
                    children: [{
                        tag: Table.Row,
                        children: [
                            { tag: Table.Th, children: ['Name'] },
                            { tag: Table.Th, children: ['Status'] },
                            { tag: Table.Th, children: ['Action'] }
                        ]
                    }]
                },
                {
                    tag: Table.Body,
                    children: users.map(user => ({
                        tag: Table.Row,
                        attributes: { 
                            hover: true,
                            active: () => selected.value === user.id,
                            onclick: () => { selected.value = user.id; }
                        },
                        children: [
                            { tag: Table.Td, children: [user.name] },
                            { 
                                tag: Table.Td, 
                                children: [{
                                    tag: Badge,
                                    attributes: { 
                                        color: user.status === 'active' ? 'success' : 
                                               user.status === 'pending' ? 'warning' : 'error',
                                        size: 'sm'
                                    },
                                    children: [user.status]
                                }]
                            },
                            {
                                tag: Table.Td,
                                children: [{ tag: button, attributes: { class: 'btn btn-xs' }, children: ['Edit'] }]
                            }
                        ]
                    }))
                }
            ]
        },
        {
            tag: span,
            attributes: { class: 'text-sm opacity-70 mt-2 block' },
            children: [() => selected.value ? `Selected: User ${selected.value}` : 'Click a row to select']
        }
    ]
};

$('#example').content(demo);

await import('/components/data-display/table.js');
await import('/components/data-display/badge.js');
const { signal, $ } = Lightview;

const selected = signal(null);
const users = [
    { id: 1, name: 'Alice', status: 'active' },
    { id: 2, name: 'Bob', status: 'pending' },
    { id: 3, name: 'Charlie', status: 'inactive' }
];

const demo = {
    div: {
        children: [
            {
                Table: {
                    zebra: true,
                    size: 'sm',
                    children: [
                        {
                            'Table.Head': {
                                children: [{
                                    'Table.Row': {
                                        children: [
                                            { 'Table.Th': { children: ['Name'] } },
                                            { 'Table.Th': { children: ['Status'] } },
                                            { 'Table.Th': { children: ['Action'] } }
                                        ]
                                    }
                                }]
                            }
                        },
                        {
                            'Table.Body': {
                                children: users.map(user => ({
                                    'Table.Row': {
                                        hover: true,
                                        active: () => selected.value === user.id,
                                        onclick: () => { selected.value = user.id; },
                                        children: [
                                            { 'Table.Td': { children: [user.name] } },
                                            { 
                                                'Table.Td': { 
                                                    children: [{
                                                        Badge: { 
                                                            color: user.status === 'active' ? 'success' : 
                                                                   user.status === 'pending' ? 'warning' : 'error',
                                                            size: 'sm',
                                                            children: [user.status]
                                                        }
                                                    }]
                                                }
                                            },
                                            {
                                                'Table.Td': {
                                                    children: [{ button: { class: 'btn btn-xs', children: ['Edit'] } }]
                                                }
                                            }
                                        ]
                                    }
                                }))
                            }
                        }
                    ]
                }
            },
            {
                span: {
                    class: 'text-sm opacity-70 mt-2 block',
                    children: [() => selected.value ? `Selected: User ${selected.value}` : 'Click a row to select']
                }
            }
        ]
    }
};

$('#example').content(demo);