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 20 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 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 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` - **Location**: `/src/lib/components/tables/table-12.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte
{#each table.getHeaderGroups() as headerGroup (headerGroup.id)} {#each headerGroup.headers as header (header.id)} {#if !header.isPlaceholder} {/if} {/each} {/each} {#each table.getRowModel().rows as row (row.id)} {#each row.getVisibleCells() as cell (cell.id)} {/each} {:else} No results. {/each} Total {new Intl.NumberFormat('en-US', { currency: 'USD', style: 'currency' }).format(data.reduce((total, item) => total + item.balance, 0))}

Basic data table made with TanStack Table

``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/tables/table-12.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` - **Location**: `/src/lib/components/tables/table-13.svelte` - **Type**: UI Component ### Usage ```svelte ### Dependencies Required packages and components: - [`lucide-svelte`](https://github.com/lucide-icons/lucide) Full component implementation: ```svelte
{@render Filter({ column: table.getColumn('keyword')! })}
{@render Filter({ column: table.getColumn('intents')! })}
{@render Filter({ column: table.getColumn('volume')! })}
{@render Filter({ column: table.getColumn('cpc')! })}
{@render Filter({ column: table.getColumn('traffic')! })}
{#each table.getHeaderGroups() as headerGroup (headerGroup.id)} {#each headerGroup.headers as header (header.id)} {#if !header.isPlaceholder && header.column.getCanSort()}
{ // Enhanced keyboard handling for sorting if (header.column.getCanSort() && (e.key === 'Enter' || e.key === ' ')) { e.preventDefault(); header.column.getToggleSortingHandler()?.(e); } }} tabindex={header.column.getCanSort() ? 0 : undefined} > {#if header.column.getIsSorted() === 'asc'}
{:else if !header.isPlaceholder && !header.column.getCanSort()} {/if} {/each} {/each} {#each table.getRowModel().rows as row (row.id)} {#each row.getVisibleCells() as cell (cell.id)} {/each} {:else} No results. {/each}

Data table with filters made with TanStack Table

{#snippet Filter({ column }: { column: Column })} {@const columnHeader = typeof column.columnDef.header === 'string' ? column.columnDef.header : ''} {@const columnFilterValue = column.getFilterValue()} {@const filterVariant = column.columnDef.meta?.filterVariant ?? ''} {@const sortedUniqueValues = getSortedUniqueValues(column, filterVariant)} {#if filterVariant === 'range'}
column.setFilterValue((old: [number, number]) => [ e.currentTarget.value ? Number(e.currentTarget.value) : undefined, old?.[1] ])} placeholder="Min" type="number" aria-label="{columnHeader} min" /> column.setFilterValue((old: [number, number]) => [ old?.[0], e.currentTarget.value ? Number(e.currentTarget.value) : undefined ])} placeholder="Max" type="number" aria-label="{columnHeader} max" />
{:else if filterVariant === 'select'}
{:else}
column.setFilterValue(e.currentTarget.value)} placeholder={`Search ${columnHeader.toLowerCase()}`} type="text" />
{/if} {/snippet} ``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/tables/table-13.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` - **Location**: `/src/lib/components/tables/table-14.svelte` - **Type**: UI Component ### Usage ```svelte ### Dependencies Required packages and components: - [`lucide-svelte`](https://github.com/lucide-icons/lucide) Full component implementation: ```svelte
{#each table.getHeaderGroups() as headerGroup (headerGroup.id)} {#each headerGroup.headers as header (header.id)} {#if !header.isPlaceholder}
{ // Enhanced keyboard handling for sorting if (header.column.getCanSort() && (e.key === 'Enter' || e.key === ' ')) { e.preventDefault(); header.column.getToggleSortingHandler()?.(e); } }} tabindex={header.column.getCanSort() ? 0 : undefined} > {#if header.column.getIsSorted() === 'asc'}
{/if} {#if header.column.getCanResize()}
header.column.resetSize()} onmousedown={header.getResizeHandler()} ontouchstart={header.getResizeHandler()} /> {/if} {/each} {/each} {#each table.getRowModel().rows as row (row.id)} {#each row.getVisibleCells() as cell (cell.id)} {/each} {:else} No results. {/each}

Resizable and sortable columns made with TanStack Table

``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/tables/table-14.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` - **Location**: `/src/lib/components/tables/table-15.svelte` - **Type**: UI Component ### Usage ```svelte ### Dependencies Required packages and components: - [`lucide-svelte`](https://github.com/lucide-icons/lucide) Full component implementation: ```svelte
{#each table.getHeaderGroups() as headerGroup (headerGroup.id)} {#each headerGroup.headers as header (header.id)} {@const isPinned = header.column.getIsPinned()} {@const isLastLeftPinned = isPinned === 'left' && header.column.getIsLastColumn('left')} {@const isFirstRightPinned = isPinned === 'right' && header.column.getIsFirstColumn('right')}
{#if !header.isPlaceholder} {/if} {#if !header.isPlaceholder && header.column.getCanPin() && header.column.getIsPinned()} {:else} {#snippet child({ props })} {/snippet} header.column.pin('left')}> header.column.pin('right')}> {/if} {#if header.column.getCanResize()}
header.column.resetSize()} onmousedown={header.getResizeHandler()} ontouchstart={header.getResizeHandler()} /> {/if}
{/each} {/each} {#each table.getRowModel().rows as row (row.id)} {#each row.getVisibleCells() as cell (cell.id)} {@const isPinned = cell.column.getIsPinned()} {@const isLastLeftPinned = isPinned === 'left' && cell.column.getIsLastColumn('left')} {@const isFirstRightPinned = isPinned === 'right' && cell.column.getIsFirstColumn('right')} {/each} {:else} No results. {/each}

Pinnable columns made with TanStack Table

``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/tables/table-15.svelte) ## table-16 > A type-safe, accessible table-16 component for building modern UIs. This component is part of the tables collection. ### Core Information - **Component ID**: `table-16` - **Location**: `/src/lib/components/tables/table-16.svelte` - **Type**: UI Component ### Usage ```svelte ### Dependencies Required packages and components: - [`@dnd-kit-svelte/core`](https://github.com/HanielU/dnd-kit-svelte) - [`@dnd-kit-svelte/modifiers`](https://github.com/HanielU/dnd-kit-svelte) - [`@dnd-kit-svelte/sortable`](https://github.com/HanielU/dnd-kit-svelte) - [`@dnd-kit-svelte/utilities`](https://github.com/HanielU/dnd-kit-svelte) - [`lucide-svelte`](https://github.com/lucide-icons/lucide) Full component implementation: ```svelte {#each table.getHeaderGroups() as headerGroup (headerGroup.id)} {#each headerGroup.headers as header (header.id)} {@render DraggableTableHeader(header)} {/each} {/each} {#each table.getRowModel().rows as row (row.id)} {#each row.getVisibleCells() as cell (cell.id)} {@render DragAlongCell(cell)} {/each} {:else} No results. {/each}

Draggable columns made with TanStack Table and dnd kit

{#snippet DraggableTableHeader(header: Header)} {@const { attributes, isDragging, listeners, setNodeRef, transform, transition } = useSortable({ id: header.column.id })} {@const style = `opacity: ${isDragging.current ? 0.8 : 1}; position: relative; transform: ${CSS.Translate.toString(transform.current)}; transition: ${transition.current ?? 'initial'}; whiteSpace: nowrap; width: ${header.column.getSize()}px; z-index: ${isDragging.current ? 1 : 0}`}
{#if !header.isPlaceholder} {/if}
{/snippet} {#snippet DragAlongCell(cell: Cell)} {@const { isDragging, setNodeRef, transform, transition } = useSortable({ id: cell.column.id })} {@const style = `opacity: ${isDragging.current ? 0.8 : 1}; position: relative; transform: ${CSS.Translate.toString(transform.current)}; transition: ${transition.current ?? 'initial'}; width: ${cell.column.getSize()}px; z-index: ${isDragging.current ? 1 : 0}`} {/snippet} ``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/tables/table-16.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` - **Location**: `/src/lib/components/tables/table-17.svelte` - **Type**: UI Component ### Usage ```svelte ### Dependencies Required packages and components: - [`lucide-svelte`](https://github.com/lucide-icons/lucide) Full component implementation: ```svelte
{#each table.getHeaderGroups() as headerGroup (headerGroup.id)} {#each headerGroup.headers as header (header.id)} {#if !header.isPlaceholder} {/if} {/each} {/each} {#each table.getRowModel().rows as row (row.id)} {#each row.getVisibleCells() as cell (cell.id)} {/each} {#if row.getIsExpanded()}

{row.original.note}

 {/if} {:else} No results. {/each}

Expanding sub-row made with TanStack Table

``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/tables/table-17.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` - **Location**: `/src/lib/components/tables/table-18.svelte` - **Type**: UI Component ### Usage ```svelte ### Dependencies Required packages and components: - [`lucide-svelte`](https://github.com/lucide-icons/lucide) Full component implementation: ```svelte
{#each table.getHeaderGroups() as headerGroup (headerGroup.id)} {#each headerGroup.headers as header (header.id)} {#if !header.isPlaceholder && header.column.getCanSort()}
{ // Enhanced keyboard handling for sorting if (header.column.getCanSort() && (e.key === 'Enter' || e.key === ' ')) { e.preventDefault(); header.column.getToggleSortingHandler()?.(e); } }} tabIndex={header.column.getCanSort() ? 0 : undefined} > {#if header.column.getIsSorted() === 'asc'}
{:else if !header.isPlaceholder && !header.column.getCanSort()} {/if} {/each} {/each} {#each table.getRowModel().rows as row (row.id)} {#each row.getVisibleCells() as cell (cell.id)} {/each} {:else} No results. {/each}

{table.getState().pagination.pageIndex * table.getState().pagination.pageSize + 1} - {Math.min( Math.max( table.getState().pagination.pageIndex * table.getState().pagination.pageSize + table.getState().pagination.pageSize, 0 ), table.getRowCount() )} of {table.getRowCount().toString()}

Paginated table made with TanStack Table

``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/tables/table-18.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` - **Location**: `/src/lib/components/tables/table-19.svelte` - **Type**: UI Component ### Usage ```svelte ### Dependencies Required packages and components: - [`lucide-svelte`](https://github.com/lucide-icons/lucide) Full component implementation: ```svelte
{#each table.getHeaderGroups() as headerGroup (headerGroup.id)} {#each headerGroup.headers as header (header.id)} {#if !header.isPlaceholder && header.column.getCanSort()}
{ // Enhanced keyboard handling for sorting if (header.column.getCanSort() && (e.key === 'Enter' || e.key === ' ')) { e.preventDefault(); header.column.getToggleSortingHandler()?.(e); } }} tabIndex={header.column.getCanSort() ? 0 : undefined} > {#if header.column.getIsSorted() === 'asc'}
{:else if !header.isPlaceholder && !header.column.getCanSort()} {/if} {/each} {/each} {#each table.getRowModel().rows as row (row.id)} {#each row.getVisibleCells() as cell (cell.id)} {/each} {:else} No results. {/each}

Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount()}

{#if paginated.showLeftEllipsis} {/if} {#each paginated.pages as page (page)} {@const isActive = page === table.getState().pagination.pageIndex + 1} {:else}

empty

{/each} {#if paginated.showRightEllipsis} {/if}

Numeric pagination made with TanStack Table

``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/tables/table-19.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` - **Location**: `/src/lib/components/tables/table-20.svelte` - **Type**: UI Component ### Usage ```svelte ### Dependencies Required packages and components: - [`lucide-svelte`](https://github.com/lucide-icons/lucide) Full component implementation: ```svelte
table.getColumn('name')?.setFilterValue(e.currentTarget.value)} placeholder="Filter by name or email..." type="text" aria-label="Filter by name or email" />
{#if Boolean(table.getColumn('name')?.getFilterValue())} {/if}
{#snippet child({ props })} {/snippet}
Filters
{#each uniqueStatusValues as value (value)}
handleStatusChange(checked, value)} />
{/each}
{#snippet child({ props })} {/snippet} Toggle columns {#each table .getAllColumns() .filter((column) => column.getCanHide()) as column (column.id)} column.toggleVisibility(!!value)} > {column.id} {/each}
{#if table.getSelectedRowModel().rows.length > 0} {#snippet child({ props })} {/snippet}
Are you absolutely sure? This action cannot be undone. This will permanently delete {table.getSelectedRowModel().rows.length} selected {table.getSelectedRowModel().rows.length === 1 ? 'row' : 'rows'}.
Cancel Delete {/if}
{#each table.getHeaderGroups() as headerGroup (headerGroup.id)} {#each headerGroup.headers as header (header.id)} {#if !header.isPlaceholder && header.column.getCanSort()}
{ if (header.column.getCanSort() && (e.key === 'Enter' || e.key === ' ')) { e.preventDefault(); header.column.getToggleSortingHandler()?.(e); } }} tabindex={header.column.getCanSort() ? 0 : undefined} > {#if header.column.getIsSorted() === 'asc'}
{:else if !header.isPlaceholder && !header.column.getCanSort()} {/if} {/each} {/each} {#if table.getRowModel().rows?.length} {#each table.getRowModel().rows as row (row.id)} {#each row.getVisibleCells() as cell (cell.id)} {/each} {:else} No results. {/each} {/if}

{table.getState().pagination.pageIndex * table.getState().pagination.pageSize + 1}-{Math.min( Math.max( table.getState().pagination.pageIndex * table.getState().pagination.pageSize + table.getState().pagination.pageSize, 0 ), table.getRowCount() )} of {table.getRowCount().toString()}

Example of a more complex table made with TanStack Table

{#snippet RowActions()} {#snippet child({ props })}
{/snippet} Edit ⌘E Duplicate ⌘D Archive ⌘A More Move to project Move to folder Advanced options Share ⌘S Add to favorites ⌘F Delete ⌘⌫ {/snippet} ``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/tables/table-20.svelte)