Components / Table

Table

A responsive table component. Pure Tailwind, no brain dependency; composed from header, body, footer, row, head, and cell parts.

Examples

A list of your recent invoices.
Invoice	Status	Method	Amount
INV001	Paid	Credit Card	$250.00
INV002	Pending	PayPal	$150.00
INV003	Unpaid	Bank Transfer	$350.00
Total			$750.00

razor

<ZitsTable>
    <ZitsTableCaption>A list of your recent invoices.</ZitsTableCaption>
    <ZitsTableHeader>
        <ZitsTableRow>
            <ZitsTableHead class="w-[100px]">Invoice</ZitsTableHead>
            <ZitsTableHead>Status</ZitsTableHead>
            <ZitsTableHead>Method</ZitsTableHead>
            <ZitsTableHead class="text-right">Amount</ZitsTableHead>
        </ZitsTableRow>
    </ZitsTableHeader>
    <ZitsTableBody>
        <ZitsTableRow>
            <ZitsTableCell class="font-medium">INV001</ZitsTableCell>
            <ZitsTableCell>Paid</ZitsTableCell>
            <ZitsTableCell>Credit Card</ZitsTableCell>
            <ZitsTableCell class="text-right">$250.00</ZitsTableCell>
        </ZitsTableRow>
    </ZitsTableBody>
    <ZitsTableFooter>
        <ZitsTableRow>
            <ZitsTableCell colspan="3">Total</ZitsTableCell>
            <ZitsTableCell class="text-right">$750.00</ZitsTableCell>
        </ZitsTableRow>
    </ZitsTableFooter>
</ZitsTable>

Installation

Terminal bash

navius add table

API reference

Each part accepts ChildContent and splats any extra attributes (including class) onto its element.

Prop	Type	Default
ZitsTable	rendered as	<table> in a scroll wrapper
ZitsTableHeader	rendered as	<thead>
ZitsTableBody	rendered as	<tbody>
ZitsTableFooter	rendered as	<tfoot>
ZitsTableRow	rendered as	<tr>
ZitsTableHead	rendered as	<th>
ZitsTableCell	rendered as	<td>
ZitsTableCaption	rendered as	<caption>