Table

RzTable is a composable SSR table family aligned with semantic HTML table markup. It provides a responsive container, consistent table anatomy components, and style variants for common data presentation patterns.

Usage

Compose table UI by nesting anatomy components such as TableHeader, TableBody, TableRow, and TableCell inside RzTable.

Source

<RzTable Border>
    <TableCaption>A list of your recent invoices.</TableCaption>
    <TableHeader>
        <TableRow>
            <TableHeaderCell>Invoice</TableHeaderCell>
            <TableHeaderCell>Status</TableHeaderCell>
            <TableHeaderCell class="text-right">Amount</TableHeaderCell>
        </TableRow>
    </TableHeader>
    <TableBody>
        <TableRow>
            <TableCell class="font-medium">INV001</TableCell>
            <TableCell>Paid</TableCell>
            <TableCell class="text-right">$250.00</TableCell>
        </TableRow>
    </TableBody>
</RzTable>

Examples

Basic table with caption

A standard table composition using header, body, selected row styling, and footer pagination controls.

Source

<RzTable Border Id="orders-demo-table">
    <TableCaption>Recent orders</TableCaption>
    <TableHeader>
        <TableRow>
            <TableHeaderCell>Customer</TableHeaderCell>
            <TableHeaderCell>Status</TableHeaderCell>
            <TableHeaderCell class="text-right">Total</TableHeaderCell>
        </TableRow>
    </TableHeader>
    <TableBody>
        <TableRow>
            <TableCell>Ada Lovelace</TableCell>
            <TableCell>Paid</TableCell>
            <TableCell class="text-right">$129.00</TableCell>
        </TableRow>
        <TableRow Selected="true">
            <TableCell>Linus Torvalds</TableCell>
            <TableCell>Pending</TableCell>
            <TableCell class="text-right">$312.15</TableCell>
        </TableRow>
    </TableBody>
    <TableFooter>
        <TableRow>
            <TableCell Colspan="3">
                <TablePagination class="justify-end p-2">
                    ...
                </TablePagination>
            </TableCell>
        </TableRow>
    </TableFooter>
</RzTable>

Table with totals footer

Use TableFooter and TableCell Colspan for summary rows.

Source

<RzTable Border>
    <TableCaption>A list of recent invoices.</TableCaption>
    <TableHeader>
        <TableRow>
            <TableHeaderCell>Invoice</TableHeaderCell>
            <TableHeaderCell>Status</TableHeaderCell>
            <TableHeaderCell>Method</TableHeaderCell>
            <TableHeaderCell class="text-right">Amount</TableHeaderCell>
        </TableRow>
    </TableHeader>
    <TableBody>...</TableBody>
    <TableFooter>
        <TableRow>
            <TableCell Colspan="3" class="font-medium">Total</TableCell>
            <TableCell class="text-right">$750.00</TableCell>
        </TableRow>
    </TableFooter>
</RzTable>

Fixed header

Enable FixedHeader on RzTable to keep header content visible while body rows scroll.

Source

<RzTable Border FixedHeader class="max-h-64">
    <TableHeader>...</TableHeader>
    <TableBody>...</TableBody>
</RzTable>

Component API

The table family is intentionally small and composable. Use standard HTML attributes through AdditionalAttributes for advanced scenarios.

RzTable

Property	Description	Type	Default
`ChildContent`	Table sections and rows rendered inside the table element.	`RenderFragment?`	Required
`Border`	Adds table chrome (border and rounded container).	`bool`	`false`
`FixedHeader`	Applies sticky styling to the table header and fixed footer styling when present.	`bool`	`false`

Table anatomy components

Component	Purpose	Notable API
`TableCaption`	Renders semantic `<caption>` content for table context.	`ChildContent` (required)
`TableHeader`	Renders semantic `<thead>` and receives fixed-header styling from `RzTable`.	`ChildContent` (required)
`TableBody`	Renders semantic `<tbody>` rows.	`ChildContent` (required)
`TableFooter`	Renders semantic `<tfoot>` for totals or controls.	`ChildContent` (required)
`TableRow`	Represents a semantic `<tr>`.	`Selected`, `HoverableOverride`
`TableHeaderCell`	Semantic `<th>`; sets `scope="col"` by default.	`ChildContent` (required)
`TableCell`	Semantic `<td>` for row content.	`ChildContent`, `Colspan`
`TablePagination`	Layout wrapper for pagination controls inside a table cell.	`ChildContent` (required)