Interactive Table

Table with selectable rows, actions, and live selection count

Task	Priority	Due Date
Fix login bug	High	2024-01-15
Update documentation	Medium	2024-01-20
Code review	Low	2024-01-25

Selected tasks: of remaining

from starhtml import *
from starui import *

tasks = [
    {"id": "task1", "name": "Fix login bug", "priority": "High", "variant": "destructive", "date": "2024-01-15"},
    {"id": "task2", "name": "Update documentation", "priority": "Medium", "variant": "secondary", "date": "2024-01-20"},
    {"id": "task3", "name": "Code review", "priority": "Low", "variant": "outline", "date": "2024-01-25"},
]

task_sigs = {task["id"]: Signal(task["id"], False) for task in tasks}
visible_sigs = {task["id"]: Signal(f"{task['id']}_visible", True) for task in tasks}
select_all = Signal("select_all", False)

# When any individual checkbox changes, sync select_all state
sync_select_all = select_all.set(sum(task_sigs.values()).eq(len(tasks)))

def create_task_row(task):
    return TableRow(
        TableCell(Checkbox(
            signal=task_sigs[task["id"]],
            data_on_change=sync_select_all
        )),
        TableCell(task["name"]),
        TableCell(Badge(task["priority"], variant=task["variant"])),
        TableCell(task["date"]),
        TableCell(
            Button(
                Icon("lucide:edit", cls="h-4 w-4"),
                variant="ghost",
                size="icon",
                data_on_click="alert('Edit task')"
            ),
            cls="text-right"
        ),
        data_show=visible_sigs[task["id"]]
    )

complete_actions = [
    action
    for task_id, sig in task_sigs.items()
    for action in [
        sig.then(visible_sigs[task_id].set(False)),  # Hide checked tasks
        sig.set(False)  # Uncheck all
    ]
]

Div(
    select_all,
    *task_sigs.values(),
    *visible_sigs.values(),
    Table(
        TableHeader(
            TableRow(
                TableHead(
                    Checkbox(
                        signal=select_all,
                        data_on_change=[sig.set(select_all) for sig in task_sigs.values()]
                    ),
                    cls="w-12"
                ),
                TableHead("Task"),
                TableHead("Priority"),
                TableHead("Due Date"),
                TableHead("Actions", cls="text-right")
            )
        ),
        TableBody(*[create_task_row(task) for task in tasks]),
        cls="w-full"
    ),
    Div(
        P("Selected tasks: ",
          Span(data_text=sum(task_sigs.values()), cls="font-bold"),
          " of ",
          Span(data_text=sum(visible_sigs.values()), cls="font-bold"),
          " remaining"
        ),
        Button(
            "Complete Selected",
            data_on_click=complete_actions,
            data_attr_disabled=sum(task_sigs.values()).eq(0),
            size="sm",
            cls="mt-2 select-none"
        ),
        cls="mt-4 p-3 bg-muted rounded text-sm"
    ),
    cls="space-y-4 w-full max-w-3xl"
)

Sortable Table

Click column headers to sort by name or size, with ascending/descending toggle

File Name	Size
Documentation.pdf PDF	2.4 MB
Image.png Image	5.2 MB
Archive.zip Archive	10.8 MB
Video.mp4 Video	45.3 MB
Backup.tar Archive	1.2 MB

from starhtml import *
from starui import *

files = [
    {"name": "Documentation.pdf", "size": 2.4, "type": "PDF"},
    {"name": "Image.png", "size": 5.2, "type": "Image"},
    {"name": "Archive.zip", "size": 10.8, "type": "Archive"},
    {"name": "Video.mp4", "size": 45.3, "type": "Video"},
    {"name": "Backup.tar", "size": 1.2, "type": "Archive"},
]

def calc_sort_orders(items, fields):
    """Auto-calculate CSS order values for each item in all sort states."""
    orders = []
    for i, item in enumerate(items):
        item_orders = {"none": i}
        for field in fields:
            sorted_asc = sorted(enumerate(items), key=lambda x: x[1][field])
            sorted_desc = sorted(enumerate(items), key=lambda x: x[1][field], reverse=True)
            item_orders[f"{field}_asc"] = next(pos for pos, (idx, _) in enumerate(sorted_asc) if idx == i)
            item_orders[f"{field}_desc"] = next(pos for pos, (idx, _) in enumerate(sorted_desc) if idx == i)
        orders.append(item_orders)
    return orders

sort_orders = calc_sort_orders(files, ["name", "size"])
sort_by = Signal("file_sort_by", "none")
sort_dir = Signal("file_sort_dir", "asc")

def create_sort_toggle(field):
    """Create toggle actions for a sortable field."""
    return [
        sort_dir.set(sort_by.eq(field).if_(sort_dir.eq("asc").if_("desc", "asc"), "asc")),
        sort_by.set(field)
    ]

def create_file_row(file, orders):
    return TableRow(
        TableCell(
            Div(
                P(file["name"], cls="font-medium"),
                P(file["type"], cls="text-xs text-muted-foreground")
            ),
            cls="w-full"
        ),
        TableCell(f"{file['size']} MB", cls="text-right w-24"),
        data_style_order=(sort_by == "none").if_(
            orders['none'],
            (sort_by == "name").if_(
                (sort_dir == "asc").if_(orders['name_asc'], orders['name_desc']),
                (sort_dir == "asc").if_(orders['size_asc'], orders['size_desc'])
            )
        )
    )

