Table

Overview

Table is helm-native: it implements its own presentation directly, with no Navius primitive underneath. ZitsTable renders a real <table> inside an overflow-auto wrapper div; ZitsTableHeader, ZitsTableBody, ZitsTableFooter, ZitsTableRow, ZitsTableHead, ZitsTableCell, and ZitsTableCaption are thin Tailwind wrappers over the corresponding native <thead>, <tbody>, <tfoot>, <tr>, <th>, <td>, and <caption> elements.

Install

navius add table --to ./src/MyApp --namespace MyApp.Ui

Usage

@using Zits.Ui.Components

<ZitsTable>
    <ZitsTableHeader>
        <ZitsTableRow>
            <ZitsTableHead>Name</ZitsTableHead>
            <ZitsTableHead>Status</ZitsTableHead>
        </ZitsTableRow>
    </ZitsTableHeader>
    <ZitsTableBody>
        <ZitsTableRow>
            <ZitsTableCell>Invoice #1</ZitsTableCell>
            <ZitsTableCell>Paid</ZitsTableCell>
        </ZitsTableRow>
    </ZitsTableBody>
</ZitsTable>

Parts and props

ChildContent and Attributes pass through unchanged on every part; none of the seven parts add or change a variant/size prop of their own.

Styling surface

Attributes on every part is merged with that part’s base class set via Cn.Class, with the caller’s classes applied last.

Data attribute hooks

Part	Attribute	Description
Row	data-state="selected"	Not set by the component itself; the consumer sets it on ZitsTableRow to opt into the built-in data-[state=selected]:bg-muted selected-row styling.

Accessibility mechanism

These parts wire no ARIA attributes of their own; they render native semantic table elements (<table>, <thead>, <tbody>, <tfoot>, <tr>, <th>, <td>, <caption>), relying on the browser’s built-in table semantics for row/cell relationships. The root wrapper div adds only horizontal-scroll overflow handling, no ARIA role.