Table

Table can be used to show data in a tabular format. Supports zebra striping, pinned rows/columns, and multiple sizes.

const { default: Table } = await import('/components/data-display/table.js');

const { tags, $ } = 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 },
    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)
            )
        )
    )
);

$('#demo').insert(table);

const { default: Table } = await import('/components/data-display/table.js');
const { default: Badge } = await import('/components/data-display/badge.js');

const { signal, tags, $ } = Lightview;
const { div, span } = 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({}, 
                        tags.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'
    )
);

$('#demo').insert(demo);

Props

Sub-components

Sizes