Div(
    sort_by,
    sort_dir,
    Style("""
        .sortable-table thead tr {
            display: flex;
        }
        .sortable-table tbody {
            display: flex;
            flex-direction: column;
        }
        .sortable-table tbody tr {
            display: flex;
        }
        .sortable-table th {
            cursor: pointer;
            user-select: none;
        }
        .sortable-table th:hover {
            background: hsl(var(--muted));
        }
    """),
    Table(
        TableHeader(
            TableRow(
                TableHead(
                    Div(
                        Span("File Name"),
                        Icon("lucide:chevron-down",
                             cls="h-4 w-4 ml-1 shrink-0 transition-transform duration-200",
                             data_class_rotate_180=sort_by.eq("name") & sort_dir.eq("asc"),
                             data_show=sort_by.eq("name")),
                        cls="flex items-center gap-1"
                    ),
                    data_on_click=create_sort_toggle("name"),
                    cls="cursor-pointer w-full"
                ),
                TableHead(
                    Div(
                        Span("Size"),
                        Icon("lucide:chevron-down",
                             cls="h-4 w-4 ml-1 shrink-0 transition-transform duration-200",
                             data_class_rotate_180=sort_by.eq("size") & sort_dir.eq("asc"),
                             data_show=sort_by.eq("size")),
                        cls="flex items-center justify-end gap-1"
                    ),
                    data_on_click=create_sort_toggle("size"),
                    cls="text-right cursor-pointer w-24"
                )
            )
        ),
        TableBody(
            *[create_file_row(file, orders) for file, orders in zip(files, sort_orders)]
        ),
        cls="sortable-table"
    ),
    cls="w-full max-w-2xl"
)

Financial Data

Table with footer totals and formatted currency values

Account transactions for January 2024
Transaction	Date	Amount	Balance
Initial Deposit	2024-01-01	+$1,000.00	$1,000.00
Coffee Purchase	2024-01-02	-$4.50	$995.50
Online Transfer	2024-01-03	-$200.00	$795.50
Salary Deposit	2024-01-15	+$3,500.00	$4,295.50
Total		+$4,295.50	$4,295.50

Responsive Table

Mobile-friendly table that adapts layout and hides/shows columns at different breakpoints

Resize window - becomes stacked cards on mobile

Order	Customer	Status	Amount
`#1001`	John Doe [email protected]	Shipped	$127.50
`#1002`	Jane Smith [email protected]	Processing	$89.99
`#1003`	Mike Johnson [email protected]	Cancelled	$45.00

from starhtml import *
from starui import *

orders = [
    {"id": "#1001", "customer": "John Doe", "email": "[email protected]", "status": "Shipped", "variant": "default", "amount": "$127.50"},
    {"id": "#1002", "customer": "Jane Smith", "email": "[email protected]", "status": "Processing", "variant": "secondary", "amount": "$89.99"},
    {"id": "#1003", "customer": "Mike Johnson", "email": "[email protected]", "status": "Cancelled", "variant": "destructive", "amount": "$45.00"},
]

Div(
    P("Resize window - becomes stacked cards on mobile", cls="text-sm text-muted-foreground mb-4"),
    Div(
        Table(
            TableHeader(
                TableRow(
                    TableHead("Order"),
                    TableHead("Customer"),
                    TableHead("Status"),
                    TableHead("Amount")
                )
            ),
            TableBody(
                *[TableRow(
                    TableCell(Code(order["id"], cls="font-mono text-xs"), data_label="Order"),
                    TableCell(
                        Div(
                            P(order["customer"], cls="font-medium"),
                            P(order["email"], cls="text-xs text-muted-foreground")
                        ),
                        data_label="Customer"
                    ),
                    TableCell(Badge(order["status"], variant=order["variant"]), data_label="Status"),
                    TableCell(order["amount"], cls="font-medium", data_label="Amount")
                ) for order in orders]
            )
        ),
        cls="responsive-table"
    ),
    Style("""
        @media (max-width: 640px) {
            .responsive-table table,
            .responsive-table thead,
            .responsive-table tbody,
            .responsive-table tr,
            .responsive-table th,
            .responsive-table td {
                display: block;
            }

            .responsive-table thead {
                display: none;
            }

            .responsive-table tr {
                margin-bottom: 1rem;
                border: 1px solid hsl(var(--border));
                border-radius: 0.5rem;
                padding: 0.75rem;
            }

            .responsive-table td {
                text-align: left !important;
                padding: 0.5rem 0;
                border: none;
                position: relative;
                padding-left: 40%;
            }

            .responsive-table td::before {
                content: attr(data-label);
                position: absolute;
                left: 0;
                font-weight: 600;
                font-size: 0.875rem;
            }
        }
    """),
    cls="w-full max-w-2xl"
)

Name	Email	Role	Status
Alice Johnson	[email protected]	Developer	Active
Bob Smith	[email protected]	Designer	Active
Carol Davis	[email protected]	Manager	Away

Table

Installation

CLI

Examples

Interactive Table

Sortable Table

Financial Data

Responsive Table

API Reference

Props