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
/>Examples
| 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 />