Components / Table

Table

Zinq License Required

This component is part of Zinq Prime and requires a valid license to use.

# Introduction
# Usage
# Table Builder
# Coming Soon

# 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
Traveling containers	Travel	$9.99	Available	Link 1

<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!