Components / Table

Table

# Introduction

The Table component is used to display data in a tabular format. It is a wrapper around the native HTML <table> element.

# Usage

Product Category Price Inventory
Avatar Traveling containers
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>

# Table Builder

We can also use the TableBuilder class to create tables programmatically. The TableBuilder class provides a fluent API to create tables.

# Coming Soon

We’re constantly expanding the capabilities of Zinq, and some powerful TableBuilder new features are scheduled for release in early 2025:

  • sorting
  • filtering
  • pagination

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!