This component is part of Zinq Prime and requires a valid license to use.
The Table component is used to display data in a tabular format. It is a wrapper around the native HTML <table>
element.
Product | Category | Price | Inventory | |
---|---|---|---|---|
![]() |
Travel
|
$9.99
|
Available
|
<zinq:table>
<zinq:table.head>
<zinq:table.header>Product</zinq:table.header>
<zinq:table.header>Category</zinq:table.header>
<zinq:table.header>Price</zinq:table.header>
<zinq:table.header>Inventory</zinq:table.header>
<zinq:table.header />
</zinq:table.head>
<zinq:table.rows>
<zinq:table.row>
<zinq:table.data class="flex space-x-2 items-center">
<zinq:avatar src="https://img.freepik.com/free-psd/baggage-prepared-travelling_23-2150739176.jpg" />
<span>Traveling containers</span>
</zinq:table.data>
<zinq:table.data>Travel</zinq:table.data>
<zinq:table.data>$9.99</zinq:table.data>
<zinq:table.data>
<zinq:badge success sm>Available</zinq:badge>
</zinq:table.data>
<zinq:table.data class="flex justify-end pr-2">
<zinq:dropdown sm>
<x-slot name="trigger">
<zinq:button bare xs>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-5">
<path fill-rule="evenodd" d="M10.5 6a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Zm0 6a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Zm0 6a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Z" clip-rule="evenodd" />
</svg>
</zinq:button>
</x-slot>
<zinq:dropdown.link sm href="#">Link 1</zinq:dropdown.link>
</zinq:dropdown>
</zinq:table.data>
</zinq:table.row>
</zinq:table.rows>
</zinq:table>
We can also use the TableBuilder class to create tables programmatically. The TableBuilder
class provides a fluent API to create tables.
We’re constantly expanding the capabilities of Zinq, and some powerful TableBuilder new features are scheduled for release in early 2025:
By purchasing a Zinq license today, you’ll secure lifetime access to all updates, ensuring you can take advantage of these features the moment they’re ready. Don’t miss this opportunity to lock in the promotional pricing now and guarantee your access to the best Zinq has to offer!