Table Headers

Table header and footer blocks for search, filtering, pagination, and action buttons in data tables.

Default Table Header

Blade code

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

Table Header with Custom Props

Users

Add user

Blade code

<x-fwb.blocks.application.table-header
    title="Users"
    buttonText="Add user"
    action="/users/create"
    searchPlaceholder="Search users..." />

Default Table Header with CTA

Blade code

<x-fwb.blocks.application.table-header-cta />

Table Header CTA with Custom Props

Inventory

Blade code

<x-fwb.blocks.application.table-header-cta
    title="Inventory"
    description="Manage your inventory items and track stock levels across all warehouses." />

Default Table Header with Button Group

Blade code

<x-fwb.blocks.application.table-header-button-group />

Table Header Button Group with Custom Props

Blade code

<x-fwb.blocks.application.table-header-button-group
    title="Orders"
    searchPlaceholder="Search orders..." />

Default Table Footer

Blade code

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

Table Footer with Custom Props

Blade code

<x-fwb.blocks.application.table-footer showing="1-25" total="500" />

Default Table Footer with Buttons

Blade code

<x-fwb.blocks.application.table-footer-button />

Table Footer Buttons with Custom Props

Blade code

<x-fwb.blocks.application.table-footer-button showing="11-20" total="250" />

Component Properties

Table Header x-fwb.blocks.application.table-header

PropTypeDefaultDescription
title string All Products The heading displayed in the table header.
buttonText string Add product Label for the primary action button.
action string # URL for the primary action button.
searchPlaceholder string Search Placeholder text for the search input.
search slot - Custom search area replacing the default search input.
actions slot - Custom actions area replacing the default add button.
slot slot - Content rendered below the header (e.g. table rows).

Table Header CTA x-fwb.blocks.application.table-header-cta

PropTypeDefaultDescription
title string All Products The heading displayed in the header.
description string Browse a list of Flowbite products... Description text shown in the info banner.
actions slot - Custom actions area next to the title.
cta slot - Custom CTA content replacing the default description.
slot slot - Content rendered below the header.

Table Header Button Group x-fwb.blocks.application.table-header-button-group

PropTypeDefaultDescription
title string All Products The heading displayed in the header.
searchPlaceholder string Search Placeholder text for the search input.
buttonGroup slot - Custom button group replacing the default All/Active/Inactive buttons.
actions slot - Custom actions area replacing the default Actions/Filter dropdowns.
slot slot - Content rendered below the header.

Table Footer x-fwb.blocks.application.table-footer

PropTypeDefaultDescription
showing string 1-10 The range of items currently displayed.
total string 1000 The total number of items.
slot slot - Custom pagination content replacing the default numbered pagination.

Table Footer Button x-fwb.blocks.application.table-footer-button

PropTypeDefaultDescription
showing string 1-10 The range of items currently displayed.
total string 1000 The total number of items.
buttons slot - Custom buttons replacing the default Previous/Next navigation.