svelte icon Svelte 5 UI lib
  • Coverage
  • About
  • Repo

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

NameColorTypePrice
Apple MacBook Pro 17"SliverLaptop$2999
Microsoft Surface ProWhiteLaptop PC$1999
Magic Mouse 2BlackAccessories$99
Google Pixel PhoneGrayPhone$799
Apple Watch 5RedWearables$999
<Table {tableItems}
   noborder
 />

Table items

NameColorTypePrice
Apple MacBook Pro 17"SliverLaptop$2999
Microsoft Surface ProWhiteLaptop PC$1999
Magic Mouse 2BlackAccessories$99
Google Pixel PhoneGrayPhone$799
Apple Watch 5RedWearables$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

NameColorTypePrice
Apple MacBook Pro 17"SliverLaptop$2999
Microsoft Surface ProWhiteLaptop PC$1999
Magic Mouse 2BlackAccessories$99
Google Pixel PhoneGrayPhone$799
Apple Watch 5RedWearables$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="text-primary-600 dark:text-primary-500 font-medium hover:underline"
					>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="text-primary-600 dark:text-primary-500 font-medium hover:underline"
					>Edit</a
				>
			</TableBodyCell>
		</TableBodyRow>
		<TableBodyRow>
			<TableBodyCell>Magic Mouse 2</TableBodyCell>
			<TableBodyCell>Black</TableBodyCell>
			<TableBodyCell>Accessories</TableBodyCell>
			<TableBodyCell>$99</TableBodyCell>
			<TableBodyCell>
				<a href="/tables" class="text-primary-600 dark:text-primary-500 font-medium hover:underline"
					>Edit</a
				>
			</TableBodyCell>
		</TableBodyRow>
		<TableBodyRow>
			<TableBodyCell>Google Pixel Phone</TableBodyCell>
			<TableBodyCell>Gray</TableBodyCell>
			<TableBodyCell>Phone</TableBodyCell>
			<TableBodyCell>$799</TableBodyCell>
			<TableBodyCell>
				<a href="/tables" class="text-primary-600 dark:text-primary-500 font-medium hover:underline"
					>Edit</a
				>
			</TableBodyCell>
		</TableBodyRow>
		<TableBodyRow>
			<TableBodyCell>Apple Watch 5</TableBodyCell>
			<TableBodyCell>Red</TableBodyCell>
			<TableBodyCell>Wearables</TableBodyCell>
			<TableBodyCell>$999</TableBodyCell>
			<TableBodyCell>
				<a href="/tables" class="text-primary-600 dark:text-primary-500 font-medium hover:underline"
					>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="text-primary-600 dark:text-primary-500 font-medium hover:underline">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="text-primary-600 dark:text-primary-500 font-medium hover:underline">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="text-primary-600 dark:text-primary-500 font-medium hover:underline">Edit</a
				>
			</TableBodyCell>
		</TableBodyRow>
	</TableBody>
</Table>

Search

IDMakerTypeMake
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

ProductInfo
BrandNameColorTypePrice
AppleMacBook Pro 17"SliverLaptop$2999
MicrosoftSurface ProWhiteLaptop PC$1999
AppleMagic Mouse 2BlackAccessories$99
Google Pixel PhoneGrayPhone$799
AppleWatch 5RedWearables$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

NameQtyPrice
Apple MacBook Pro 17"1$2999
Microsoft Surface Pro1$1999
Magic Mouse 21$99
Total3$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.
BrandNameColorTypePrice
AppleMacBook Pro 17"SliverLaptop$2999
MicrosoftSurface ProWhiteLaptop PC$1999
AppleMagic Mouse 2BlackAccessories$99
Google Pixel PhoneGrayPhone$799
AppleWatch 5RedWearables$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

NameColorCategoryAccessoriesAvailablePriceWeightQty
Apple MacBook Pro 17"SliverLaptopYesYes$29992.3kg1
Microsoft Surface ProWhiteLaptop PCNoYes$19991.8kg1
Magic Mouse 2BlackAccessoriesYesNo$990.6kg2
<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} />

Component data

codewithshin.com
  • Repo
  • About