Skip to content

Commit

Permalink
fix svelte adapter and update examples
Browse files Browse the repository at this point in the history
  • Loading branch information
@walker-tx
walker-tx committed Sep 27, 2024
1 parent f9bd3ee commit cc09659
Show file tree
Hide file tree
Showing 17 changed files with 5,665 additions and 2,337 deletions.
2 changes: 1 addition & 1 deletion examples/svelte/column-groups/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
10 changes: 7 additions & 3 deletions examples/svelte/column-groups/src/App.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
FlexRender,
createCoreRowModel,
createTable,
tableFeatures,
tableOptions,
} from '@tanstack/svelte-table'
import './index.css'
Expand Down Expand Up @@ -44,7 +45,9 @@
},
]
const defaultColumns: ColumnDef<any, Person>[] = [
const _features = tableFeatures({})
const defaultColumns: ColumnDef<typeof _features, Person>[] = [
{
header: 'Name',
footer: (props) => props.column.id,
Expand Down Expand Up @@ -97,9 +100,10 @@
]
const options = tableOptions({
_features,
_rowModels: {},
data: defaultData,
columns: defaultColumns,
getCoreRowModel: createCoreRowModel(),
})
const table = createTable(options)
Expand All @@ -126,7 +130,7 @@
<tbody>
{#each table.getRowModel().rows as row}
<tr>
{#each row.getVisibleCells() as cell}
{#each row.getAllCells() as cell}
<td>
<FlexRender
content={cell.column.columnDef.cell}
Expand Down
2 changes: 1 addition & 1 deletion examples/svelte/column-ordering/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
19 changes: 12 additions & 7 deletions examples/svelte/column-ordering/src/App.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,20 +3,25 @@
import type {
ColumnDef,
ColumnOrderState,
OnChangeFn,
TableOptions,
ColumnVisibilityState,
TableOptions,
} from '@tanstack/svelte-table'
import {
ColumnOrdering,
ColumnVisibility,
FlexRender,
createCoreRowModel,
createSortedRowModel,
createTable,
tableFeatures,
} from '@tanstack/svelte-table'
import './index.css'
import { makeData, type Person } from './makeData'
import { createTableState } from './state.svelte'
const _features = tableFeatures({
ColumnOrdering,
ColumnVisibility,
})
const columns: ColumnDef<any, Person>[] = [
{
header: 'Name',
Expand Down Expand Up @@ -75,7 +80,9 @@
const [columnVisibility, setColumnVisibility] =
createTableState<ColumnVisibilityState>({})
const options: TableOptions<any, Person> = {
const options: TableOptions<typeof _features, Person> = {
_features,
_rowModels: {},
get data() {
return data
},
Expand All @@ -90,8 +97,6 @@
},
onColumnOrderChange: setColumnOrder,
onColumnVisibilityChange: setColumnVisibility,
getCoreRowModel: createCoreRowModel(),
getSortedRowModel: createSortedRowModel(),
debugTable: true,
}
Expand Down
2 changes: 1 addition & 1 deletion examples/svelte/column-pinning/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
206 changes: 68 additions & 138 deletions examples/svelte/column-pinning/src/App.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<any, Person>[] = [
const _features = tableFeatures({
RowSorting,
ColumnVisibility,
ColumnPinning,
})
const columns: ColumnDef<typeof _features, Person>[] = [
{
header: 'Name',
footer: (props) => props.column.id,
Expand Down Expand Up @@ -74,11 +85,13 @@
const [columnOrder, setColumnOrder] = createTableState<ColumnOrderState>([])
const [columnPinning, setColumnPinning] =
createTableState<ColumnPinningState>({})
createTableState<ColumnPinningState>({ left: [], right: [] })
const [columnVisibility, setColumnVisibility] =
createTableState<ColumnVisibilityState>({})
const options: TableOptions<any, Person> = {
_features,
_rowModels: { Sorted: createSortedRowModel() },
get data() {
return data
},
Expand All @@ -97,8 +110,6 @@
onColumnOrderChange: setColumnOrder,
onColumnPinningChange: setColumnPinning,
onColumnVisibilityChange: setColumnVisibility,
getCoreRowModel: createCoreRowModel(),
getSortedRowModel: createSortedRowModel(),
debugTable: true,
}
Expand All @@ -111,6 +122,53 @@
const table = createTable(options)
</script>

{#snippet headerCell(header: Header<any, Person, unknown>)}
<th colSpan={header.colSpan}>
<div class="whitespace-nowrap">
{#if !header.isPlaceholder}
<FlexRender
content={header.column.columnDef.header}
context={header.getContext()}
/>
{/if}
</div>
{#if !header.isPlaceholder && header.column.getCanPin()}
<div class="flex gap-1 justify-center">
{#if header.column.getIsPinned() !== 'left'}
<button
class="border rounded px-2"
onclick={() => {
header.column.pin('left')
}}
>
{'<='}
</button>
{/if}
{#if header.column.getIsPinned()}
<button
class="border rounded px-2"
onclick={() => {
header.column.pin(false)
}}
>
X
</button>
{/if}
{#if header.column.getIsPinned() !== 'right'}
<button
class="border rounded px-2"
onclick={() => {
header.column.pin('right')
}}
>
{'=>'}
</button>
{/if}
</div>
{/if}
</th>
{/snippet}

<div class="p-2">
<div class="inline-block border border-black shadow rounded">
<div class="px-1 border-b border-black">
Expand Down Expand Up @@ -170,50 +228,7 @@
{#each table.getLeftHeaderGroups() as headerGroup}
<tr>
{#each headerGroup.headers as header}
<th colSpan={header.colSpan}>
<div class="whitespace-nowrap">
{#if !header.isPlaceholder}
<FlexRender
content={header.column.columnDef.header}
context={header.getContext()}
/>
{/if}
</div>
{#if !header.isPlaceholder && header.column.getCanPin()}
<div class="flex gap-1 justify-center">
{#if header.column.getIsPinned() !== 'left'}
<button
class="border rounded px-2"
onclick={() => {
header.column.pin('left')
}}
>
{'<='}
</button>
{/if}
{#if header.column.getIsPinned()}
<button
class="border rounded px-2"
onclick={() => {
header.column.pin(false)
}}
>
X
</button>
{/if}
{#if header.column.getIsPinned() !== 'right'}
<button
class="border rounded px-2"
onclick={() => {
header.column.pin('right')
}}
>
{'=>'}
</button>
{/if}
</div>
{/if}
</th>
{@render headerCell(header)}
{/each}
</tr>
{/each}
Expand All @@ -239,50 +254,7 @@
{#each isSplit ? table.getCenterHeaderGroups() : table.getHeaderGroups() as headerGroup}
<tr>
{#each headerGroup.headers as header}
<th colSpan={header.colSpan}>
<div class="whitespace-nowrap">
{#if !header.isPlaceholder}
<FlexRender
content={header.column.columnDef.header}
context={header.getContext()}
/>
{/if}
</div>
{#if !header.isPlaceholder && header.column.getCanPin()}
<div class="flex gap-1 justify-center">
{#if header.column.getIsPinned() !== 'left'}
<button
class="border rounded px-2"
onclick={() => {
header.column.pin('left')
}}
>
{'<='}
</button>
{/if}
{#if header.column.getIsPinned()}
<button
class="border rounded px-2"
onclick={() => {
header.column.pin(false)
}}
>
X
</button>
{/if}
{#if header.column.getIsPinned() !== 'right'}
<button
class="border rounded px-2"
onclick={() => {
header.column.pin('right')
}}
>
{'=>'}
</button>
{/if}
</div>
{/if}
</th>
{@render headerCell(header)}
{/each}
</tr>
{/each}
Expand All @@ -308,50 +280,7 @@
{#each table.getRightHeaderGroups() as headerGroup}
<tr>
{#each headerGroup.headers as header}
<th colSpan={header.colSpan}>
<div class="whitespace-nowrap">
{#if !header.isPlaceholder}
<FlexRender
content={header.column.columnDef.header}
context={header.getContext()}
/>
{/if}
</div>
{#if !header.isPlaceholder && header.column.getCanPin()}
<div class="flex gap-1 justify-center">
{#if header.column.getIsPinned() !== 'left'}
<button
class="border rounded px-2"
onclick={() => {
header.column.pin('left')
}}
>
{'<='}
</button>
{/if}
{#if header.column.getIsPinned()}
<button
class="border rounded px-2"
onclick={() => {
header.column.pin(false)
}}
>
X
</button>
{/if}
{#if header.column.getIsPinned() !== 'right'}
<button
class="border rounded px-2"
onclick={() => {
header.column.pin('right')
}}
>
{'=>'}
</button>
{/if}
</div>
{/if}
</th>
{@render headerCell(header)}
{/each}
</tr>
{/each}
Expand All @@ -373,5 +302,6 @@
</table>
{/if}
</div>
<br />
<pre>{JSON.stringify(table.getState().columnPinning, null, 2)}</pre>
</div>
Loading

0 comments on commit cc09659

Please sign in to comment.