diff --git a/examples/svelte/column-groups/package.json b/examples/svelte/column-groups/package.json index e822f21f1e..ff90a29cac 100644 --- a/examples/svelte/column-groups/package.json +++ b/examples/svelte/column-groups/package.json @@ -15,7 +15,7 @@ "@sveltejs/vite-plugin-svelte": "^4.0.0-next", "@tanstack/svelte-table": "^9.0.0-alpha.10", "@tsconfig/svelte": "^5.0.4", - "svelte": "^5.0.0-next", + "svelte": "5.0.0-next.260", "svelte-check": "^3.8.4", "typescript": "5.4.5", "vite": "^5.3.2" diff --git a/examples/svelte/column-groups/src/App.svelte b/examples/svelte/column-groups/src/App.svelte index 450709c4a6..69a8ca7021 100644 --- a/examples/svelte/column-groups/src/App.svelte +++ b/examples/svelte/column-groups/src/App.svelte @@ -4,6 +4,7 @@ FlexRender, createCoreRowModel, createTable, + tableFeatures, tableOptions, } from '@tanstack/svelte-table' import './index.css' @@ -44,7 +45,9 @@ }, ] - const defaultColumns: ColumnDef[] = [ + const _features = tableFeatures({}) + + const defaultColumns: ColumnDef[] = [ { header: 'Name', footer: (props) => props.column.id, @@ -97,9 +100,10 @@ ] const options = tableOptions({ + _features, + _rowModels: {}, data: defaultData, columns: defaultColumns, - getCoreRowModel: createCoreRowModel(), }) const table = createTable(options) @@ -126,7 +130,7 @@ {#each table.getRowModel().rows as row} - {#each row.getVisibleCells() as cell} + {#each row.getAllCells() as cell} [] = [ { header: 'Name', @@ -75,7 +80,9 @@ const [columnVisibility, setColumnVisibility] = createTableState({}) - const options: TableOptions = { + const options: TableOptions = { + _features, + _rowModels: {}, get data() { return data }, @@ -90,8 +97,6 @@ }, onColumnOrderChange: setColumnOrder, onColumnVisibilityChange: setColumnVisibility, - getCoreRowModel: createCoreRowModel(), - getSortedRowModel: createSortedRowModel(), debugTable: true, } diff --git a/examples/svelte/column-pinning/package.json b/examples/svelte/column-pinning/package.json index f439afe827..235cedfe54 100644 --- a/examples/svelte/column-pinning/package.json +++ b/examples/svelte/column-pinning/package.json @@ -16,7 +16,7 @@ "@sveltejs/vite-plugin-svelte": "^4.0.0-next", "@tanstack/svelte-table": "^9.0.0-alpha.10", "@tsconfig/svelte": "^5.0.4", - "svelte": "^5.0.0-next", + "svelte": "5.0.0-next.260", "svelte-check": "^3.8.4", "typescript": "5.4.5", "vite": "^5.3.2" diff --git a/examples/svelte/column-pinning/src/App.svelte b/examples/svelte/column-pinning/src/App.svelte index 9e42d6dadf..417b6d8923 100644 --- a/examples/svelte/column-pinning/src/App.svelte +++ b/examples/svelte/column-pinning/src/App.svelte @@ -4,20 +4,31 @@ ColumnDef, ColumnOrderState, ColumnPinningState, - TableOptions, ColumnVisibilityState, + Header, + HeaderGroup, + TableOptions, } from '@tanstack/svelte-table' import { + ColumnPinning, + ColumnVisibility, FlexRender, - createCoreRowModel, + RowSorting, createSortedRowModel, createTable, + tableFeatures, } from '@tanstack/svelte-table' import './index.css' import { makeData, type Person } from './makeData' import { createTableState } from './state.svelte' - const columns: ColumnDef[] = [ + const _features = tableFeatures({ + RowSorting, + ColumnVisibility, + ColumnPinning, + }) + + const columns: ColumnDef[] = [ { header: 'Name', footer: (props) => props.column.id, @@ -74,11 +85,13 @@ const [columnOrder, setColumnOrder] = createTableState([]) const [columnPinning, setColumnPinning] = - createTableState({}) + createTableState({ left: [], right: [] }) const [columnVisibility, setColumnVisibility] = createTableState({}) const options: TableOptions = { + _features, + _rowModels: { Sorted: createSortedRowModel() }, get data() { return data }, @@ -97,8 +110,6 @@ onColumnOrderChange: setColumnOrder, onColumnPinningChange: setColumnPinning, onColumnVisibilityChange: setColumnVisibility, - getCoreRowModel: createCoreRowModel(), - getSortedRowModel: createSortedRowModel(), debugTable: true, } @@ -111,6 +122,53 @@ const table = createTable(options) +{#snippet headerCell(header: Header)} + +
+ {#if !header.isPlaceholder} + + {/if} +
+ {#if !header.isPlaceholder && header.column.getCanPin()} +
+ {#if header.column.getIsPinned() !== 'left'} + + {/if} + {#if header.column.getIsPinned()} + + {/if} + {#if header.column.getIsPinned() !== 'right'} + + {/if} +
+ {/if} + +{/snippet} +
@@ -170,50 +228,7 @@ {#each table.getLeftHeaderGroups() as headerGroup} {#each headerGroup.headers as header} - -
- {#if !header.isPlaceholder} - - {/if} -
- {#if !header.isPlaceholder && header.column.getCanPin()} -
- {#if header.column.getIsPinned() !== 'left'} - - {/if} - {#if header.column.getIsPinned()} - - {/if} - {#if header.column.getIsPinned() !== 'right'} - - {/if} -
- {/if} - + {@render headerCell(header)} {/each} {/each} @@ -239,50 +254,7 @@ {#each isSplit ? table.getCenterHeaderGroups() : table.getHeaderGroups() as headerGroup} {#each headerGroup.headers as header} - -
- {#if !header.isPlaceholder} - - {/if} -
- {#if !header.isPlaceholder && header.column.getCanPin()} -
- {#if header.column.getIsPinned() !== 'left'} - - {/if} - {#if header.column.getIsPinned()} - - {/if} - {#if header.column.getIsPinned() !== 'right'} - - {/if} -
- {/if} - + {@render headerCell(header)} {/each} {/each} @@ -308,50 +280,7 @@ {#each table.getRightHeaderGroups() as headerGroup} {#each headerGroup.headers as header} - -
- {#if !header.isPlaceholder} - - {/if} -
- {#if !header.isPlaceholder && header.column.getCanPin()} -
- {#if header.column.getIsPinned() !== 'left'} - - {/if} - {#if header.column.getIsPinned()} - - {/if} - {#if header.column.getIsPinned() !== 'right'} - - {/if} -
- {/if} - + {@render headerCell(header)} {/each} {/each} @@ -373,5 +302,6 @@ {/if}
+
{JSON.stringify(table.getState().columnPinning, null, 2)}
diff --git a/examples/svelte/column-visibility/package.json b/examples/svelte/column-visibility/package.json index 099fb67f22..24de6372e7 100644 --- a/examples/svelte/column-visibility/package.json +++ b/examples/svelte/column-visibility/package.json @@ -15,7 +15,7 @@ "@sveltejs/vite-plugin-svelte": "^4.0.0-next", "@tanstack/svelte-table": "^9.0.0-alpha.10", "@tsconfig/svelte": "^5.0.4", - "svelte": "^5.0.0-next", + "svelte": "5.0.0-next.260", "svelte-check": "^3.8.4", "typescript": "5.4.5", "vite": "^5.3.2" diff --git a/examples/svelte/column-visibility/src/App.svelte b/examples/svelte/column-visibility/src/App.svelte index e21c706c75..f86d1f5cac 100644 --- a/examples/svelte/column-visibility/src/App.svelte +++ b/examples/svelte/column-visibility/src/App.svelte @@ -1,15 +1,15 @@