diff --git a/examples/react/basic/src/main.tsx b/examples/react/basic/src/main.tsx index 3d1ccbd1fa..e5d09a9c01 100644 --- a/examples/react/basic/src/main.tsx +++ b/examples/react/basic/src/main.tsx @@ -110,6 +110,8 @@ function App() { // add additional table options here }) + console.log('table', table) + // 7. Render your table markup from the table instance APIs return (
diff --git a/examples/svelte/basic/src/App.svelte b/examples/svelte/basic/src/App.svelte index c941706465..3999b2c3c5 100644 --- a/examples/svelte/basic/src/App.svelte +++ b/examples/svelte/basic/src/App.svelte @@ -1,12 +1,15 @@
@@ -108,7 +117,7 @@ {#each table.getRowModel().rows as row} - {#each row.getVisibleCells() as cell} + {#each row.getAllCells() as cell} - * const table = createTable({ ... }) - * - * - * - * - * {#each table.getHeaderGroups() as headerGroup} - * - * {#each headerGroup.headers as header} - * - * {/each} - * - * {/each} - * - * - *
- * - *
- * ``` - */ export function createTable< TFeatures extends TableFeatures, TData extends RowData, ->(options: TableOptions) { - const resolvedOptions: TableOptions = mergeObjects( +>(tableOptions: TableOptions) { + const _features = { ...coreFeatures, ...tableOptions._features } + + console.log('features', _features) + + let state = $state>>( + getInitialTableState(_features, tableOptions.initialState), + ) + + const statefulOptions: TableOptions = mergeObjects( { - state: {}, - onStateChange() {}, - renderFallbackValue: null, + _features, + state: { ...state, ...tableOptions.state }, mergeOptions: ( defaultOptions: TableOptions, newOptions: Partial>, @@ -48,21 +33,24 @@ export function createTable< return mergeObjects(defaultOptions, newOptions) }, }, - options, + tableOptions, ) - const table = constructTable(resolvedOptions) - let state = $state>>(table.initialState) + console.log('statefulOptions', statefulOptions) + + const table = constructTable(statefulOptions) + + console.log('table', table) function updateOptions() { table.setOptions((prev) => { - return mergeObjects(prev, options, { - state: mergeObjects(state, options.state || {}), + return mergeObjects(prev, tableOptions, { + state: mergeObjects(state, tableOptions.state || {}), onStateChange: (updater: any) => { if (updater instanceof Function) state = updater(state) else state = mergeObjects(state, updater) - options.onStateChange?.(updater) + tableOptions.onStateChange?.(updater) }, }) }) @@ -71,7 +59,7 @@ export function createTable< updateOptions() $effect.pre(() => { - updateOptions() + updateOptions() // re-render the table whenever the state or options change }) return table diff --git a/packages/svelte-table/src/index.ts b/packages/svelte-table/src/index.ts index 2e02723923..1fc60426c5 100644 --- a/packages/svelte-table/src/index.ts +++ b/packages/svelte-table/src/index.ts @@ -1,4 +1,4 @@ export * from '@tanstack/table-core' -export { default as FlexRender } from './flex-render.svelte' +export { default as FlexRender } from './FlexRender.svelte' export { renderComponent } from './render-component' -export { createTable } from './table.svelte' +export { createTable } from './createTable.svelte' diff --git a/packages/table-core/src/core/table/constructTable.test.ts b/packages/table-core/src/core/table/constructTable.test.ts index 8c98750300..0de582c428 100644 --- a/packages/table-core/src/core/table/constructTable.test.ts +++ b/packages/table-core/src/core/table/constructTable.test.ts @@ -1,10 +1,11 @@ import { describe, expect, it } from 'vitest' -import { constructTable, coreFeatures } from './constructTable' +import { stockFeatures } from '../../features/stockFeatures' +import { constructTable } from './constructTable' -describe('createTable', () => { +describe('constructTable', () => { it('should create a table with all core table APIs and properties', () => { const table = constructTable({ - _features: coreFeatures, + _features: stockFeatures, columns: [], data: [], })