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.Hover state
Set `hoverable` to `true` to change the background color of a data row when hovering over the element with the cursor.Checkbox
Checkboxes can be used inside table data rows to select multiple data sets and apply a bulk action.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.| Product | Info | |||
|---|---|---|---|---|
| Brand | Product name | Color | Category | Price |
| 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 |
| Total | 3 | 21,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.| 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.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.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 |