Flowbite Svelte: v0.46.14
Svelte: v5.0.0-next.179
SvelteKit: v2.5.18
Vite: v5.3.3

Table

The table component represents a set of structured elements made up of rows and columns as table cells that can be used to show data sets to your website users. Get started with multiple variants and styles of these table components.

Default table

Use the following example of a responsive table component to show multiple rows and columns of text data.
Product name Color Category Price
Apple MacBook Pro 17" Sliver Laptop $2999
Microsoft Surface Pro White Laptop PC $1999
Magic Mouse 2 Black Accessories $99

Striped rows

Set the `striped` prop to `true` to alternate background colors of every second table row.
Product name Color Category Price Edit
Apple MacBook Pro 17" Sliver Laptop $2999 Edit
Microsoft Surface Pro White Laptop PC $1999 Edit
Magic Mouse 2 Black Accessories $99 Edit
Google Pixel Phone Gray Phone $799 Edit
Apple Watch 5 Red Wearables $999 Edit

Hover state

Set `hoverable` to `true` to change the background color of a data row when hovering over the element with the cursor.
Product name Color Category Price Edit
Apple MacBook Pro 17" Sliver Laptop $2999 Edit
Microsoft Surface Pro White Laptop PC $1999 Edit
Magic Mouse 2 Black Accessories $99 Edit

Checkbox

Checkboxes can be used inside table data rows to select multiple data sets and apply a bulk action.
Product name Color Category Price Edit
Apple MacBook Pro 17" Sliver Laptop $2999 Edit
Microsoft Surface Pro White Laptop PC $1999 Edit
Magic Mouse 2 Black Accessories $99 Edit

Search input

ID Maker Type Make
1 Toyota ABC 2017
2 Ford CDE 2018
3 Volvo FGH 2019
4 Saab IJK 2020

Sorting by column

This example demonstrates how to add sorting functionality to a table by clicking on a column header. It will sort the table based on the values in that column, in either ascending or descending order. Create a sortTable function that takes a key argument representing the name of the column to sort by and uses the sort method to sort the items array based on the values in the specified column. To toggle between ascending and descending order, use a sortDirection variable that starts at 1 for ascending order, and toggles to -1 for descending order. Also use a sortKey variable to keep track of the currently active sort key. Use the on:click event on the column headers to call the sortTable function with the corresponding column name.
ID Maker Type Make
1 Toyota ABC 2017
2 Ford CDE 2018
3 Volvo FGH 2019
4 Saab IJK 2020

Table head

By default, the `TableHead` component will create a single `tr` element without any preset attributes and properties for you, and the slot of this component is implicitly required to be permitted contents of the `tr` element. If you want to get more controllability of the table head rows, e.g., customize the style or use multiple head rows, set the value of `defaultRow` prop to `false`, and the slot of this component is then implicitly required to be zero or more `tr` elements.
ProductInfo
BrandProduct nameColorCategoryPrice
Apple Apple MacBook Pro 17" Sliver Laptop $2999
Microsoft Microsoft Surface Pro White Laptop PC $1999
Apple Magic Mouse 2 Black Accessories $99

Table foot

Use this example where the `tfoot` HTML element can be used in conjunction with the head and caption of the table component.
Product name Qty Price
Apple MacBook Pro 17" 1 $2999
Microsoft Surface Pro 1 $1999
Magic Mouse 2 1 $99
Total321,000

Table caption

Improve accessibility by using a caption inside the table as a heading to better describe what the table is about for screen readers.
Our products

Browse a list of Flowbite products designed to help you work and play, stay organized, get answers, keep in touch, grow your business, and more.

Product name Color Category Price Edit
Apple MacBook Pro 17" Sliver Laptop $2999 Edit
Microsoft Surface Pro White Laptop PC $1999 Edit
Magic Mouse 2 Black Accessories $99 Edit

Without border

Use this example of a table component without any border between the table cells.
Product name Color Category Price
Apple MacBook Pro 17" Sliver Laptop $2999
Microsoft Surface Pro White Laptop PC $1999
Magic Mouse 2 Black Accessories $99

Table with shadow

Use this example to apply a shadow border to the table component.
Product name Color Category Price
Apple MacBook Pro 17" Sliver Laptop $2999
Microsoft Surface Pro White Laptop PC $1999
Magic Mouse 2 Black Accessories $99

Overflow scrolling

Use this example to enable horizontal scrolling if the content inside the table overflows that maximum width.
Product name Color Category ACCESSORIES AVAILABLE Price WEIGHT ACTION
Apple MacBook Pro 17" Sliver Laptop Yes Yes $2999 3.0 lb. Edit Remove
Microsoft Surface Pro White Laptop PC No Yes $1999 1.0 lb. Edit Remove
Magic Mouse 2 Black Accessories Yes No $99 0.2 lb. Edit Remove

Table colors

Use one of colors from blue, green, red, yellow, purple for the `color` prop. The default color is gray. You can reset all color by using the `color="custom"`.
Product name Color Category Price
Apple MacBook Pro 17" Sliver Laptop $2999
Microsoft Surface Pro White Laptop PC $1999
Magic Mouse 2 Black Accessories $99
ID Maker Type Make
1 Toyota ABC 2017
2 Ford CDE 2018
3 Volvo FGH 2019
4 Saab IJK 2020
Product name Color Category Price
Apple MacBook Pro 17" Sliver Laptop $2999
Microsoft Surface Pro White Laptop PC $1999
Magic Mouse 2 Black Accessories $99

Striped rows color

Use this example to apply a different color to every second row inside the table.
Product name Color Category Price Edit
Apple MacBook Pro 17" Sliver Laptop $2999 Edit
Microsoft Surface Pro White Laptop PC $1999 Edit
Magic Mouse 2 Black Accessories $99 Edit
Google Pixel Phone Gray Phone $799 Edit
Apple Watch 5 Red Wearables $999 Edit

Click and double-click on row

An example to use on:click (main row) and on:dblclick (expanded row)
Product name Color Category Price
Apple MacBook Pro 17" Sliver Laptop $2999
Microsoft Surface Pro White Laptop PC $1999
Magic Mouse 2 Black Accessories $99