Table

Displays tabular data with headers, rows, and optional footer.

Target	Catalog	Right Ascension	Magnitude
Andromeda Galaxy	M31	00h 42m 44s	3.44
Orion Nebula	M42	05h 35m 17s	4.00
Crab Nebula	M1	05h 34m 32s	8.40
Whirlpool Galaxy	M51	13h 29m 53s	8.36
Ring Nebula	M57	18h 53m 35s	8.80

Installation

CLI

Install the component using the StarUI CLI:

star add table

Examples

Caption & Footer

TableFooter with totals and TableCaption for description

Spring seed inventory.
Variety	Type	Seeds	Germination
Cherokee Purple	Tomato	48	89%
Sugar Snap	Pea	117	94%
Danvers Half Long	Carrot	186	78%
Bloomsdale	Spinach	85	91%
Total			436

Selected Rows

TableRow selected prop for persistent highlighted background

Pull requests with selected rows highlighted.
Branch	Author	Status
fix/null-pointer-feed	kezhou	Merged
feat/dark-mode-toggle	priya-s	Open
PROJ-412-rate-limit	tomek92	Open
docs/api-examples	linchen	Draft

Row Actions

DropdownMenu composed in table cells for per-row actions

Recipe	Cuisine	Time
Miso-Glazed Eggplant	Japanese	35 min
Shakshuka	Tunisian	25 min
Cacio e Pepe	Italian	20 min
Aglio e Olio	Italian	15 min
Arepas Reinas Pepiadas	Venezuelan	45 min

Rich Composition

Avatar, Badge, Progress, and Skeleton composed in table cells

Language learning progress tracker with a loading placeholder row.
Learner	Language	Level	Progress
RM Ren Matsuda	Portuguese	B1	62%
AK Amira Kovacs	Mandarin	A2	38%
SK Sofia Kovacs	Mandarin	B1	71%

from starhtml import *

learners = [
    {"name": "Ren Matsuda", "initials": "RM", "lang": "Portuguese", "level": "B1", "level_variant": "secondary", "progress": 62},
    {"name": "Amira Kovacs", "initials": "AK", "lang": "Mandarin", "level": "A2", "level_variant": "outline", "progress": 38},
    {"name": "Sofia Kovacs", "initials": "SK", "lang": "Mandarin", "level": "B1", "level_variant": "secondary", "progress": 71},
]
Table(
    TableHeader(
        TableRow(
            TableHead("Learner", cls="w-[200px]"),
            TableHead("Language"),
            TableHead("Level"),
            TableHead("Progress", cls="w-[140px]"),
        )
    ),
    TableBody(
        *[TableRow(
            TableCell(
                Div(
                    Avatar(AvatarFallback(l["initials"]), cls="h-8 w-8"),
                    Span(l["name"], cls="font-medium"),
                    cls="flex items-center gap-3",
                )
            ),
            TableCell(l["lang"]),
            TableCell(Badge(l["level"], variant=l["level_variant"])),
            TableCell(
                Div(
                    Progress(value=l["progress"], cls="h-2"),
                    Span(f'{l["progress"]}%', cls="ml-2 text-xs text-muted-foreground tabular-nums"),
                    cls="flex items-center",
                )
            ),
        ) for l in learners],
        TableRow(
            TableCell(
                Div(
                    Skeleton(cls="h-8 w-8 rounded-full"),
                    Skeleton(cls="h-4 w-24"),
                    cls="flex items-center gap-3",
                )
            ),
            TableCell(Skeleton(cls="h-4 w-16")),
            TableCell(Skeleton(cls="h-5 w-10 rounded-md")),
            TableCell(Skeleton(cls="h-2 w-full rounded-full")),
        ),
    ),
    TableCaption("Language learning progress tracker with a loading placeholder row."),
)

Selection

Checkbox select-all with functional Archive using .then() conditional actions [Signal, sum(), .then()]

From	Subject	Date
Loom	Your recording is ready	Feb 21
GitHub	New comment on starui#417	Feb 20
Cal.com	Booking confirmed: Wed 10 AM	Feb 19
Stripe	Payout of $1,247.63 initiated	Feb 18
Linear	Sprint 14 starts Monday	Feb 17

from starhtml import *

messages = [
    {"id": "msg1", "from": "Loom", "subject": "Your recording is ready", "date": "Feb 21"},
    {"id": "msg2", "from": "GitHub", "subject": "New comment on starui#417", "date": "Feb 20"},
    {"id": "msg3", "from": "Cal.com", "subject": "Booking confirmed: Wed 10 AM", "date": "Feb 19"},
    {"id": "msg4", "from": "Stripe", "subject": "Payout of $1,247.63 initiated", "date": "Feb 18"},
    {"id": "msg5", "from": "Linear", "subject": "Sprint 14 starts Monday", "date": "Feb 17"},
]

sigs = [Signal(f"tbl_{m['id']}", False) for m in messages]
archs = [Signal(f"tbl_arch_{m['id']}", False) for m in messages]
select_all = Signal("tbl_select_all", False)

selected_count = sum(sigs)
visible_count = len(messages) - sum(archs)

sync_select_all = select_all.set(
    (visible_count > 0) & selected_count.eq(visible_count)
)

archive_selected = [
    *[sig.then(arch.set(True)) for sig, arch in zip(sigs, archs)],
    *[sig.set(False) for sig in sigs],
    select_all.set(False),
]

Div(
    select_all,
    sigs,
    archs,
    Table(
        TableHeader(
            TableRow(
                TableHead(
                    Checkbox(
                        signal=select_all,
                        data_on_change=[
                            (~arch).then(sig.set(select_all))
                            for sig, arch in zip(sigs, archs)
                        ],
                    ),
                    cls="w-12",
                ),
                TableHead("From"),
                TableHead("Subject"),
                TableHead("Date", cls="text-right"),
            )
        ),
        TableBody(
            *[TableRow(
                TableCell(Checkbox(
                    signal=sig,
                    data_on_change=sync_select_all,
                )),
                TableCell(m["from"], cls="font-medium"),
                TableCell(m["subject"]),
                TableCell(m["date"], cls="text-right text-muted-foreground"),
                data_show=~arch,
            ) for m, sig, arch in zip(messages, sigs, archs)]
        ),
    ),
    Div(
        Span(data_text=selected_count, cls="font-bold"),
        Span(data_text=" of " + visible_count + " selected"),
        Button(
            "Archive",
            size="sm",
            variant="outline",
            data_on_click=archive_selected,
            data_attr_disabled=selected_count.eq(0),
            cls="ml-auto",
        ),
        cls="mt-3 flex items-center gap-1 text-sm text-muted-foreground",
    ),
    cls="w-full max-w-3xl",
)

Empty State

Empty table body with icon and message using colspan

Endpoint	Method	Latency
No results found.

API Reference

Props

Prop	Type	Default	Description
`selected`	`bool`	`False`	Sets data-state='selected' on TableRow for highlighted background
`cls`	`str`	`''`	Additional CSS classes for any subcomponent
`wrapper_cls`	`str`	`''`	CSS classes for the Table scroll container wrapper

Component	Description
`Table`	Root container. Wraps the HTML table in a scroll-enabled div. Use wrapper_cls for the outer div and cls for the inner table
`TableHeader`	Groups header rows. Adds a bottom border to child rows
`TableBody`	Groups data rows. Removes the border from the last row
`TableFooter`	Summary row area with muted background and top border
`TableRow`	Row with hover highlight. Set selected=True for persistent muted background
`TableHead`	Header cell with muted text, medium font weight, and h-10 height
`TableCell`	Data cell with p-2 padding. Use colspan for spanning columns
`TableCaption`	Descriptive text below the table. Renders as HTML caption element