React Table Headers - Flowbite

Use the table header component to append options and controls on top of a table component to indicate titles, filters, sorting elements, and other settings.


Default table header

Use this free example of a header component that you can position on top of a header to add a search functionality, a CRUD button, table options and filtering results.

View on GitHub

Table header with text and button

This free example can be used to show a title, description, and CTA button for creating a new item inside the table data.

View on GitHub
Flowbite Users

Manage all your existing users or add a new one

Table header with CTA and button group

Use this example to show a CTA button and a list of buttons grouped on the right side of the table header to toggle options.

View on GitHub

Multi-level table header with filters

Use this example to show a multiple rows of data and actions on top of a table including dropdown filters, inline filters, CTA buttons, search inputs, and more.

View on GitHub
View all products

Table header with date range picker filter

Use this example to filter table results using a date range picker to pick a start and end time and a button to apply the options.

View on GitHub
Total data used
 to 

Table header with tooltip and select filters

Use this example to show a title with an informative tooltip and a row of select input filter elements.

View on GitHub
Flowbite Products
6,560 results
More info

Table header with statistics

This example can be used on top of a table component to show statistics and a couple of CTA and option buttons.

View on GitHub
All keywords: 146
Total volume: 88.4k

Table header for comparison

Use this example as a header for a table component to show a list of comparison fields, CTA and options buttons, and a title with an informational tooltip.

View on GitHub
Compare Products
More info

Table header with button group filters and export

Get started with this example to show a list of buttons grouped together that you can use to filter results together with export functions, dropdown buttons, and more.

View on GitHub
SERP Analysis6,560,067 Results
More info
View SERP
Filter by:
More options

Table header with tabs

Use this example to show navigational tabs for the table component and change the content inside when clicking on one or the other.

View on GitHub
Bonnie Green

New York, United States

Pending payments

$832

Received payments

$1956

Table header with search input

This example can be used to show a search input field inside the table header to filter results by a query string.

View on GitHub
Rankings Overview1-100 (436)
More info

Table header with settings

Use this example to show a table settings button with a title, an informative tooltip, and a list of buttons to use for additional settings.

View on GitHub
Rankings Overview1-100 (436)
More info

Table header with breadcrumb

This example can be used to show navigation breadcrumbs, a list of select input filter elements, radio input elements, and dropdown buttons.

View on GitHub
View list of products
Show by: