Table

Setup

<script>
  import { Table } from 'svelte-5-ui-lib';
  const tableItems = [
    { name: 'Apple MacBook Pro 17"', color: "Sliver", type: "Laptop", price: "$2999" },
    { name: "Microsoft Surface Pro", color: "White", type: "Laptop PC", price: "$1999" },
    { name: "Magic Mouse 2", color: "Black", type: "Accessories", price: "$99" },
    { name: "Google Pixel Phone", color: "Gray", type: "Phone", price: "$799" },
    { name: "Apple Watch 5", color: "Red", type: "Wearables", price: "$999" }
  ];
</script>

Interactive Table Builder

Name	Color	Type	Price
Apple MacBook Pro 17"	Sliver	Laptop	$2999
Microsoft Surface Pro	White	Laptop PC	$1999
Magic Mouse 2	Black	Accessories	$99
Google Pixel Phone	Gray	Phone	$799
Apple Watch 5	Red	Wearables	$999

<Table {tableItems}
   noborder
 />

Table items

Name	Color	Type	Price
Apple MacBook Pro 17"	Sliver	Laptop	$2999
Microsoft Surface Pro	White	Laptop PC	$1999
Magic Mouse 2	Black	Accessories	$99
Google Pixel Phone	Gray	Phone	$799
Apple Watch 5	Red	Wearables	$999

<script lang="ts">
  import { Table } from 'svelte-5-ui-lib';
  const tableItems = [
    { name: 'Apple MacBook Pro 17"', color: "Sliver", type: "Laptop", price: "$2999" },
    { name: "Microsoft Surface Pro", color: "White", type: "Laptop PC", price: "$1999" },
    { name: "Magic Mouse 2", color: "Black", type: "Accessories", price: "$99" },
    { name: "Google Pixel Phone", color: "Gray", type: "Phone", price: "$799" },
    { name: "Apple Watch 5", color: "Red", type: "Wearables", price: "$999" }
  ];
</script>

<Table {tableItems} hoverable />

Head body items

Name	Color	Type	Price
Apple MacBook Pro 17"	Sliver	Laptop	$2999
Microsoft Surface Pro	White	Laptop PC	$1999
Magic Mouse 2	Black	Accessories	$99
Google Pixel Phone	Gray	Phone	$799
Apple Watch 5	Red	Wearables	$999

<script lang="ts">
  import { Table, TableHead, TableBody } from 'svelte-5-ui-lib';
  const headItems = ["Name", "Color", "Type", "Price"];
  const bodyItems = [
    ['Apple MacBook Pro 17"', "Sliver", "Laptop", "$2999"],
    ["Microsoft Surface Pro", "White", "Laptop PC", "$1999"],
    ["Magic Mouse 2", "Black", "Accessories", "$99"],
    ["Google Pixel Phone", "Gray", "Phone", "$799"],
    ["Apple Watch 5", "Red", "Wearables", "$999"]
  ];
</script>

<Table hoverable>
  <TableHead {headItems} />
  <TableBody {bodyItems} />
</Table>

Cells

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

<script lang="ts">
  import { Table, TableHead, TableHeadCell, TableBody, TableBodyRow, TableBodyCell } from 'svelte-5-ui-lib';
</script>

<Table hoverable>
  <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>

Checkbox

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

<script lang="ts">
  import { Table, TableHead, TableHeadCell, TableBody, TableBodyRow, TableBodyCell, Checkbox } from 'svelte-5-ui-lib';
</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="/components/table" 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="/components/table" 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="/components/table" class="font-medium text-primary-600 hover:underline dark:text-primary-500">Edit</a>
      </TableBodyCell>
    </TableBodyRow>
  </TableBody>
</Table>

Search

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

<script lang="ts">
  import { TableSearch, TableHead, TableBody, TableBodyRow, TableBodyCell } from 'svelte-5-ui-lib';
  const headItems = ["ID", "Maker", "Type", "Make"];
  let searchTerm = $state("");
  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 }
  ];
  let filteredItems = $derived(items.filter((item) => item.maker.toLowerCase().indexOf(searchTerm.toLowerCase()) !== -1));
</script>

<TableSearch placeholder="Search by maker name" hoverable={true} bind:inputValue={searchTerm}>
  <TableHead {headItems} />
  <TableBody>
    {#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>

Header slot

Product		Info
Brand	Name	Color	Type	Price
Apple	MacBook Pro 17"	Sliver	Laptop	$2999
Microsoft	Surface Pro	White	Laptop PC	$1999
Apple	Magic Mouse 2	Black	Accessories	$99
Google	Pixel Phone	Gray	Phone	$799
Apple	Watch 5	Red	Wearables	$999

<script lang="ts">
  import { Table, TableHead, TableHeadCell, TableBody } from 'svelte-5-ui-lib';
  const headItems = ["Brand", "Name", "Color", "Type", "Price"];
  const bodyItems = [
    ["Apple", 'MacBook Pro 17"', "Sliver", "Laptop", "$2999"],
    ["Microsoft", "Surface Pro", "White", "Laptop PC", "$1999"],
    ["Apple", "Magic Mouse 2", "Black", "Accessories", "$99"],
    ["Google", " Pixel Phone", "Gray", "Phone", "$799"],
    ["Apple", "Watch 5", "Red", "Wearables", "$999"]
  ];
</script>

<Table>
  <TableHead {headItems} defaultRow={false}>
    {#snippet headerSlot()}
      <tr>
        <TableHeadCell colspan={2}>Product</TableHeadCell>
        <TableHeadCell colspan={3}>Info</TableHeadCell>
      </tr>
    {/snippet}
  </TableHead>
  <TableBody {bodyItems} />
</Table>

Footer slot

Name	Qty	Price
Apple MacBook Pro 17"	1	$2999
Microsoft Surface Pro	1	$1999
Magic Mouse 2	1	$99
Total	3	$5,097

<script lang="ts">
  import { Table } from 'svelte-5-ui-lib';
  const tableItems = [
    { name: 'Apple MacBook Pro 17"', qty: "1", price: "$2999" },
    { name: "Microsoft Surface Pro", qty: "1", price: "$1999" },
    { name: "Magic Mouse 2", qty: "1", price: "$99" }
  ];
</script>

<Table {tableItems} hoverable>
  {#snippet footerSlot()}
    <tfoot>
      <tr class="font-semibold text-gray-900 dark:text-white">
        <th scope="row" class="px-6 py-3 text-base">Total</th>
        <td class="px-6 py-3">3</td>
        <td class="px-6 py-3">$5,097</td>
      </tr>
    </tfoot>
  {/snippet}
</Table>

Table caption

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.
Brand	Name	Color	Type	Price
Apple	MacBook Pro 17"	Sliver	Laptop	$2999
Microsoft	Surface Pro	White	Laptop PC	$1999
Apple	Magic Mouse 2	Black	Accessories	$99
Google	Pixel Phone	Gray	Phone	$799
Apple	Watch 5	Red	Wearables	$999

<script lang="ts">
  import { Table, TableHead, TableBody } from 'svelte-5-ui-lib';
  const headItems = ["Brand", "Name", "Color", "Type", "Price"];
  const bodyItems = [
    ["Apple", 'MacBook Pro 17"', "Sliver", "Laptop", "$2999"],
    ["Microsoft", "Surface Pro", "White", "Laptop PC", "$1999"],
    ["Apple", "Magic Mouse 2", "Black", "Accessories", "$99"],
    ["Google", " Pixel Phone", "Gray", "Phone", "$799"],
    ["Apple", "Watch 5", "Red", "Wearables", "$999"]
  ];
</script>

<Table>
  {#snippet captionSlot()}
    <caption class="bg-white p-5 text-left text-lg font-semibold text-gray-900 dark:bg-gray-800 dark:text-white">
      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>
  {/snippet}
  <TableHead {headItems} />
  <TableBody {bodyItems} />
</Table>

Overflow

Name	Color	Category	Accessories	Available	Price	Weight	Qty
Apple MacBook Pro 17"	Sliver	Laptop	Yes	Yes	$2999	2.3kg	1
Microsoft Surface Pro	White	Laptop PC	No	Yes	$1999	1.8kg	1
Magic Mouse 2	Black	Accessories	Yes	No	$99	0.6kg	2

<script lang="ts">
  import { Table } from 'svelte-5-ui-lib';
  const tableItems = [
    { name: 'Apple MacBook Pro 17"', color: "Sliver", category: "Laptop", accessories: "Yes", available: "Yes", price: "$2999", weight: "2.3kg", qty: "1" },
    { name: "Microsoft Surface Pro", color: "White", category: "Laptop PC", accessories: "No", available: "Yes", price: "$1999", weight: "1.8kg", qty: "1" },
    { name: "Magic Mouse 2", color: "Black", category: "Accessories", accessories: "Yes", available: "No", price: "$99", weight: "0.6kg", qty: "2" }
  ];
</script>

<Table {tableItems} />

Table

Setup

Interactive Table Builder

Table items

Head body items

Cells

Checkbox

Search

Header slot

Footer slot

Table caption

Overflow

Component data