This is the llms.txt documentation for the "tables" directory of the Origin UI - Svelte project. # "tables" directory > A collection of production-ready, accessible UI components built with Svelte 5 and Tailwind CSS. These components are designed to be drop-in solutions for rapidly building modern web applications. This documentation covers 19 components, each following best practices for accessibility, performance, and type safety. ## Components ## table-01 > A type-safe, accessible table-01 component for building modern UIs. This component is part of the tables collection. ### Core Information - **Component ID**: `table-01` - **Location**: `/src/lib/components/tables/table-01.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte
Name Email Location Status Balance {#each items as item (item.id)} {item.name} {item.email} {item.location} {item.status} {item.balance} {/each} Total $2,500.00

Basic table

``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/tables/table-01.svelte) ## table-02 > A type-safe, accessible table-02 component for building modern UIs. This component is part of the tables collection. ### Core Information - **Component ID**: `table-02` - **Location**: `/src/lib/components/tables/table-02.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte
Name Email Location Status Balance {#each items as item (item.id)}
{item.name}
{item.name}
{item.username}
{item.email} {item.location} {item.status} {item.balance} {/each}

Table with images

``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/tables/table-02.svelte) ## table-03 > A type-safe, accessible table-03 component for building modern UIs. This component is part of the tables collection. ### Core Information - **Component ID**: `table-03` - **Location**: `/src/lib/components/tables/table-03.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte
Name Email Location Status Balance {#each items as item (item.id)} {item.name} {item.email} {item.location} {item.status} {item.balance} {/each} Total $2,500.00

Table without horizontal dividers

``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/tables/table-03.svelte) ## table-04 > A type-safe, accessible table-04 component for building modern UIs. This component is part of the tables collection. ### Core Information - **Component ID**: `table-04` - **Location**: `/src/lib/components/tables/table-04.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte
Name Email Location Status Balance {#each items as item (item.id)} {item.name} {item.email} {item.location} {item.status} {item.balance} {/each} Total $2,500.00

Striped table

``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/tables/table-04.svelte) ## table-05 > A type-safe, accessible table-05 component for building modern UIs. This component is part of the tables collection. ### Core Information - **Component ID**: `table-05` - **Location**: `/src/lib/components/tables/table-05.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte
Name Email Location Status Balance {#each items as item (item.id)} {item.name} {item.email} {item.location} {item.status} {item.balance} {/each}

Table with vertical lines

``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/tables/table-05.svelte) ## table-06 > A type-safe, accessible table-06 component for building modern UIs. This component is part of the tables collection. ### Core Information - **Component ID**: `table-06` - **Location**: `/src/lib/components/tables/table-06.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte
Name Release Year Developer Typing Paradigm Extension Latest Version Popularity {#each programmingLanguages as language (language.id)} {language.name} {language.releaseYear} {language.developer} {language.typing} {language.paradigm} {language.extension} {language.latestVersion} {language.popularity} {/each}

Dense table

``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/tables/table-06.svelte) ## table-07 > A type-safe, accessible table-07 component for building modern UIs. This component is part of the tables collection. ### Core Information - **Component ID**: `table-07` - **Location**: `/src/lib/components/tables/table-07.svelte` - **Type**: UI Component ### Usage ```svelte ### Dependencies Required packages and components: - [`bits-ui`](https://github.com/huntabyte/bits-ui) Full component implementation: ```svelte
Name Email Location Status Balance {#each items as item (item.id)} {item.name} {item.email} {item.location} {item.status} {item.balance} {/each} Total $2,500.00

Table with row selection

``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/tables/table-07.svelte) ## table-08 > A type-safe, accessible table-08 component for building modern UIs. This component is part of the tables collection. ### Core Information - **Component ID**: `table-08` - **Location**: `/src/lib/components/tables/table-08.svelte` - **Type**: UI Component ### Usage ```svelte ### Dependencies Required packages and components: - [`bits-ui`](https://github.com/huntabyte/bits-ui) Full component implementation: ```svelte
Name Email Location Status Balance {#each items as item (item.id)} {item.name} {item.email} {item.location} {item.status} {item.balance} {/each} Total $2,500.00

Card Table

``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/tables/table-08.svelte) ## table-09 > A type-safe, accessible table-09 component for building modern UIs. This component is part of the tables collection. ### Core Information - **Component ID**: `table-09` - **Location**: `/src/lib/components/tables/table-09.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte
Name David Kim Email d.kim@company.com Location Seoul, KR Status Active Balance $1,000.00

