diff --git a/docs/config.json b/docs/config.json index 95c0ad6acb..e2393b7fdc 100644 --- a/docs/config.json +++ b/docs/config.json @@ -434,6 +434,10 @@ "to": "framework/svelte/examples/column-visibility", "label": "Column Visibility" }, + { + "to": "framework/svelte/examples/filtering", + "label": "Filtering" + }, { "to": "framework/svelte/examples/sorting", "label": "Sorting" diff --git a/examples/svelte/filtering/.gitignore b/examples/svelte/filtering/.gitignore new file mode 100644 index 0000000000..91c18232e2 --- /dev/null +++ b/examples/svelte/filtering/.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/filtering/README.md b/examples/svelte/filtering/README.md new file mode 100644 index 0000000000..b168d3c4b1 --- /dev/null +++ b/examples/svelte/filtering/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/filtering/index.html b/examples/svelte/filtering/index.html new file mode 100644 index 0000000000..6ab1dd7e51 --- /dev/null +++ b/examples/svelte/filtering/index.html @@ -0,0 +1,14 @@ + + + + + + Vite App + + + + +
+ + + diff --git a/examples/svelte/filtering/package.json b/examples/svelte/filtering/package.json new file mode 100644 index 0000000000..7e6c595996 --- /dev/null +++ b/examples/svelte/filtering/package.json @@ -0,0 +1,24 @@ +{ + "name": "tanstack-table-example-svelte-filtering", + "version": "0.0.0", + "private": true, + "type": "module", + "scripts": { + "dev": "vite", + "build": "vite build", + "serve": "vite preview", + "test:types": "svelte-check --tsconfig ./tsconfig.json" + }, + "devDependencies": { + "@faker-js/faker": "^8.3.1", + "@rollup/plugin-replace": "^5.0.5", + "@sveltejs/vite-plugin-svelte": "^3.0.1", + "@tanstack/match-sorter-utils": "^8.11.8", + "@tanstack/svelte-table": "^8.12.0", + "@tsconfig/svelte": "^5.0.2", + "svelte": "^4.2.8", + "svelte-check": "^3.6.3", + "typescript": "5.3.3", + "vite": "^5.0.11" + } +} diff --git a/examples/svelte/filtering/src/App.svelte b/examples/svelte/filtering/src/App.svelte new file mode 100644 index 0000000000..e163a51722 --- /dev/null +++ b/examples/svelte/filtering/src/App.svelte @@ -0,0 +1,102 @@ + + $table.setGlobalFilter(String(e.target.value))} /> +
+ + + {#each $table.getHeaderGroups() as headerGroup} + + {#each headerGroup.headers as header, idx} + + {/each} + + {/each} + + + {#each $table.getRowModel().rows as row} + + {#each row.getVisibleCells() as cell} + + {/each} + + {/each} + +
+ {#if !header.isPlaceholder} + + {/if} +
+ +
+
+
"globalFilter": "{$table.getState().globalFilter}"
\ No newline at end of file diff --git a/examples/svelte/filtering/src/index.css b/examples/svelte/filtering/src/index.css new file mode 100644 index 0000000000..43c09e0f6b --- /dev/null +++ b/examples/svelte/filtering/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/filtering/src/main.ts b/examples/svelte/filtering/src/main.ts new file mode 100644 index 0000000000..4a5606b9a2 --- /dev/null +++ b/examples/svelte/filtering/src/main.ts @@ -0,0 +1,8 @@ +// @ts-ignore +import App from './App.svelte' + +const app = new App({ + target: document.getElementById('root')!, +}) + +export default app diff --git a/examples/svelte/filtering/src/makeData.ts b/examples/svelte/filtering/src/makeData.ts new file mode 100644 index 0000000000..331dd1eb19 --- /dev/null +++ b/examples/svelte/filtering/src/makeData.ts @@ -0,0 +1,48 @@ +import { faker } from '@faker-js/faker' + +export type Person = { + firstName: string + lastName: string + age: number + visits: number + progress: number + status: 'relationship' | 'complicated' | 'single' + subRows?: Person[] +} + +const range = (len: number) => { + const arr: number[] = [] + for (let i = 0; i < len; i++) { + arr.push(i) + } + return arr +} + +const newPerson = (): Person => { + return { + firstName: faker.person.firstName(), + lastName: faker.person.lastName(), + age: faker.number.int(40), + visits: faker.number.int(1000), + progress: faker.number.int(100), + status: faker.helpers.shuffle([ + 'relationship', + 'complicated', + 'single', + ])[0]!, + } +} + +export function makeData(...lens: number[]) { + const makeDataLevel = (depth = 0): Person[] => { + const len = lens[depth]! + return range(len).map((d): Person => { + return { + ...newPerson(), + subRows: lens[depth + 1] ? makeDataLevel(depth + 1) : undefined, + } + }) + } + + return makeDataLevel() +} diff --git a/examples/svelte/filtering/svelte.config.js b/examples/svelte/filtering/svelte.config.js new file mode 100644 index 0000000000..8abe4369b8 --- /dev/null +++ b/examples/svelte/filtering/svelte.config.js @@ -0,0 +1,5 @@ +import { vitePreprocess } from '@sveltejs/vite-plugin-svelte' + +export default { + preprocess: vitePreprocess(), +} diff --git a/examples/svelte/filtering/tsconfig.json b/examples/svelte/filtering/tsconfig.json new file mode 100644 index 0000000000..e44d928411 --- /dev/null +++ b/examples/svelte/filtering/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/filtering/vite.config.js b/examples/svelte/filtering/vite.config.js new file mode 100644 index 0000000000..c6ced40a24 --- /dev/null +++ b/examples/svelte/filtering/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(), + ], +})