CRUD Tables

Table-based CRUD blocks for listing, searching, and managing items with built-in pagination, filters, and action controls in application interfaces.

Default CRUD Table

Product name Category Brand Description Price Actions
Apple iMac 27" PC Apple 300 $2999
Apple iMac 20" PC Apple 200 $1499
Apple iPhone 14 Phone Apple 1237 $999

Blade code

<x-fwb.blocks.application.crud />

CRUD Table with Custom Rows

Name Department Role Email Actions
Jane Smith Design Senior Designer jane@example.com
John Doe Engineering Backend Developer john@example.com

Blade code

<x-fwb.blocks.application.crud title="All Employees">
    <x-slot:rows>
        <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
            <tr>
                <th scope="col" class="px-4 py-3">Name</th>
                <th scope="col" class="px-4 py-3">Department</th>
                <th scope="col" class="px-4 py-3">Role</th>
                <th scope="col" class="px-4 py-3">Email</th>
                <th scope="col" class="px-4 py-3">
                    <span class="sr-only">Actions</span>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr class="border-b dark:border-gray-700">
                <th scope="row" class="px-4 py-3 font-medium text-gray-900 whitespace-nowrap dark:text-white">Jane Smith</th>
                <td class="px-4 py-3">Design</td>
                <td class="px-4 py-3">Senior Designer</td>
                <td class="px-4 py-3">jane@example.com</td>
                <td class="px-4 py-3 flex items-center justify-end">
                    <button class="inline-flex items-center p-0.5 text-sm font-medium text-center text-gray-500 hover:text-gray-800 rounded-lg focus:outline-none dark:text-gray-400 dark:hover:text-gray-100" type="button">
                        <x-fwb-o-dots-horizontal class="w-5 h-5" />
                    </button>
                </td>
            </tr>
            <tr class="border-b dark:border-gray-700">
                <th scope="row" class="px-4 py-3 font-medium text-gray-900 whitespace-nowrap dark:text-white">John Doe</th>
                <td class="px-4 py-3">Engineering</td>
                <td class="px-4 py-3">Backend Developer</td>
                <td class="px-4 py-3">john@example.com</td>
                <td class="px-4 py-3 flex items-center justify-end">
                    <button class="inline-flex items-center p-0.5 text-sm font-medium text-center text-gray-500 hover:text-gray-800 rounded-lg focus:outline-none dark:text-gray-400 dark:hover:text-gray-100" type="button">
                        <x-fwb-o-dots-horizontal class="w-5 h-5" />
                    </button>
                </td>
            </tr>
        </tbody>
    </x-slot:rows>
</x-fwb.blocks.application.crud>

Default CRUD Products Table

Product name Category Brand Description Price Actions
iMac Front Image Apple iMac 27"
Desktop PC Apple 300 $2999
iMac Front Image Apple iMac 20"
Desktop PC Apple 200 $1499
iPhone Front Image Apple iPhone 14
Phone Apple 1237 $999

Blade code

<x-fwb.blocks.application.crud-products />

CRUD Products Table with Custom Rows

Item Type Manufacturer Quantity Price Actions
iMac Front Image Dell Monitor 24"
Monitor Dell 150 $349

Blade code

<x-fwb.blocks.application.crud-products title="Inventory">
    <x-slot:rows>
        <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
            <tr>
                <th scope="col" class="px-4 py-4">Item</th>
                <th scope="col" class="px-4 py-3">Type</th>
                <th scope="col" class="px-4 py-3">Manufacturer</th>
                <th scope="col" class="px-4 py-3">Quantity</th>
                <th scope="col" class="px-4 py-3">Price</th>
                <th scope="col" class="px-4 py-3">
                    <span class="sr-only">Actions</span>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr class="border-b dark:border-gray-700">
                <th scope="row" class="px-4 py-3 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                    <div class="flex items-center mr-3">
                        <img src="https://flowbite.s3.amazonaws.com/blocks/application-ui/products/imac-front-image.png" alt="iMac Front Image" class="h-8 w-auto mr-3">
                        Dell Monitor 24"
                    </div>
                </th>
                <td class="px-4 py-3">
                    <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2 py-0.5 rounded dark:bg-blue-900 dark:text-blue-300">Monitor</span>
                </td>
                <td class="px-4 py-3">Dell</td>
                <td class="px-4 py-3">150</td>
                <td class="px-4 py-3">$349</td>
                <td class="px-4 py-3 flex items-center justify-end">
                    <button class="inline-flex items-center p-0.5 text-sm font-medium text-center text-gray-500 hover:text-gray-800 rounded-lg focus:outline-none dark:text-gray-400 dark:hover:text-gray-100" type="button">
                        <x-fwb-o-dots-horizontal class="w-5 h-5" />
                    </button>
                </td>
            </tr>
        </tbody>
    </x-slot:rows>
