📄 tanstack/table/latest/docs/framework/svelte/examples/column-groups
File: column-groups.md | Updated: 11/15/2025
Source: https://tanstack.com/table/latest/docs/framework/svelte/examples/column-groups
Search...
+ K
Auto
Docs Examples GitHub Contributors
Docs Examples GitHub Contributors
Docs Examples GitHub Contributors
Docs Examples Github Contributors
Docs Examples Github Contributors
Docs Examples Github Contributors
Docs Examples Github Contributors
Docs Examples Github Contributors
Maintainers Partners Support Learn StatsBETA Discord Merch Blog GitHub Ethos Brand Guide
Documentation
Framework
Svelte
Version
Latest
Search...
+ K
Menu
Getting Started
Core Guides
Feature Guides
Core APIs
Feature APIs
Enterprise
Examples
Framework
Svelte
Version
Latest
Menu
Getting Started
Core Guides
Feature Guides
Core APIs
Feature APIs
Enterprise
Examples
Svelte Example: Column Groups
===================================================================================================================================================================================================================================================================================================================================================================================================================================
Code ExplorerCode
Interactive SandboxSandbox
-
src
-
App.svelte -
index.css
-
main.ts
-
-
.gitignore
-
README.md
-
index.html
-
package.json
-
svelte.config.js
-
tsconfig.json
-
vite.config.js
svelte
<script lang="ts">
import { writable } from 'svelte/store'
import {
createSvelteTable,
flexRender,
getCoreRowModel,
} from '@tanstack/svelte-table'
import type { ColumnDef, TableOptions } from '@tanstack/svelte-table'
import './index.css'
type Person = {
firstName: string
lastName: string
age: number
visits: number
status: string
progress: number
}
const defaultData: Person[] = [\
{\
firstName: 'tanner',\
lastName: 'linsley',\
age: 24,\
visits: 100,\
status: 'In Relationship',\
progress: 50,\
},\
{\
firstName: 'tandy',\
lastName: 'miller',\
age: 40,\
visits: 40,\
status: 'Single',\
progress: 80,\
},\
{\
firstName: 'joe',\
lastName: 'dirte',\
age: 45,\
visits: 20,\
status: 'Complicated',\
progress: 10,\
},\
]
const defaultColumns: ColumnDef<Person>[] = [\
{\
header: 'Name',\
footer: props => props.column.id,\
columns: [\
{\
accessorKey: 'firstName',\
cell: info => info.getValue(),\
footer: props => props.column.id,\
},\
{\
accessorFn: row => row.lastName,\
id: 'lastName',\
cell: info => info.getValue(),\
header: () => 'Last Name',\
footer: props => props.column.id,\
},\
],\
},\
{\
header: 'Info',\
footer: props => props.column.id,\
columns: [\
{\
accessorKey: 'age',\
header: () => 'Age',\
footer: props => props.column.id,\
},\
{\
header: 'More Info',\
columns: [\
{\
accessorKey: 'visits',\
header: () => 'Visits',\
footer: props => props.column.id,\
},\
{\
accessorKey: 'status',\
header: 'Status',\
footer: props => props.column.id,\
},\
{\
accessorKey: 'progress',\
header: 'Profile Progress',\
footer: props => props.column.id,\
},\
],\
},\
],\
},\
]
const options = writable<TableOptions<Person>>({
data: defaultData,
columns: defaultColumns,
getCoreRowModel: getCoreRowModel(),
})
const rerender = () => {
options.update(options => ({
...options,
data: defaultData,
}))
}
const table = createSvelteTable(options)
</script>
<div class="p-2">
<table>
<thead>
{#each $table.getHeaderGroups() as headerGroup}
<tr>
{#each headerGroup.headers as header}
<th colSpan={header.colSpan}>
{#if !header.isPlaceholder}
<svelte:component
this={flexRender(
header.column.columnDef.header,
header.getContext()
)}
/>
{/if}
</th>
{/each}
</tr>
{/each}
</thead>
<tbody>
{#each $table.getRowModel().rows as row}
<tr>
{#each row.getVisibleCells() as cell}
<td>
<svelte:component
this={flexRender(cell.column.columnDef.cell, cell.getContext())}
/>
</td>
{/each}
</tr>
{/each}
</tbody>
<tfoot>
{#each $table.getFooterGroups() as footerGroup}
<tr>
{#each footerGroup.headers as header}
<th colSpan={header.colSpan}>
{#if !header.isPlaceholder}
<svelte:component
this={flexRender(
header.column.columnDef.footer,
header.getContext()
)}
/>
{/if}
</th>
{/each}
</tr>
{/each}
</tfoot>
</table>
<div class="h-4" />
<button on:click={() => rerender()} class="border p-2"> Rerender </button>
</div>
<script lang="ts">
import { writable } from 'svelte/store'
import {
createSvelteTable,
flexRender,
getCoreRowModel,
} from '@tanstack/svelte-table'
import type { ColumnDef, TableOptions } from '@tanstack/svelte-table'
import './index.css'
type Person = {
firstName: string
lastName: string
age: number
visits: number
status: string
progress: number
}
const defaultData: Person[] = [\
{\
firstName: 'tanner',\
lastName: 'linsley',\
age: 24,\
visits: 100,\
status: 'In Relationship',\
progress: 50,\
},\
{\
firstName: 'tandy',\
lastName: 'miller',\
age: 40,\
visits: 40,\
status: 'Single',\
progress: 80,\
},\
{\
firstName: 'joe',\
lastName: 'dirte',\
age: 45,\
visits: 20,\
status: 'Complicated',\
progress: 10,\
},\
]
const defaultColumns: ColumnDef<Person>[] = [\
{\
header: 'Name',\
footer: props => props.column.id,\
columns: [\
{\
accessorKey: 'firstName',\
cell: info => info.getValue(),\
footer: props => props.column.id,\
},\
{\
accessorFn: row => row.lastName,\
id: 'lastName',\
cell: info => info.getValue(),\
header: () => 'Last Name',\
footer: props => props.column.id,\
},\
],\
},\
{\
header: 'Info',\
footer: props => props.column.id,\
columns: [\
{\
accessorKey: 'age',\
header: () => 'Age',\
footer: props => props.column.id,\
},\
{\
header: 'More Info',\
columns: [\
{\
accessorKey: 'visits',\
header: () => 'Visits',\
footer: props => props.column.id,\
},\
{\
accessorKey: 'status',\
header: 'Status',\
footer: props => props.column.id,\
},\
{\
accessorKey: 'progress',\
header: 'Profile Progress',\
footer: props => props.column.id,\
},\
],\
},\
],\
},\
]
const options = writable<TableOptions<Person>>({
data: defaultData,
columns: defaultColumns,
getCoreRowModel: getCoreRowModel(),
})
const rerender = () => {
options.update(options => ({
...options,
data: defaultData,
}))
}
const table = createSvelteTable(options)
</script>
<div class="p-2">
<table>
<thead>
{#each $table.getHeaderGroups() as headerGroup}
<tr>
{#each headerGroup.headers as header}
<th colSpan={header.colSpan}>
{#if !header.isPlaceholder}
<svelte:component
this={flexRender(
header.column.columnDef.header,
header.getContext()
)}
/>
{/if}
</th>
{/each}
</tr>
{/each}
</thead>
<tbody>
{#each $table.getRowModel().rows as row}
<tr>
{#each row.getVisibleCells() as cell}
<td>
<svelte:component
this={flexRender(cell.column.columnDef.cell, cell.getContext())}
/>
</td>
{/each}
</tr>
{/each}
</tbody>
<tfoot>
{#each $table.getFooterGroups() as footerGroup}
<tr>
{#each footerGroup.headers as header}
<th colSpan={header.colSpan}>
{#if !header.isPlaceholder}
<svelte:component
this={flexRender(
header.column.columnDef.footer,
header.getContext()
)}
/>
{/if}
</th>
{/each}
</tr>
{/each}
</tfoot>
</table>
<div class="h-4" />
<button on:click={() => rerender()} class="border p-2"> Rerender </button>
</div>
