# Svelte Tables - Flowbite
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.
Info Circle
Use @flowbite-svelte-plugins/datatable to search, sort, filter and paginate table data of rows and columns for your web application.
## Setup
```svelte
```
## Default table
Use the following example of a responsive table component to show multiple rows and columns of text data.
```svelte
Product nameColorCategoryPriceApple MacBook Pro 17"SilverLaptop$2999Microsoft Surface ProWhiteLaptop PC$1999Magic Mouse 2BlackAccessories$99
```
## Striped rows
Set the `striped` prop to `true` to alternate background colors of every second table row.
```svelte
```
## Hover state
Set `hoverable` to `true` to change the background color of a data row when hovering over the element with the cursor.
```svelte
Product nameColorCategoryPriceEditApple MacBook Pro 17"SilverLaptop$2999EditMicrosoft Surface ProWhiteLaptop PC$1999EditMagic Mouse 2BlackAccessories$99Edit
```
## Checkbox
Checkboxes can be used inside table data rows to select multiple data sets and apply a bulk action.
```svelte
Product nameColorCategoryPriceEditApple MacBook Pro 17"SilverLaptop$2999EditMicrosoft Surface ProWhiteLaptop PC$1999EditMagic Mouse 2BlackAccessories$99Edit
```
## Table from data
```svelte
```
## Dynamic data
```svelte
```
## Sorting by column
Please use [DataTable](https://flowbite-svelte.com/docs/plugins/datatables)
## Table head
By default, the `` component will create a single `
` element without any preset attributes and properties for you, and the slot of this component is implicitly required to be permitted contents of the `
` 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 `
` elements.
```svelte
ProductInfo
BrandProduct nameColorCategoryPrice
AppleApple MacBook Pro 17"SilverLaptop$2999MicrosoftMicrosoft Surface ProWhiteLaptop PC$1999AppleMagic Mouse 2BlackAccessories$99
```
## Table foot
Use this example where the `
` HTML element can be used in conjunction with the head and caption of the table component.
```svelte
Product nameQtyPriceApple MacBook Pro 17"1$2999Microsoft Surface Pro1$1999Magic Mouse 21$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.
```svelte
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 nameColorCategoryPriceEditApple MacBook Pro 17"SilverLaptop$2999EditMicrosoft Surface ProWhiteLaptop PC$1999EditMagic Mouse 2BlackAccessories$99Edit
```
## Without border
Use this example of a table component without any border between the table cells.
```svelte
Product nameColorCategoryPriceApple MacBook Pro 17"SilverLaptop$2999Microsoft Surface ProWhiteLaptop PC$1999Magic Mouse 2BlackAccessories$99
```
## Table with shadow
Use this example to apply a shadow border to the table component.
```svelte
Product nameColorCategoryPriceApple MacBook Pro 17"SilverLaptop$2999Microsoft Surface ProWhiteLaptop PC$1999Magic Mouse 2BlackAccessories$99
```
## Overflow scrolling
Use this example to enable horizontal scrolling if the content inside the table overflows that maximum width.
```svelte
```
## TableSearch
Use the following example to search in a table.
For more advanced usage, please see [this page](https://flowbite-svelte.com/docs/plugins/datatables).
```svelte
IDMakerTypeMake
{#each filteredItems as item}
{item.id}{item.maker}{item.type}{item.make}
{/each}
```
## 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"`.
```svelte
Product nameColorCategoryPriceApple MacBook Pro 17"SilverLaptop$2999Microsoft Surface ProWhiteLaptop PC$1999Magic Mouse 2BlackAccessories$99
```
```svelte
Product nameColorCategoryPriceApple MacBook Pro 17"SilverLaptop$2999Microsoft Surface ProWhiteLaptop PC$1999Magic Mouse 2BlackAccessories$99
```
## Striped rows color
Use this example to apply a different color to every second row inside the table.
```svelte