</x-fwb.blocks.application.crud-products>

Default Advanced Table

Product name Category Brand Description Price Actions
Apple iMac 27" PC Apple 300 $2999
Apple MacBook Pro 17" Laptop Apple 200 $2999
Xbox Series S Gaming/Console Microsoft 450 $299

Blade code

<x-fwb.blocks.application.advanced-table />

Advanced Table with Custom Props

Add member
Name Role Status Joined Actions
Alice Johnson Lead Engineer Active Jan 2024
Bob Williams Designer On Leave Mar 2024

Blade code

<x-fwb.blocks.application.advanced-table
    title="Team Members"
    searchPlaceholder="Search members..."
    addButtonText="Add member"
    addAction="/members/create">
    <x-slot:thead>
        <tr>
            <th scope="col" class="px-4 py-3">Name</th>
            <th scope="col" class="px-4 py-3">Role</th>
            <th scope="col" class="px-4 py-3">Status</th>
            <th scope="col" class="px-4 py-3">Joined</th>
            <th scope="col" class="px-4 py-3">
                <span class="sr-only">Actions</span>
            </th>
        </tr>
    </x-slot:thead>
    <x-slot:rows>
        <tr class="border-b dark:border-gray-700">
            <th scope="row" class="px-4 py-3 font-medium text-gray-900 whitespace-nowrap dark:text-white">Alice Johnson</th>
            <td class="px-4 py-3">Lead Engineer</td>
            <td class="px-4 py-3">
                <span class="bg-green-100 text-green-800 text-xs font-medium px-2 py-0.5 rounded dark:bg-green-900 dark:text-green-300">Active</span>
            </td>
            <td class="px-4 py-3">Jan 2024</td>
            <td class="px-4 py-3 flex items-center justify-end">
                <button class="inline-flex items-center p-0.5 text-sm font-medium text-center text-gray-500 hover:text-gray-800 rounded-lg focus:outline-none dark:text-gray-400 dark:hover:text-gray-100" type="button">
                    <x-fwb-o-dots-horizontal class="w-5 h-5" />
                </button>
            </td>
        </tr>
        <tr class="border-b dark:border-gray-700">
            <th scope="row" class="px-4 py-3 font-medium text-gray-900 whitespace-nowrap dark:text-white">Bob Williams</th>
            <td class="px-4 py-3">Designer</td>
            <td class="px-4 py-3">
                <span class="bg-yellow-100 text-yellow-800 text-xs font-medium px-2 py-0.5 rounded dark:bg-yellow-900 dark:text-yellow-300">On Leave</span>
            </td>
            <td class="px-4 py-3">Mar 2024</td>
            <td class="px-4 py-3 flex items-center justify-end">
                <button class="inline-flex items-center p-0.5 text-sm font-medium text-center text-gray-500 hover:text-gray-800 rounded-lg focus:outline-none dark:text-gray-400 dark:hover:text-gray-100" type="button">
                    <x-fwb-o-dots-horizontal class="w-5 h-5" />
                </button>
            </td>
        </tr>
    </x-slot:rows>
</x-fwb.blocks.application.advanced-table>

Default Advanced Table with Products

 Product name Category Brand Stock Sales/Day Sales/Month Revenue Actions
iMac Front Image Apple iMac 27"
Desktop PC Apple
95
1.47 3,870 $12,999
iMac Front Image Apple iMac 20"
Desktop PC Apple
0
0.95 1,258 $4,999
iPhone Front Image Apple iPhone 14
Phone Apple
12
1.00 2,300 $6,749

Blade code

<x-fwb.blocks.application.advanced-table-products />

