# Kitchen Sink > Every Svelte Headless Table plugin composed onto one table — sorting, filtering, pagination, grouping, expansion, selection, column resizing, sub-rows, hidden columns, and column reordering. **Source:** [https://table.svelte.page/examples/kitchen-sink](https://table.svelte.page/examples/kitchen-sink) **Markdown mirror:** [https://table.svelte.page/examples/kitchen-sink.md](https://table.svelte.page/examples/kitchen-sink.md) --- This mirror preserves the prose, implementation notes, and runnable Svelte source behind the live example page. ## FIG-001: every plugin. A single table wired through `createTable` with the full plugin stack composed at once — text + column filters, sortable headers, pagination, sub-rows, group-by, expansion, selection, column resizing, hidden columns, column ordering, and data export. **Metadata:** tag: `COMPOSE` | pattern: `plugin composition` ### Notes - Plugins compose declaratively on the second argument to `createTable` — each one returns a fresh instance, so order doesn't matter for setup, only for which derived state wraps which. - Header + body rows are produced by separate methods on the view model so you can inject merge, group, and resize behaviour without rewriting the render loop. - Filter renderers (`TextFilter`, `NumberRangeFilter`, `SelectFilter`) are ordinary Svelte components passed through `createRender` — bring your own UI library. ### Source #### Default.svelte Source file: [src/lib/examples/kitchen-sink/demos/Default.svelte](https://github.com/humanspeak/svelte-headless-table/blob/main/docs/src/lib/examples/kitchen-sink/demos/Default.svelte) ```svelte

{#each $headerRows as headerRow (headerRow.id)} {#each headerRow.cells as cell (cell.id)} {/each} {/each} {#each $pageRows as row (row.id)} {#each row.cells as cell (cell.id)} {/each} {/each}

{#if props.sort.order === 'asc'} {:else if props.sort.order === 'desc'} {/if} {#if !props.group.disabled} {/if} {#if props.filter?.render !== undefined} e.stopPropagation()} > {/if} {#if !props.resize.disabled} e.stopPropagation()} use:props.resize.drag > {/if}

{#if !props.group.repeated} {/if}

plugin state · debug

{JSON.stringify(
            {
                groupByIds: $groupByIds,
                sortKeys: $sortKeys,
                filterValues: $filterValues,
                selectedDataIds: $selectedDataIds,
                columnIdOrder: $columnIdOrder,
                hiddenColumnIds: $hiddenColumnIds,
                expandedIds: $expandedIds,
                columnWidths: $columnWidths
            },
            null,
            2
        )}

```