diff --git a/examples/svelte/basic-table-helper/.gitignore b/examples/svelte/basic-table-helper/.gitignore new file mode 100644 index 0000000000..91c18232e2 --- /dev/null +++ b/examples/svelte/basic-table-helper/.gitignore @@ -0,0 +1,8 @@ +node_modules +.DS_Store +dist +dist-ssr +*.local + +src/**/*.d.ts +src/**/*.map \ No newline at end of file diff --git a/examples/svelte/basic-table-helper/README.md b/examples/svelte/basic-table-helper/README.md new file mode 100644 index 0000000000..b168d3c4b1 --- /dev/null +++ b/examples/svelte/basic-table-helper/README.md @@ -0,0 +1,6 @@ +# Example + +To run this example: + +- `npm install` or `yarn` +- `npm run start` or `yarn start` diff --git a/examples/svelte/basic-table-helper/index.html b/examples/svelte/basic-table-helper/index.html new file mode 100644 index 0000000000..6ab1dd7e51 --- /dev/null +++ b/examples/svelte/basic-table-helper/index.html @@ -0,0 +1,14 @@ + + + + + + Vite App + + + + +
+ + + diff --git a/examples/svelte/basic-table-helper/package.json b/examples/svelte/basic-table-helper/package.json new file mode 100644 index 0000000000..47704ce895 --- /dev/null +++ b/examples/svelte/basic-table-helper/package.json @@ -0,0 +1,23 @@ +{ + "name": "tanstack-table-example-svelte-basic-table-helper", + "version": "0.0.0", + "private": true, + "type": "module", + "scripts": { + "dev": "vite", + "build": "vite build", + "serve": "vite preview", + "test:types": "svelte-check --tsconfig ./tsconfig.json", + "lint": "eslint ./src" + }, + "devDependencies": { + "@rollup/plugin-replace": "^6.0.1", + "@sveltejs/vite-plugin-svelte": "^4.0.0", + "@tanstack/svelte-table": "^9.0.0-alpha.10", + "@tsconfig/svelte": "^5.0.4", + "svelte": "^5.1.16", + "svelte-check": "^4.0.7", + "typescript": "5.6.3", + "vite": "^5.4.11" + } +} diff --git a/examples/svelte/basic-table-helper/src/App.svelte b/examples/svelte/basic-table-helper/src/App.svelte new file mode 100644 index 0000000000..3f72e84de7 --- /dev/null +++ b/examples/svelte/basic-table-helper/src/App.svelte @@ -0,0 +1,154 @@ + + +
+ + + {#each table.getHeaderGroups() as headerGroup} + + {#each headerGroup.headers as header} + + {/each} + + {/each} + + + {#each table.getRowModel().rows as row} + + {#each row.getAllCells() as cell} + + {/each} + + {/each} + + + {#each table.getFooterGroups() as footerGroup} + + {#each footerGroup.headers as header} + + {/each} + + {/each} + +
+ {#if !header.isPlaceholder} + + {/if} +
+ +
+ {#if !header.isPlaceholder} + + {/if} +
+
+
diff --git a/examples/svelte/basic-table-helper/src/index.css b/examples/svelte/basic-table-helper/src/index.css new file mode 100644 index 0000000000..43c09e0f6b --- /dev/null +++ b/examples/svelte/basic-table-helper/src/index.css @@ -0,0 +1,26 @@ +html { + font-family: sans-serif; + font-size: 14px; +} + +table { + border: 1px solid lightgray; +} + +tbody { + border-bottom: 1px solid lightgray; +} + +th { + border-bottom: 1px solid lightgray; + border-right: 1px solid lightgray; + padding: 2px 4px; +} + +tfoot { + color: gray; +} + +tfoot th { + font-weight: normal; +} diff --git a/examples/svelte/basic-table-helper/src/main.ts b/examples/svelte/basic-table-helper/src/main.ts new file mode 100644 index 0000000000..2f4dd54dc3 --- /dev/null +++ b/examples/svelte/basic-table-helper/src/main.ts @@ -0,0 +1,9 @@ +// @ts-ignore +import { mount } from 'svelte' +import App from './App.svelte' + +const app = mount(App, { + target: document.getElementById('root')!, +}) + +export default app diff --git a/examples/svelte/basic-table-helper/svelte.config.js b/examples/svelte/basic-table-helper/svelte.config.js new file mode 100644 index 0000000000..8abe4369b8 --- /dev/null +++ b/examples/svelte/basic-table-helper/svelte.config.js @@ -0,0 +1,5 @@ +import { vitePreprocess } from '@sveltejs/vite-plugin-svelte' + +export default { + preprocess: vitePreprocess(), +} diff --git a/examples/svelte/basic-table-helper/tsconfig.json b/examples/svelte/basic-table-helper/tsconfig.json new file mode 100644 index 0000000000..e44d928411 --- /dev/null +++ b/examples/svelte/basic-table-helper/tsconfig.json @@ -0,0 +1,13 @@ +{ + "extends": "@tsconfig/svelte/tsconfig.json", + "compilerOptions": { + "target": "esnext", + "useDefineForClassFields": true, + "module": "esnext", + "resolveJsonModule": true, + "allowJs": true, + "checkJs": true, + "isolatedModules": true + }, + "include": ["src/**/*.ts", "src/**/*.js", "src/**/*.svelte"] +} diff --git a/examples/svelte/basic-table-helper/vite.config.js b/examples/svelte/basic-table-helper/vite.config.js new file mode 100644 index 0000000000..c6ced40a24 --- /dev/null +++ b/examples/svelte/basic-table-helper/vite.config.js @@ -0,0 +1,17 @@ +import { defineConfig } from 'vite' +import { svelte } from '@sveltejs/vite-plugin-svelte' +import rollupReplace from '@rollup/plugin-replace' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + rollupReplace({ + preventAssignment: true, + values: { + __DEV__: JSON.stringify(true), + 'process.env.NODE_ENV': JSON.stringify('development'), + }, + }), + svelte(), + ], +}) diff --git a/packages/react-table/src/tableHelper.ts b/packages/react-table/src/createTableHelper.ts similarity index 96% rename from packages/react-table/src/tableHelper.ts rename to packages/react-table/src/createTableHelper.ts index d4a37b993d..f4493557c5 100644 --- a/packages/react-table/src/tableHelper.ts +++ b/packages/react-table/src/createTableHelper.ts @@ -16,7 +16,7 @@ export type TableHelper< useTable: ( tableOptions: Omit< TableOptions, - '_features' | '_rowModels' + '_features' | '_rowModels' | '_processingFns' >, ) => Table } diff --git a/packages/react-table/src/index.ts b/packages/react-table/src/index.ts index 13f29e6d18..8b50f786b2 100755 --- a/packages/react-table/src/index.ts +++ b/packages/react-table/src/index.ts @@ -1,5 +1,5 @@ export * from '@tanstack/table-core' -export * from './useTable' export * from './FlexRender' -export * from './tableHelper' +export * from './createTableHelper' +export * from './useTable' diff --git a/packages/svelte-table/src/createTableHelper.ts b/packages/svelte-table/src/createTableHelper.ts new file mode 100644 index 0000000000..906ccbabaf --- /dev/null +++ b/packages/svelte-table/src/createTableHelper.ts @@ -0,0 +1,62 @@ +import { constructTableHelper } from '@tanstack/table-core' +import { createTable } from './createTable.svelte' +import type { + RowData, + Table, + TableFeatures, + TableHelperOptions, + TableHelper_Core, + TableOptions, +} from '@tanstack/table-core' + +export type TableHelper< + TFeatures extends TableFeatures, + TData extends RowData, +> = Omit, 'tableCreator'> & { + createTable: ( + tableOptions: Omit< + TableOptions, + '_features' | '_rowModels' | '_processingFns' + >, + ) => Table +} + +export function createTableHelper< + TFeatures extends TableFeatures, + TData extends RowData, +>( + tableHelperOptions: TableHelperOptions, +): TableHelper { + const tableHelper = constructTableHelper(createTable, tableHelperOptions) + return { + ...tableHelper, + createTable: tableHelper.tableCreator, + } +} + +// test + +// type Person = { +// firstName: string +// lastName: string +// age: number +// } + +// const tableHelper = createTableHelper({ +// _features: { rowSelectionFeature: {} }, +// TData: {} as Person, +// }) + +// const columns = tableHelper.columnHelper.columns([ +// tableHelper.columnHelper.accessor('firstName', { header: 'First Name' }), +// tableHelper.columnHelper.accessor('lastName', { header: 'Last Name' }), +// tableHelper.columnHelper.accessor('age', { header: 'Age' }), +// tableHelper.columnHelper.display({ header: 'Actions', id: 'actions' }), +// ]) + +// const data: Array = [] + +// tableHelper.createTable({ +// columns, +// data, +// }) diff --git a/packages/svelte-table/src/index.ts b/packages/svelte-table/src/index.ts index 7d076d838d..0f99144399 100644 --- a/packages/svelte-table/src/index.ts +++ b/packages/svelte-table/src/index.ts @@ -1,6 +1,7 @@ export * from '@tanstack/table-core' -export { default as FlexRender } from './FlexRender.svelte' -export { renderComponent } from './render-component' export { createTable } from './createTable.svelte' +export { createTableHelper } from './createTableHelper' export { createTableState } from './createTableState.svelte' +export { default as FlexRender } from './FlexRender.svelte' +export { renderComponent } from './render-component' diff --git a/packages/table-core/src/helpers/tableHelper.ts b/packages/table-core/src/helpers/tableHelper.ts index 6249245cbd..b27c5ecf18 100644 --- a/packages/table-core/src/helpers/tableHelper.ts +++ b/packages/table-core/src/helpers/tableHelper.ts @@ -30,7 +30,7 @@ export type TableHelper_Core< tableCreator: ( tableOptions: Omit< TableOptions, - '_features' | '_rowModels' + '_features' | '_rowModels' | '_processingFns' >, ) => Table }