Advanced Table Products with Custom Rows

 Product Category Stock Revenue Actions
Product Samsung Galaxy S24
Phone
230
$18,500

Blade code

<x-fwb.blocks.application.advanced-table-products title="Sales Overview">
    <x-slot:rows>
        <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
            <tr>
                <th scope="col" class="p-4">
                    <div class="flex items-center">
                        <input type="checkbox" class="w-4 h-4 bg-gray-100 border-gray-300 rounded text-blue-600 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                    </div>
                </th>
                <th scope="col" class="px-4 py-3">Product</th>
                <th scope="col" class="px-4 py-3">Category</th>
                <th scope="col" class="px-4 py-3">Stock</th>
                <th scope="col" class="px-4 py-3">Revenue</th>
                <th scope="col" class="px-4 py-3">
                    <span class="sr-only">Actions</span>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr class="border-b dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
                <td class="w-4 px-4 py-3">
                    <div class="flex items-center">
                        <input type="checkbox" class="w-4 h-4 bg-gray-100 border-gray-300 rounded text-blue-600 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                    </div>
                </td>
                <th scope="row" class="px-4 py-3 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                    <div class="flex items-center">
                        <img src="https://flowbite.s3.amazonaws.com/blocks/application-ui/products/imac-front-image.png" alt="Product" class="h-8 w-auto mr-3">
                        Samsung Galaxy S24
                    </div>
                </th>
                <td class="px-4 py-3">
                    <span class="bg-green-100 text-green-800 text-xs font-medium px-2 py-0.5 rounded dark:bg-green-900 dark:text-green-300">Phone</span>
                </td>
                <td class="px-4 py-3 font-medium text-gray-900 dark:text-white">
                    <div class="flex items-center">
                        <div class="h-4 w-4 rounded-full bg-green-400 inline-block mr-2"></div>
                        230
                    </div>
                </td>
                <td class="px-4 py-3 font-medium text-gray-900 dark:text-white">$18,500</td>
                <td class="px-4 py-3 flex items-center justify-end">
                    <button class="inline-flex items-center text-sm font-medium hover:bg-gray-100 dark:hover:bg-gray-700 p-1.5 text-center text-gray-500 hover:text-gray-800 rounded-lg focus:outline-none dark:text-gray-400 dark:hover:text-gray-100" type="button">
                        <x-fwb-o-dots-horizontal class="w-5 h-5" />
                    </button>
                </td>
            </tr>
        </tbody>
    </x-slot:rows>
</x-fwb.blocks.application.advanced-table-products>

Component Properties

CRUD Table x-fwb.blocks.application.crud

PropTypeDefaultDescription
title string All Products The table section heading (used for accessibility).
header slot - Custom header area replacing the default search bar and action buttons.
rows slot - Custom table head and body content replacing the default product rows.
footer slot - Custom footer area replacing the default pagination navigation.

CRUD Products Table x-fwb.blocks.application.crud-products

PropTypeDefaultDescription
title string All Products The table section heading (used for accessibility).
header slot - Custom header area replacing the default search bar, action buttons, and filter dropdown.
rows slot - Custom table head and body content replacing the default product rows with images and category badges.

Advanced Table x-fwb.blocks.application.advanced-table

PropTypeDefaultDescription
title string All Products The table section heading (used for accessibility).
searchPlaceholder string Search Placeholder text for the search input field.
addButtonText string Add product Label for the primary add/create button.
addAction string # URL for the add button link.
header slot - Custom header area replacing the default search, add button, actions, and filter controls.
thead slot - Custom table header row(s) replacing the default column headings.
rows slot - Custom table body rows replacing the default product data.
pagination slot - Custom pagination content replacing the default page navigation.
actionsDropdown slot - Custom content for the Actions dropdown menu.
filterDropdown slot - Custom content for the Filter dropdown menu.
slot slot - Default slot for custom table body rows (used when rows slot is not set).

Advanced Table Products x-fwb.blocks.application.advanced-table-products

PropTypeDefaultDescription
title string All Products The table section heading (used for accessibility).
header slot - Custom header area replacing the default search bar, action buttons, and filter dropdown.
rows slot - Custom table head and body content replacing the default product rows with checkboxes, images, badges, and stock indicators.