flowbite-svelte 0.44.8 → 0.44.10

package/src/routes/docs/components/table.md

@@ -0,0 +1,871 @@
+---
+layout: componentLayout
+title: Svelte Tables - Flowbite
+breadcrumb_title: Svelte Tables
+component_title: Table
+dir: Components
+description: Use the table component to show text, images, links, and other elements inside a structured set of data made up of rows and columns of table cells
+thumnailSize: w-48
+---
+
+<script>
+  import { TableProp, TableDefaultRow, CompoAttributesViewer } from '../../utils'
+  import { P, A } from '$lib'
+
+  const components = 'Table, TableBody, TableBodyCell, TableBodyRow, TableHead, TableHeadCell, TableSearch'
+</script>
+
+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.
+
+## Setup
+
+```svelte example hideOutput
+<script>
+  import { Table, TableBody, TableBodyCell, TableBodyRow, TableHead, TableHeadCell, Checkbox, TableSearch } from 'flowbite-svelte';
+</script>
+```
+
+## Default table
+
+Use the following example of a responsive table component to show multiple rows and columns of text data.
+
+```svelte example
+<script>
+  import { Table, TableBody, TableBodyCell, TableBodyRow, TableHead, TableHeadCell } from 'flowbite-svelte';
+</script>
+
+<Table>
+  <TableHead>
+    <TableHeadCell>Product name</TableHeadCell>
+    <TableHeadCell>Color</TableHeadCell>
+    <TableHeadCell>Category</TableHeadCell>
+    <TableHeadCell>Price</TableHeadCell>
+  </TableHead>
+  <TableBody class="divide-y">
+    <TableBodyRow>
+      <TableBodyCell>Apple MacBook Pro 17"</TableBodyCell>
+      <TableBodyCell>Sliver</TableBodyCell>
+      <TableBodyCell>Laptop</TableBodyCell>
+      <TableBodyCell>$2999</TableBodyCell>
+    </TableBodyRow>
+    <TableBodyRow>
+      <TableBodyCell>Microsoft Surface Pro</TableBodyCell>
+      <TableBodyCell>White</TableBodyCell>
+      <TableBodyCell>Laptop PC</TableBodyCell>
+      <TableBodyCell>$1999</TableBodyCell>
+    </TableBodyRow>
+    <TableBodyRow>
+      <TableBodyCell>Magic Mouse 2</TableBodyCell>
+      <TableBodyCell>Black</TableBodyCell>
+      <TableBodyCell>Accessories</TableBodyCell>
+      <TableBodyCell>$99</TableBodyCell>
+    </TableBodyRow>
+  </TableBody>
+</Table>
+```
+
+## Striped rows
+
+Set the `striped` prop to `true` to alternate background colors of every second table row.
+
+```svelte example
+<script>
+  import { Table, TableBody, TableBodyCell, TableBodyRow, TableHead, TableHeadCell } from 'flowbite-svelte';
+</script>
+
+<Table striped={true}>
+  <TableHead>
+    <TableHeadCell>Product name</TableHeadCell>
+    <TableHeadCell>Color</TableHeadCell>
+    <TableHeadCell>Category</TableHeadCell>
+    <TableHeadCell>Price</TableHeadCell>
+    <TableHeadCell>
+      <span class="sr-only">Edit</span>
+    </TableHeadCell>
+  </TableHead>
+  <TableBody class="divide-y">
+    <TableBodyRow>
+      <TableBodyCell>Apple MacBook Pro 17"</TableBodyCell>
+      <TableBodyCell>Sliver</TableBodyCell>
+      <TableBodyCell>Laptop</TableBodyCell>
+      <TableBodyCell>$2999</TableBodyCell>
+      <TableBodyCell>
+        <a href="/tables" class="font-medium text-primary-600 hover:underline dark:text-primary-500">Edit</a>
+      </TableBodyCell>
+    </TableBodyRow>
+    <TableBodyRow>
+      <TableBodyCell>Microsoft Surface Pro</TableBodyCell>
+      <TableBodyCell>White</TableBodyCell>
+      <TableBodyCell>Laptop PC</TableBodyCell>
+      <TableBodyCell>$1999</TableBodyCell>
+      <TableBodyCell>
+        <a href="/tables" class="font-medium text-primary-600 hover:underline dark:text-primary-500">Edit</a>
+      </TableBodyCell>
+    </TableBodyRow>
+    <TableBodyRow>
+      <TableBodyCell>Magic Mouse 2</TableBodyCell>
+      <TableBodyCell>Black</TableBodyCell>
+      <TableBodyCell>Accessories</TableBodyCell>
+      <TableBodyCell>$99</TableBodyCell>
+      <TableBodyCell>
+        <a href="/tables" class="font-medium text-primary-600 hover:underline dark:text-primary-500">Edit</a>
+      </TableBodyCell>
+    </TableBodyRow>
+    <TableBodyRow>
+      <TableBodyCell>Google Pixel Phone</TableBodyCell>
+      <TableBodyCell>Gray</TableBodyCell>
+      <TableBodyCell>Phone</TableBodyCell>
+      <TableBodyCell>$799</TableBodyCell>
+      <TableBodyCell>
+        <a href="/tables" class="font-medium text-primary-600 hover:underline dark:text-primary-500">Edit</a>
+      </TableBodyCell>
+    </TableBodyRow>
+    <TableBodyRow>
+      <TableBodyCell>Apple Watch 5</TableBodyCell>
+      <TableBodyCell>Red</TableBodyCell>
+      <TableBodyCell>Wearables</TableBodyCell>
+      <TableBodyCell>$999</TableBodyCell>
+      <TableBodyCell>
+        <a href="/tables" class="font-medium text-primary-600 hover:underline dark:text-primary-500">Edit</a>
+      </TableBodyCell>
+    </TableBodyRow>
+  </TableBody>
+</Table>
+```
+
+## Hover state
+
+Set `hoverable` to `true` to change the background color of a data row when hovering over the element with the cursor.
+
+```svelte example
+<script>
+  import { Table, TableBody, TableBodyCell, TableBodyRow, TableHead, TableHeadCell } from 'flowbite-svelte';
+</script>
+
+<Table hoverable={true}>
+  <TableHead>
+    <TableHeadCell>Product name</TableHeadCell>
+    <TableHeadCell>Color</TableHeadCell>
+    <TableHeadCell>Category</TableHeadCell>
+    <TableHeadCell>Price</TableHeadCell>
+    <TableHeadCell>
+      <span class="sr-only">Edit</span>
+    </TableHeadCell>
+  </TableHead>
+  <TableBody class="divide-y">
+    <TableBodyRow>
+      <TableBodyCell>Apple MacBook Pro 17"</TableBodyCell>
+      <TableBodyCell>Sliver</TableBodyCell>
+      <TableBodyCell>Laptop</TableBodyCell>
+      <TableBodyCell>$2999</TableBodyCell>
+      <TableBodyCell>
+        <a href="/tables" class="font-medium text-primary-600 hover:underline dark:text-primary-500">Edit</a>
+      </TableBodyCell>
+    </TableBodyRow>
+    <TableBodyRow>
+      <TableBodyCell>Microsoft Surface Pro</TableBodyCell>
+      <TableBodyCell>White</TableBodyCell>
+      <TableBodyCell>Laptop PC</TableBodyCell>
+      <TableBodyCell>$1999</TableBodyCell>
+      <TableBodyCell>
+        <a href="/tables" class="font-medium text-primary-600 hover:underline dark:text-primary-500">Edit</a>
+      </TableBodyCell>
+    </TableBodyRow>
+    <TableBodyRow>
+      <TableBodyCell>Magic Mouse 2</TableBodyCell>
+      <TableBodyCell>Black</TableBodyCell>
+      <TableBodyCell>Accessories</TableBodyCell>
+      <TableBodyCell>$99</TableBodyCell>
+      <TableBodyCell>
+        <a href="/tables" class="font-medium text-primary-600 hover:underline dark:text-primary-500">Edit</a>
+      </TableBodyCell>
+    </TableBodyRow>
+  </TableBody>
+</Table>
+```
+
+## Checkbox
+
+Checkboxes can be used inside table data rows to select multiple data sets and apply a bulk action.
+
+```svelte example
+<script>
+  import { Table, TableBody, TableBodyCell, TableBodyRow, TableHead, TableHeadCell, Checkbox } from 'flowbite-svelte';
+</script>
+
+<Table hoverable={true}>
+  <TableHead>
+    <TableHeadCell class="!p-4">
+      <Checkbox />
+    </TableHeadCell>
+    <TableHeadCell>Product name</TableHeadCell>
+    <TableHeadCell>Color</TableHeadCell>
+    <TableHeadCell>Category</TableHeadCell>
+    <TableHeadCell>Price</TableHeadCell>
+    <TableHeadCell>
+      <span class="sr-only">Edit</span>
+    </TableHeadCell>
+  </TableHead>
+  <TableBody class="divide-y">
+    <TableBodyRow>
+      <TableBodyCell class="!p-4">
+        <Checkbox />
+      </TableBodyCell>
+      <TableBodyCell>Apple MacBook Pro 17"</TableBodyCell>
+      <TableBodyCell>Sliver</TableBodyCell>
+      <TableBodyCell>Laptop</TableBodyCell>
+      <TableBodyCell>$2999</TableBodyCell>
+      <TableBodyCell>
+        <a href="/tables" class="font-medium text-primary-600 hover:underline dark:text-primary-500">Edit</a>
+      </TableBodyCell>
+    </TableBodyRow>
+    <TableBodyRow>
+      <TableBodyCell class="!p-4">
+        <Checkbox />
+      </TableBodyCell>
+      <TableBodyCell>Microsoft Surface Pro</TableBodyCell>
+      <TableBodyCell>White</TableBodyCell>
+      <TableBodyCell>Laptop PC</TableBodyCell>
+      <TableBodyCell>$1999</TableBodyCell>
+      <TableBodyCell>
+        <a href="/tables" class="font-medium text-primary-600 hover:underline dark:text-primary-500">Edit</a>
+      </TableBodyCell>
+    </TableBodyRow>
+    <TableBodyRow>
+      <TableBodyCell class="!p-4">
+        <Checkbox />
+      </TableBodyCell>
+      <TableBodyCell>Magic Mouse 2</TableBodyCell>
+      <TableBodyCell>Black</TableBodyCell>
+      <TableBodyCell>Accessories</TableBodyCell>
+      <TableBodyCell>$99</TableBodyCell>
+      <TableBodyCell>
+        <a href="/tables" class="font-medium text-primary-600 hover:underline dark:text-primary-500">Edit</a>
+      </TableBodyCell>
+    </TableBodyRow>
+  </TableBody>
+</Table>
+```
+
+## Search input
+
+```svelte example
+<script>
+  import { Table, TableBody, TableBodyCell, TableBodyRow, TableHead, TableHeadCell, TableSearch } from 'flowbite-svelte';
+  let searchTerm = '';
+  let items = [
+    { id: 1, maker: 'Toyota', type: 'ABC', make: 2017 },
+    { id: 2, maker: 'Ford', type: 'CDE', make: 2018 },
+    { id: 3, maker: 'Volvo', type: 'FGH', make: 2019 },
+    { id: 4, maker: 'Saab', type: 'IJK', make: 2020 }
+  ];
+  $: filteredItems = items.filter((item) => item.maker.toLowerCase().indexOf(searchTerm.toLowerCase()) !== -1);
+</script>
+
+<TableSearch placeholder="Search by maker name" hoverable={true} bind:inputValue={searchTerm}>
+  <TableHead>
+    <TableHeadCell>ID</TableHeadCell>
+    <TableHeadCell>Maker</TableHeadCell>
+    <TableHeadCell>Type</TableHeadCell>
+    <TableHeadCell>Make</TableHeadCell>
+  </TableHead>
+  <TableBody class="divide-y">
+    {#each filteredItems as item}
+      <TableBodyRow>
+        <TableBodyCell>{item.id}</TableBodyCell>
+        <TableBodyCell>{item.maker}</TableBodyCell>
+        <TableBodyCell>{item.type}</TableBodyCell>
+        <TableBodyCell>{item.make}</TableBodyCell>
+      </TableBodyRow>
+    {/each}
+  </TableBody>
+</TableSearch>
+```
+
+## 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.
+
+```svelte example
+<script>
+  import { Table, TableBody, TableBodyCell, TableBodyRow, TableHead, TableHeadCell } from 'flowbite-svelte';
+  import { writable } from 'svelte/store';
+
+  let items = [
+    { id: 1, maker: 'Toyota', type: 'ABC', make: 2017 },
+    { id: 2, maker: 'Ford', type: 'CDE', make: 2018 },
+    { id: 3, maker: 'Volvo', type: 'FGH', make: 2019 },
+    { id: 4, maker: 'Saab', type: 'IJK', make: 2020 }
+  ];
+
+  const sortKey = writable('id'); // default sort key
+  const sortDirection = writable(1); // default sort direction (ascending)
+  const sortItems = writable(items.slice()); // make a copy of the items array
+
+  // Define a function to sort the items
+  const sortTable = (key) => {
+    // If the same key is clicked, reverse the sort direction
+    if ($sortKey === key) {
+      sortDirection.update((val) => -val);
+    } else {
+      sortKey.set(key);
+      sortDirection.set(1);
+    }
+  };
+
+  $: {
+    const key = $sortKey;
+    const direction = $sortDirection;
+    const sorted = [...$sortItems].sort((a, b) => {
+      const aVal = a[key];
+      const bVal = b[key];
+      if (aVal < bVal) {
+        return -direction;
+      } else if (aVal > bVal) {
+        return direction;
+      }
+      return 0;
+    });
+    sortItems.set(sorted);
+  }
+</script>
+
+<Table hoverable={true}>
+  <TableHead>
+    <TableHeadCell on:click={() => sortTable('id')}>ID</TableHeadCell>
+    <TableHeadCell on:click={() => sortTable('maker')}>Maker</TableHeadCell>
+    <TableHeadCell on:click={() => sortTable('type')}>Type</TableHeadCell>
+    <TableHeadCell on:click={() => sortTable('make')}>Make</TableHeadCell>
+  </TableHead>
+  <TableBody class="divide-y">
+    {#each $sortItems as item}
+      <TableBodyRow>
+        <TableBodyCell>{item.id}</TableBodyCell>
+        <TableBodyCell>{item.maker}</TableBodyCell>
+        <TableBodyCell>{item.type}</TableBodyCell>
+        <TableBodyCell>{item.make}</TableBodyCell>
+      </TableBodyRow>
+    {/each}
+  </TableBody>
+</Table>
+```
+
+## 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.
+
+```svelte example
+<script>
+  import { Table, TableBody, TableBodyCell, TableBodyRow, TableHead, TableHeadCell } from 'flowbite-svelte';
+</script>
+
+<Table>
+  <TableHead defaultRow={false}>
+    <tr>
+      <TableHeadCell colspan="2">Product</TableHeadCell>
+      <TableHeadCell colspan="3">Info</TableHeadCell>
+    </tr>
+    <tr>
+      <TableHeadCell>Brand</TableHeadCell>
+      <TableHeadCell>Product name</TableHeadCell>
+      <TableHeadCell>Color</TableHeadCell>
+      <TableHeadCell>Category</TableHeadCell>
+      <TableHeadCell>Price</TableHeadCell>
+    </tr>
+  </TableHead>
+  <TableBody class="divide-y">
+    <TableBodyRow>
+      <TableBodyCell>Apple</TableBodyCell>
+      <TableBodyCell>Apple MacBook Pro 17"</TableBodyCell>
+      <TableBodyCell>Sliver</TableBodyCell>
+      <TableBodyCell>Laptop</TableBodyCell>
+      <TableBodyCell>$2999</TableBodyCell>
+    </TableBodyRow>
+    <TableBodyRow>
+      <TableBodyCell>Microsoft</TableBodyCell>
+      <TableBodyCell>Microsoft Surface Pro</TableBodyCell>
+      <TableBodyCell>White</TableBodyCell>
+      <TableBodyCell>Laptop PC</TableBodyCell>
+      <TableBodyCell>$1999</TableBodyCell>
+    </TableBodyRow>
+    <TableBodyRow>
+      <TableBodyCell>Apple</TableBodyCell>
+      <TableBodyCell>Magic Mouse 2</TableBodyCell>
+      <TableBodyCell>Black</TableBodyCell>
+      <TableBodyCell>Accessories</TableBodyCell>
+      <TableBodyCell>$99</TableBodyCell>
+    </TableBodyRow>
+  </TableBody>
+</Table>
+```
+
+## Table foot
+
+Use this example where the `<tfoot>` HTML element can be used in conjunction with the head and caption of the table component.
+
+```svelte example
+<script>
+  import { Table, TableBody, TableBodyCell, TableBodyRow, TableHead, TableHeadCell } from 'flowbite-svelte';
+</script>
+
+<Table noborder={true}>
+  <TableHead class="text-xs text-gray-700 uppercase bg-gray-100 dark:bg-gray-700 dark:text-gray-400">
+    <TableHeadCell>Product name</TableHeadCell>
+    <TableHeadCell>Qty</TableHeadCell>
+    <TableHeadCell>Price</TableHeadCell>
+  </TableHead>
+  <TableBody>
+    <TableBodyRow>
+      <TableBodyCell>Apple MacBook Pro 17"</TableBodyCell>
+      <TableBodyCell>1</TableBodyCell>
+      <TableBodyCell>$2999</TableBodyCell>
+    </TableBodyRow>
+    <TableBodyRow>
+      <TableBodyCell>Microsoft Surface Pro</TableBodyCell>
+      <TableBodyCell>1</TableBodyCell>
+      <TableBodyCell>$1999</TableBodyCell>
+    </TableBodyRow>
+    <TableBodyRow>
+      <TableBodyCell>Magic Mouse 2</TableBodyCell>
+      <TableBodyCell>1</TableBodyCell>
+      <TableBodyCell>$99</TableBodyCell>
+    </TableBodyRow>
+  </TableBody>
+  <tfoot>
+    <tr class="font-semibold text-gray-900 dark:text-white">
+      <th scope="row" class="py-3 px-6 text-base">Total</th>
+      <td class="py-3 px-6">3</td>
+      <td class="py-3 px-6">21,000</td>
+    </tr>
+  </tfoot>
+</Table>
+```
+
+## 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 example
+<script>
+  import { Table, TableBody, TableBodyCell, TableBodyRow, TableHead, TableHeadCell } from 'flowbite-svelte';
+</script>
+
+<Table>
+  <caption class="p-5 text-lg font-semibold text-left text-gray-900 bg-white dark:text-white dark:bg-gray-800">
+    Our products
+    <p class="mt-1 text-sm font-normal text-gray-500 dark:text-gray-400">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.</p>
+  </caption>
+  <TableHead>
+    <TableHeadCell>Product name</TableHeadCell>
+    <TableHeadCell>Color</TableHeadCell>
+    <TableHeadCell>Category</TableHeadCell>
+    <TableHeadCell>Price</TableHeadCell>
+    <TableHeadCell>
+      <span class="sr-only">Edit</span>
+    </TableHeadCell>
+  </TableHead>
+  <TableBody class="divide-y">
+    <TableBodyRow>
+      <TableBodyCell>Apple MacBook Pro 17"</TableBodyCell>
+      <TableBodyCell>Sliver</TableBodyCell>
+      <TableBodyCell>Laptop</TableBodyCell>
+      <TableBodyCell>$2999</TableBodyCell>
+      <TableBodyCell>
+        <a href="/tables" class="font-medium text-primary-600 hover:underline dark:text-primary-500">Edit</a>
+      </TableBodyCell>
+    </TableBodyRow>
+    <TableBodyRow>
+      <TableBodyCell>Microsoft Surface Pro</TableBodyCell>
+      <TableBodyCell>White</TableBodyCell>
+      <TableBodyCell>Laptop PC</TableBodyCell>
+      <TableBodyCell>$1999</TableBodyCell>
+      <TableBodyCell>
+        <a href="/tables" class="font-medium text-primary-600 hover:underline dark:text-primary-500">Edit</a>
+      </TableBodyCell>
+    </TableBodyRow>
+    <TableBodyRow>
+      <TableBodyCell>Magic Mouse 2</TableBodyCell>
+      <TableBodyCell>Black</TableBodyCell>
+      <TableBodyCell>Accessories</TableBodyCell>
+      <TableBodyCell>$99</TableBodyCell>
+      <TableBodyCell>
+        <a href="/tables" class="font-medium text-primary-600 hover:underline dark:text-primary-500">Edit</a>
+      </TableBodyCell>
+    </TableBodyRow>
+  </TableBody>
+</Table>
+```
+
+## Without border
+
+Use this example of a table component without any border between the table cells.
+
+```svelte example
+<script>
+  import { Table, TableBody, TableBodyCell, TableBodyRow, TableHead, TableHeadCell } from 'flowbite-svelte';
+</script>
+
+<Table noborder={true}>
+  <TableHead>
+    <TableHeadCell>Product name</TableHeadCell>
+    <TableHeadCell>Color</TableHeadCell>
+    <TableHeadCell>Category</TableHeadCell>
+    <TableHeadCell>Price</TableHeadCell>
+  </TableHead>
+  <TableBody>
+    <TableBodyRow>
+      <TableBodyCell>Apple MacBook Pro 17"</TableBodyCell>
+      <TableBodyCell>Sliver</TableBodyCell>
+      <TableBodyCell>Laptop</TableBodyCell>
+      <TableBodyCell>$2999</TableBodyCell>
+    </TableBodyRow>
+    <TableBodyRow>
+      <TableBodyCell>Microsoft Surface Pro</TableBodyCell>
+      <TableBodyCell>White</TableBodyCell>
+      <TableBodyCell>Laptop PC</TableBodyCell>
+      <TableBodyCell>$1999</TableBodyCell>
+    </TableBodyRow>
+    <TableBodyRow>
+      <TableBodyCell>Magic Mouse 2</TableBodyCell>
+      <TableBodyCell>Black</TableBodyCell>
+      <TableBodyCell>Accessories</TableBodyCell>
+      <TableBodyCell>$99</TableBodyCell>
+    </TableBodyRow>
+  </TableBody>
+</Table>
+```
+
+## Table with shadow
+
+Use this example to apply a shadow border to the table component.
+
+```svelte example
+<script>
+  import { Table, TableBody, TableBodyCell, TableBodyRow, TableHead, TableHeadCell } from 'flowbite-svelte';
+</script>
+
+<Table shadow>
+  <TableHead>
+    <TableHeadCell>Product name</TableHeadCell>
+    <TableHeadCell>Color</TableHeadCell>
+    <TableHeadCell>Category</TableHeadCell>
+    <TableHeadCell>Price</TableHeadCell>
+  </TableHead>
+  <TableBody class="divide-y">
+    <TableBodyRow>
+      <TableBodyCell>Apple MacBook Pro 17"</TableBodyCell>
+      <TableBodyCell>Sliver</TableBodyCell>
+      <TableBodyCell>Laptop</TableBodyCell>
+      <TableBodyCell>$2999</TableBodyCell>
+    </TableBodyRow>
+    <TableBodyRow>
+      <TableBodyCell>Microsoft Surface Pro</TableBodyCell>
+      <TableBodyCell>White</TableBodyCell>
+      <TableBodyCell>Laptop PC</TableBodyCell>
+      <TableBodyCell>$1999</TableBodyCell>
+    </TableBodyRow>
+    <TableBodyRow>
+      <TableBodyCell>Magic Mouse 2</TableBodyCell>
+      <TableBodyCell>Black</TableBodyCell>
+      <TableBodyCell>Accessories</TableBodyCell>
+      <TableBodyCell>$99</TableBodyCell>
+    </TableBodyRow>
+  </TableBody>
+</Table>
+```
+
+## Overflow scrolling
+
+Use this example to enable horizontal scrolling if the content inside the table overflows that maximum width.
+
+```svelte example
+<script>
+  import { Table, TableBody, TableBodyCell, TableBodyRow, TableHead, TableHeadCell, Checkbox } from 'flowbite-svelte';
+</script>
+
+<Table>
+  <TableHead>
+    <TableHeadCell class="!p-4">
+      <Checkbox />
+    </TableHeadCell>
+    <TableHeadCell>Product name</TableHeadCell>
+    <TableHeadCell>Color</TableHeadCell>
+    <TableHeadCell>Category</TableHeadCell>
+    <TableHeadCell>ACCESSORIES</TableHeadCell>
+    <TableHeadCell>AVAILABLE</TableHeadCell>
+    <TableHeadCell>Price</TableHeadCell>
+    <TableHeadCell>WEIGHT</TableHeadCell>
+    <TableHeadCell>ACTION</TableHeadCell>
+  </TableHead>
+  <TableBody class="divide-y">
+    <TableBodyRow>
+      <TableBodyCell class="!p-4">
+        <Checkbox />
+      </TableBodyCell>
+      <TableBodyCell>Apple MacBook Pro 17"</TableBodyCell>
+      <TableBodyCell>Sliver</TableBodyCell>
+      <TableBodyCell>Laptop</TableBodyCell>
+      <TableBodyCell>Yes</TableBodyCell>
+      <TableBodyCell>Yes</TableBodyCell>
+      <TableBodyCell>$2999</TableBodyCell>
+      <TableBodyCell>3.0 lb.</TableBodyCell>
+      <TableBodyCell>
+        <a href="/tables" class="font-medium text-primary-600 hover:underline dark:text-primary-500">Edit</a>
+        <a href="/tables" class="font-medium text-red-600 hover:underline dark:text-red-500">Remove</a>
+      </TableBodyCell>
+    </TableBodyRow>
+    <TableBodyRow>
+      <TableBodyCell class="!p-4">
+        <Checkbox />
+      </TableBodyCell>
+      <TableBodyCell>Microsoft Surface Pro</TableBodyCell>
+      <TableBodyCell>White</TableBodyCell>
+      <TableBodyCell>Laptop PC</TableBodyCell>
+      <TableBodyCell>No</TableBodyCell>
+      <TableBodyCell>Yes</TableBodyCell>
+      <TableBodyCell>$1999</TableBodyCell>
+      <TableBodyCell>1.0 lb.</TableBodyCell>
+      <TableBodyCell>
+        <a href="/tables" class="font-medium text-primary-600 hover:underline dark:text-primary-500">Edit</a>
+        <a href="/tables" class="font-medium text-red-600 hover:underline dark:text-red-500">Remove</a>
+      </TableBodyCell>
+    </TableBodyRow>
+    <TableBodyRow>
+      <TableBodyCell class="!p-4">
+        <Checkbox />
+      </TableBodyCell>
+      <TableBodyCell>Magic Mouse 2</TableBodyCell>
+      <TableBodyCell>Black</TableBodyCell>
+      <TableBodyCell>Accessories</TableBodyCell>
+      <TableBodyCell>Yes</TableBodyCell>
+      <TableBodyCell>No</TableBodyCell>
+      <TableBodyCell>$99</TableBodyCell>
+      <TableBodyCell>0.2 lb.</TableBodyCell>
+      <TableBodyCell>
+        <a href="/tables" class="font-medium text-primary-600 hover:underline dark:text-primary-500">Edit</a>
+        <a href="/tables" class="font-medium text-red-600 hover:underline dark:text-red-500">Remove</a>
+      </TableBodyCell>
+    </TableBodyRow>
+  </TableBody>
+</Table>
+```
+
+## 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 example
+<script>
+  import { Table, TableBody, TableBodyCell, TableBodyRow, TableHead, TableHeadCell } from 'flowbite-svelte';
+</script>
+
+<Table color="blue" hoverable={true}>
+  <TableHead>
+    <TableHeadCell>Product name</TableHeadCell>
+    <TableHeadCell>Color</TableHeadCell>
+    <TableHeadCell>Category</TableHeadCell>
+    <TableHeadCell>Price</TableHeadCell>
+  </TableHead>
+  <TableBody class="divide-y">
+    <TableBodyRow>
+      <TableBodyCell>Apple MacBook Pro 17"</TableBodyCell>
+      <TableBodyCell>Sliver</TableBodyCell>
+      <TableBodyCell>Laptop</TableBodyCell>
+      <TableBodyCell>$2999</TableBodyCell>
+    </TableBodyRow>
+    <TableBodyRow>
+      <TableBodyCell>Microsoft Surface Pro</TableBodyCell>
+      <TableBodyCell>White</TableBodyCell>
+      <TableBodyCell>Laptop PC</TableBodyCell>
+      <TableBodyCell>$1999</TableBodyCell>
+    </TableBodyRow>
+    <TableBodyRow>
+      <TableBodyCell>Magic Mouse 2</TableBodyCell>
+      <TableBodyCell>Black</TableBodyCell>
+      <TableBodyCell>Accessories</TableBodyCell>
+      <TableBodyCell>$99</TableBodyCell>
+    </TableBodyRow>
+  </TableBody>
+</Table>
+```
+
+```svelte example
+<script>
+  import { Table, TableBody, TableBodyCell, TableBodyRow, TableHead, TableHeadCell, TableSearch } from 'flowbite-svelte';
+  let searchTerm = '';
+  let items = [
+    { id: 1, maker: 'Toyota', type: 'ABC', make: 2017 },
+    { id: 2, maker: 'Ford', type: 'CDE', make: 2018 },
+    { id: 3, maker: 'Volvo', type: 'FGH', make: 2019 },
+    { id: 4, maker: 'Saab', type: 'IJK', make: 2020 }
+  ];
+  $: filteredItems = items.filter((item) => item.maker.toLowerCase().indexOf(searchTerm.toLowerCase()) !== -1);
+</script>
+
+<TableSearch color="red" placeholder="Search by maker name" hoverable={true} bind:inputValue={searchTerm}>
+  <TableHead>
+    <TableHeadCell>ID</TableHeadCell>
+    <TableHeadCell>Maker</TableHeadCell>
+    <TableHeadCell>Type</TableHeadCell>
+    <TableHeadCell>Make</TableHeadCell>
+  </TableHead>
+  <TableBody class="divide-y">
+    {#each filteredItems as item}
+      <TableBodyRow>
+        <TableBodyCell>{item.id}</TableBodyCell>
+        <TableBodyCell>{item.maker}</TableBodyCell>
+        <TableBodyCell>{item.type}</TableBodyCell>
+        <TableBodyCell>{item.make}</TableBodyCell>
+      </TableBodyRow>
+    {/each}
+  </TableBody>
+</TableSearch>
+```
+
+```svelte example
+<script>
+  import { Table, TableBody, TableBodyCell, TableBodyRow, TableHead, TableHeadCell } from 'flowbite-svelte';
+</script>
+
+<Table color="green" hoverable={true}>
+  <TableHead>
+    <TableHeadCell>Product name</TableHeadCell>
+    <TableHeadCell>Color</TableHeadCell>
+    <TableHeadCell>Category</TableHeadCell>
+    <TableHeadCell>Price</TableHeadCell>
+  </TableHead>
+  <TableBody class="divide-y">
+    <TableBodyRow>
+      <TableBodyCell>Apple MacBook Pro 17"</TableBodyCell>
+      <TableBodyCell>Sliver</TableBodyCell>
+      <TableBodyCell>Laptop</TableBodyCell>
+      <TableBodyCell>$2999</TableBodyCell>
+    </TableBodyRow>
+    <TableBodyRow>
+      <TableBodyCell>Microsoft Surface Pro</TableBodyCell>
+      <TableBodyCell>White</TableBodyCell>
+      <TableBodyCell>Laptop PC</TableBodyCell>
+      <TableBodyCell>$1999</TableBodyCell>
+    </TableBodyRow>
+    <TableBodyRow>
+      <TableBodyCell>Magic Mouse 2</TableBodyCell>
+      <TableBodyCell>Black</TableBodyCell>
+      <TableBodyCell>Accessories</TableBodyCell>
+      <TableBodyCell>$99</TableBodyCell>
+    </TableBodyRow>
+  </TableBody>
+</Table>
+```
+
+## Striped rows color
+
+Use this example to apply a different color to every second row inside the table.
+
+```svelte example
+<script>
+  import { Table, TableBody, TableBodyCell, TableBodyRow, TableHead, TableHeadCell } from 'flowbite-svelte';
+</script>
+
+<Table striped={true} color="purple">
+  <TableHead>
+    <TableHeadCell>Product name</TableHeadCell>
+    <TableHeadCell>Color</TableHeadCell>
+    <TableHeadCell>Category</TableHeadCell>
+    <TableHeadCell>Price</TableHeadCell>
+    <TableHeadCell>
+      <span class="sr-only">Edit</span>
+    </TableHeadCell>
+  </TableHead>
+  <TableBody class="divide-y">
+    <TableBodyRow>
+      <TableBodyCell>Apple MacBook Pro 17"</TableBodyCell>
+      <TableBodyCell>Sliver</TableBodyCell>
+      <TableBodyCell>Laptop</TableBodyCell>
+      <TableBodyCell>$2999</TableBodyCell>
+      <TableBodyCell>
+        <a href="/tables" class="font-medium text-primary-600 hover:underline dark:text-primary-500">Edit</a>
+      </TableBodyCell>
+    </TableBodyRow>
+    <TableBodyRow>
+      <TableBodyCell>Microsoft Surface Pro</TableBodyCell>
+      <TableBodyCell>White</TableBodyCell>
+      <TableBodyCell>Laptop PC</TableBodyCell>
+      <TableBodyCell>$1999</TableBodyCell>
+      <TableBodyCell>
+        <a href="/tables" class="font-medium text-primary-600 hover:underline dark:text-primary-500">Edit</a>
+      </TableBodyCell>
+    </TableBodyRow>
+    <TableBodyRow>
+      <TableBodyCell>Magic Mouse 2</TableBodyCell>
+      <TableBodyCell>Black</TableBodyCell>
+      <TableBodyCell>Accessories</TableBodyCell>
+      <TableBodyCell>$99</TableBodyCell>
+      <TableBodyCell>
+        <a href="/tables" class="font-medium text-primary-600 hover:underline dark:text-primary-500">Edit</a>
+      </TableBodyCell>
+    </TableBodyRow>
+    <TableBodyRow>
+      <TableBodyCell>Google Pixel Phone</TableBodyCell>
+      <TableBodyCell>Gray</TableBodyCell>
+      <TableBodyCell>Phone</TableBodyCell>
+      <TableBodyCell>$799</TableBodyCell>
+      <TableBodyCell>
+        <a href="/tables" class="font-medium text-primary-600 hover:underline dark:text-primary-500">Edit</a>
+      </TableBodyCell>
+    </TableBodyRow>
+    <TableBodyRow>
+      <TableBodyCell>Apple Watch 5</TableBodyCell>
+      <TableBodyCell>Red</TableBodyCell>
+      <TableBodyCell>Wearables</TableBodyCell>
+      <TableBodyCell>$999</TableBodyCell>
+      <TableBodyCell>
+        <a href="/tables" class="font-medium text-primary-600 hover:underline dark:text-primary-500">Edit</a>
+      </TableBodyCell>
+    </TableBodyRow>
+  </TableBody>
+</Table>
+```
+
+## Component data
+
+The component has the following props, type, and default values. See [types page](/docs/pages/typescript) for type information.
+
+### Table styling
+
+- Use the `class` prop to overwrite the `table` tag class.
+
+### TableBodyCell styling
+
+- Use the `class` prop to overwrite `tdClass`.
+
+### TableBodyRow styling
+
+- Use the `class` prop to overwrite the `tr` tag class.
+
+### TableHead styling
+
+- Use the `class` prop to overwrite the `thead` tag class.
+
+### TableHeadCell styling
+
+- Use the `class` prop to overwrite the `th` tag class.
+
+### TableSearch styling
+
+- Use the `class` prop to overwrite the `table` tag class.
+- Use the `classInput` prop to overwrite `inputClass`.
+- Use the `classSvgDiv` prop to overwrite `svgDivClass`.
+
+<CompoAttributesViewer {components}/>
+
+## References
+
+- [Flowbite Tables](https://flowbite.com/docs/components/tables/)