Vertical table

``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/tables/table-09.svelte) ## table-10 > A type-safe, accessible table-10 component for building modern UIs. This component is part of the tables collection. ### Core Information - **Component ID**: `table-10` - **Location**: `/src/lib/components/tables/table-10.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte
Name Email Location Status Balance {#each items as item (item.id)} {item.name} {item.email} {item.location} {item.status} {item.balance} {/each} Total $2,500.00

Table with sticky header

``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/tables/table-10.svelte) ## table-11 > A type-safe, accessible table-11 component for building modern UIs. This component is part of the tables collection. ### Core Information - **Component ID**: `table-11` - **Location**: `/src/lib/components/tables/table-11.svelte` - **Type**: UI Component ### Usage ```svelte ### Dependencies Required packages and components: - [`lucide-svelte`](https://github.com/lucide-icons/lucide) Full component implementation: ```svelte {#each items[0].desktop as browser (browser.name)} {browser.name} {/each} {#each items[0].mobile as browser (browser.name)} {browser.name} {/each} {#each items as item (item.feature)} {item.feature} {#each [...item.desktop, ...item.mobile] as browser, index (`${browser.name}-${index}`)} {#if browser.supported} {/each} {/each}
``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/tables/table-11.svelte) ## table-12 > A type-safe, accessible table-12 component for building modern UIs. This component is part of the tables collection. ### Core Information - **Component ID**: `table-12.todo` - **Location**: `/src/lib/components/tables/table-12.todo.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte ``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/tables/table-12.todo.svelte) ## table-13 > A type-safe, accessible table-13 component for building modern UIs. This component is part of the tables collection. ### Core Information - **Component ID**: `table-13.todo` - **Location**: `/src/lib/components/tables/table-13.todo.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte ``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/tables/table-13.todo.svelte) ## table-14 > A type-safe, accessible table-14 component for building modern UIs. This component is part of the tables collection. ### Core Information - **Component ID**: `table-14.todo` - **Location**: `/src/lib/components/tables/table-14.todo.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte ``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/tables/table-14.todo.svelte) ## table-15 > A type-safe, accessible table-15 component for building modern UIs. This component is part of the tables collection. ### Core Information - **Component ID**: `table-15.todo` - **Location**: `/src/lib/components/tables/table-15.todo.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte ``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/tables/table-15.todo.svelte) ## table-17 > A type-safe, accessible table-17 component for building modern UIs. This component is part of the tables collection. ### Core Information - **Component ID**: `table-17.todo` - **Location**: `/src/lib/components/tables/table-17.todo.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte ``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/tables/table-17.todo.svelte) ## table-18 > A type-safe, accessible table-18 component for building modern UIs. This component is part of the tables collection. ### Core Information - **Component ID**: `table-18.todo` - **Location**: `/src/lib/components/tables/table-18.todo.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte ``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/tables/table-18.todo.svelte) ## table-19 > A type-safe, accessible table-19 component for building modern UIs. This component is part of the tables collection. ### Core Information - **Component ID**: `table-19.todo` - **Location**: `/src/lib/components/tables/table-19.todo.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte ``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/tables/table-19.todo.svelte) ## table-20 > A type-safe, accessible table-20 component for building modern UIs. This component is part of the tables collection. ### Core Information - **Component ID**: `table-20.todo` - **Location**: `/src/lib/components/tables/table-20.todo.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte ``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/tables/table-20.todo.svelte)