From f4356c0934017c9cc8948b36629c949e446a94ad Mon Sep 17 00:00:00 2001 From: Lachlan Collins <1667261+lachlancollins@users.noreply.github.com> Date: Sun, 31 Dec 2023 09:06:51 +1100 Subject: [PATCH] chore: Run prettier on CI (#5241) * Add test:format to CI scripts, add prettier-plugin-svelte * Run prettier * Use prettier v4 alpha * Mark test:format as root script * Try bumping node version --- .github/workflows/ci.yml | 2 +- .github/workflows/pr.yml | 2 +- .nvmrc | 2 +- .prettierignore | 8 + babel.config.cjs | 2 +- docs/config.json | 2 +- examples/react/basic/index.html | 2 +- examples/react/bootstrap/index.html | 2 +- examples/react/column-dnd/index.html | 2 +- examples/react/column-groups/index.html | 2 +- examples/react/column-ordering/index.html | 2 +- examples/react/column-pinning/index.html | 2 +- .../column-resizing-performant/index.html | 2 +- examples/react/column-sizing/index.html | 2 +- examples/react/column-visibility/index.html | 2 +- examples/react/editable-data/index.html | 2 +- examples/react/expanding/index.html | 2 +- examples/react/filters/index.html | 2 +- .../full-width-resizable-table/index.html | 2 +- examples/react/full-width-table/index.html | 2 +- examples/react/fully-controlled/index.html | 2 +- examples/react/grouping/index.html | 2 +- examples/react/grouping/src/main.tsx | 8 +- examples/react/kitchen-sink/index.html | 2 +- .../react/kitchen-sink/src/tableModels.tsx | 2 +- .../react/material-ui-pagination/index.html | 2 +- .../react/pagination-controlled/index.html | 2 +- examples/react/pagination/index.html | 2 +- examples/react/row-dnd/index.html | 2 +- examples/react/row-pinning/index.html | 2 +- examples/react/row-pinning/src/index.css | 2 +- examples/react/row-selection/index.html | 2 +- examples/react/sorting/index.html | 2 +- examples/react/sub-components/index.html | 2 +- .../virtualized-infinite-scrolling/index.html | 2 +- .../src/index.css | 1 - examples/react/virtualized-rows/index.html | 2 +- examples/react/virtualized-rows/src/index.css | 2 +- examples/react/virtualized-rows/src/main.tsx | 2 +- examples/solid/basic/index.html | 2 +- examples/solid/bootstrap/index.html | 2 +- examples/solid/column-groups/index.html | 2 +- examples/solid/column-ordering/index.html | 2 +- examples/solid/column-visibility/index.html | 2 +- examples/solid/sorting/index.html | 2 +- examples/svelte/basic/index.html | 2 +- examples/svelte/basic/src/App.svelte | 2 +- examples/svelte/column-groups/index.html | 2 +- examples/svelte/column-ordering/index.html | 2 +- examples/svelte/column-pinning/index.html | 2 +- examples/svelte/column-visibility/index.html | 2 +- examples/svelte/sorting/index.html | 2 +- examples/svelte/sorting/src/App.svelte | 46 ++-- examples/vue/basic/index.html | 2 +- examples/vue/basic/tsconfig.dev.json | 1 + examples/vue/column-ordering/index.html | 2 +- examples/vue/column-pinning/index.html | 2 +- examples/vue/pagination-controlled/index.html | 2 +- .../pagination-controlled/src/useService.ts | 70 +++--- .../pagination-controlled/tsconfig.dev.json | 1 + examples/vue/pagination/index.html | 2 +- examples/vue/pagination/src/App.vue | 84 +++---- examples/vue/pagination/src/makeData.ts | 58 +++-- examples/vue/row-selection/index.html | 2 +- examples/vue/row-selection/src/App.vue | 35 +-- .../src/IndeterminateCheckbox.vue | 12 +- examples/vue/row-selection/tsconfig.dev.json | 1 + examples/vue/row-selection/vite.config.ts | 7 +- examples/vue/sorting/index.html | 2 +- package.json | 23 +- packages/react-table-devtools/src/utils.ts | 24 +- packages/svelte-table/src/placeholder.svelte | 4 +- packages/table-core/src/columnHelper.ts | 4 +- packages/table-core/src/core/row.ts | 3 +- .../table-core/src/features/ColumnSizing.ts | 15 +- packages/table-core/src/features/Filters.ts | 18 +- packages/table-core/src/features/Grouping.ts | 12 +- packages/table-core/src/features/Sorting.ts | 6 +- packages/table-core/src/types.ts | 6 +- packages/table-core/src/utils.ts | 28 +-- .../table-core/src/utils/getSortedRowModel.ts | 10 +- pnpm-lock.yaml | 238 +++++++++++++++++- prettier.config.cjs | 2 + 83 files changed, 551 insertions(+), 286 deletions(-) create mode 100644 .prettierignore diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index b264722e07..d99a98d834 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -26,7 +26,7 @@ jobs: with: version: 8 - name: Setup Node - uses: actions/setup-node@v3 + uses: actions/setup-node@v4 with: node-version-file: .nvmrc cache: pnpm diff --git a/.github/workflows/pr.yml b/.github/workflows/pr.yml index b7d0421f26..7e321e6a92 100644 --- a/.github/workflows/pr.yml +++ b/.github/workflows/pr.yml @@ -25,7 +25,7 @@ jobs: with: version: 8 - name: Setup Node - uses: actions/setup-node@v3 + uses: actions/setup-node@v4 with: node-version-file: .nvmrc cache: pnpm diff --git a/.nvmrc b/.nvmrc index 7fd023741b..8ddbc0c64a 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -v16.15.0 +v18.16.0 diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000000..b559c9b4d6 --- /dev/null +++ b/.prettierignore @@ -0,0 +1,8 @@ +**/.nx/cache +**/.svelte-kit +**/build +**/coverage +**/dist +**/docs +**/old-examples +pnpm-lock.yaml diff --git a/babel.config.cjs b/babel.config.cjs index 5dc2bb293e..2f6aa29258 100644 --- a/babel.config.cjs +++ b/babel.config.cjs @@ -12,7 +12,7 @@ module.exports = { modules: false, include: [ '@babel/plugin-proposal-nullish-coalescing-operator', - '@babel/plugin-proposal-optional-chaining' + '@babel/plugin-proposal-optional-chaining', ], // exclude: ['@babel/plugin-transform-regenerator'], }, diff --git a/docs/config.json b/docs/config.json index ebc16514cd..ad9e00af91 100644 --- a/docs/config.json +++ b/docs/config.json @@ -412,4 +412,4 @@ ] } ] -} \ No newline at end of file +} diff --git a/examples/react/basic/index.html b/examples/react/basic/index.html index dfcecb0b7b..3fc40c9367 100644 --- a/examples/react/basic/index.html +++ b/examples/react/basic/index.html @@ -1,4 +1,4 @@ - + diff --git a/examples/react/bootstrap/index.html b/examples/react/bootstrap/index.html index dfcecb0b7b..3fc40c9367 100644 --- a/examples/react/bootstrap/index.html +++ b/examples/react/bootstrap/index.html @@ -1,4 +1,4 @@ - + diff --git a/examples/react/column-dnd/index.html b/examples/react/column-dnd/index.html index dfcecb0b7b..3fc40c9367 100644 --- a/examples/react/column-dnd/index.html +++ b/examples/react/column-dnd/index.html @@ -1,4 +1,4 @@ - + diff --git a/examples/react/column-groups/index.html b/examples/react/column-groups/index.html index dfcecb0b7b..3fc40c9367 100644 --- a/examples/react/column-groups/index.html +++ b/examples/react/column-groups/index.html @@ -1,4 +1,4 @@ - + diff --git a/examples/react/column-ordering/index.html b/examples/react/column-ordering/index.html index dfcecb0b7b..3fc40c9367 100644 --- a/examples/react/column-ordering/index.html +++ b/examples/react/column-ordering/index.html @@ -1,4 +1,4 @@ - + diff --git a/examples/react/column-pinning/index.html b/examples/react/column-pinning/index.html index dfcecb0b7b..3fc40c9367 100644 --- a/examples/react/column-pinning/index.html +++ b/examples/react/column-pinning/index.html @@ -1,4 +1,4 @@ - + diff --git a/examples/react/column-resizing-performant/index.html b/examples/react/column-resizing-performant/index.html index dfcecb0b7b..3fc40c9367 100644 --- a/examples/react/column-resizing-performant/index.html +++ b/examples/react/column-resizing-performant/index.html @@ -1,4 +1,4 @@ - + diff --git a/examples/react/column-sizing/index.html b/examples/react/column-sizing/index.html index dfcecb0b7b..3fc40c9367 100644 --- a/examples/react/column-sizing/index.html +++ b/examples/react/column-sizing/index.html @@ -1,4 +1,4 @@ - + diff --git a/examples/react/column-visibility/index.html b/examples/react/column-visibility/index.html index dfcecb0b7b..3fc40c9367 100644 --- a/examples/react/column-visibility/index.html +++ b/examples/react/column-visibility/index.html @@ -1,4 +1,4 @@ - + diff --git a/examples/react/editable-data/index.html b/examples/react/editable-data/index.html index dfcecb0b7b..3fc40c9367 100644 --- a/examples/react/editable-data/index.html +++ b/examples/react/editable-data/index.html @@ -1,4 +1,4 @@ - + diff --git a/examples/react/expanding/index.html b/examples/react/expanding/index.html index dfcecb0b7b..3fc40c9367 100644 --- a/examples/react/expanding/index.html +++ b/examples/react/expanding/index.html @@ -1,4 +1,4 @@ - + diff --git a/examples/react/filters/index.html b/examples/react/filters/index.html index dfcecb0b7b..3fc40c9367 100644 --- a/examples/react/filters/index.html +++ b/examples/react/filters/index.html @@ -1,4 +1,4 @@ - + diff --git a/examples/react/full-width-resizable-table/index.html b/examples/react/full-width-resizable-table/index.html index dfcecb0b7b..3fc40c9367 100644 --- a/examples/react/full-width-resizable-table/index.html +++ b/examples/react/full-width-resizable-table/index.html @@ -1,4 +1,4 @@ - + diff --git a/examples/react/full-width-table/index.html b/examples/react/full-width-table/index.html index dfcecb0b7b..3fc40c9367 100644 --- a/examples/react/full-width-table/index.html +++ b/examples/react/full-width-table/index.html @@ -1,4 +1,4 @@ - + diff --git a/examples/react/fully-controlled/index.html b/examples/react/fully-controlled/index.html index dfcecb0b7b..3fc40c9367 100644 --- a/examples/react/fully-controlled/index.html +++ b/examples/react/fully-controlled/index.html @@ -1,4 +1,4 @@ - + diff --git a/examples/react/grouping/index.html b/examples/react/grouping/index.html index dfcecb0b7b..3fc40c9367 100644 --- a/examples/react/grouping/index.html +++ b/examples/react/grouping/index.html @@ -1,4 +1,4 @@ - + diff --git a/examples/react/grouping/src/main.tsx b/examples/react/grouping/src/main.tsx index 46bcbfdf4d..dea75f2aff 100644 --- a/examples/react/grouping/src/main.tsx +++ b/examples/react/grouping/src/main.tsx @@ -154,10 +154,10 @@ function App() { background: cell.getIsGrouped() ? '#0aff0082' : cell.getIsAggregated() - ? '#ffa50078' - : cell.getIsPlaceholder() - ? '#ff000042' - : 'white', + ? '#ffa50078' + : cell.getIsPlaceholder() + ? '#ff000042' + : 'white', }, }} > diff --git a/examples/react/kitchen-sink/index.html b/examples/react/kitchen-sink/index.html index dfcecb0b7b..3fc40c9367 100644 --- a/examples/react/kitchen-sink/index.html +++ b/examples/react/kitchen-sink/index.html @@ -1,4 +1,4 @@ - + diff --git a/examples/react/kitchen-sink/src/tableModels.tsx b/examples/react/kitchen-sink/src/tableModels.tsx index 5afd1ade92..242c543c4b 100644 --- a/examples/react/kitchen-sink/src/tableModels.tsx +++ b/examples/react/kitchen-sink/src/tableModels.tsx @@ -174,4 +174,4 @@ export const getTableMeta = ( }) ) }, - } as TableMeta) + }) as TableMeta diff --git a/examples/react/material-ui-pagination/index.html b/examples/react/material-ui-pagination/index.html index dfcecb0b7b..3fc40c9367 100644 --- a/examples/react/material-ui-pagination/index.html +++ b/examples/react/material-ui-pagination/index.html @@ -1,4 +1,4 @@ - + diff --git a/examples/react/pagination-controlled/index.html b/examples/react/pagination-controlled/index.html index dfcecb0b7b..3fc40c9367 100644 --- a/examples/react/pagination-controlled/index.html +++ b/examples/react/pagination-controlled/index.html @@ -1,4 +1,4 @@ - + diff --git a/examples/react/pagination/index.html b/examples/react/pagination/index.html index dfcecb0b7b..3fc40c9367 100644 --- a/examples/react/pagination/index.html +++ b/examples/react/pagination/index.html @@ -1,4 +1,4 @@ - + diff --git a/examples/react/row-dnd/index.html b/examples/react/row-dnd/index.html index dfcecb0b7b..3fc40c9367 100644 --- a/examples/react/row-dnd/index.html +++ b/examples/react/row-dnd/index.html @@ -1,4 +1,4 @@ - + diff --git a/examples/react/row-pinning/index.html b/examples/react/row-pinning/index.html index dfcecb0b7b..3fc40c9367 100644 --- a/examples/react/row-pinning/index.html +++ b/examples/react/row-pinning/index.html @@ -1,4 +1,4 @@ - + diff --git a/examples/react/row-pinning/src/index.css b/examples/react/row-pinning/src/index.css index 18149ea5c4..ff06da7f01 100644 --- a/examples/react/row-pinning/src/index.css +++ b/examples/react/row-pinning/src/index.css @@ -46,4 +46,4 @@ tfoot th { height: 500px; max-width: 900px !important; overflow: auto; -} \ No newline at end of file +} diff --git a/examples/react/row-selection/index.html b/examples/react/row-selection/index.html index dfcecb0b7b..3fc40c9367 100644 --- a/examples/react/row-selection/index.html +++ b/examples/react/row-selection/index.html @@ -1,4 +1,4 @@ - + diff --git a/examples/react/sorting/index.html b/examples/react/sorting/index.html index dfcecb0b7b..3fc40c9367 100644 --- a/examples/react/sorting/index.html +++ b/examples/react/sorting/index.html @@ -1,4 +1,4 @@ - + diff --git a/examples/react/sub-components/index.html b/examples/react/sub-components/index.html index dfcecb0b7b..3fc40c9367 100644 --- a/examples/react/sub-components/index.html +++ b/examples/react/sub-components/index.html @@ -1,4 +1,4 @@ - + diff --git a/examples/react/virtualized-infinite-scrolling/index.html b/examples/react/virtualized-infinite-scrolling/index.html index dfcecb0b7b..3fc40c9367 100644 --- a/examples/react/virtualized-infinite-scrolling/index.html +++ b/examples/react/virtualized-infinite-scrolling/index.html @@ -1,4 +1,4 @@ - + diff --git a/examples/react/virtualized-infinite-scrolling/src/index.css b/examples/react/virtualized-infinite-scrolling/src/index.css index 1a5965e14d..8b9d41963c 100644 --- a/examples/react/virtualized-infinite-scrolling/src/index.css +++ b/examples/react/virtualized-infinite-scrolling/src/index.css @@ -11,7 +11,6 @@ table { width: 100%; } - th { border-bottom: 1px solid lightgray; border-right: 1px solid lightgray; diff --git a/examples/react/virtualized-rows/index.html b/examples/react/virtualized-rows/index.html index dfcecb0b7b..3fc40c9367 100644 --- a/examples/react/virtualized-rows/index.html +++ b/examples/react/virtualized-rows/index.html @@ -1,4 +1,4 @@ - + diff --git a/examples/react/virtualized-rows/src/index.css b/examples/react/virtualized-rows/src/index.css index 3966c4bd6e..6402cb4b8b 100644 --- a/examples/react/virtualized-rows/src/index.css +++ b/examples/react/virtualized-rows/src/index.css @@ -37,4 +37,4 @@ td { .app { margin: 1rem auto; text-align: center; -} \ No newline at end of file +} diff --git a/examples/react/virtualized-rows/src/main.tsx b/examples/react/virtualized-rows/src/main.tsx index ee404a82be..59a7f98594 100644 --- a/examples/react/virtualized-rows/src/main.tsx +++ b/examples/react/virtualized-rows/src/main.tsx @@ -95,7 +95,7 @@ function App() { //All important CSS styles are included as inline styles for this example. This is not recommended for your code. return ( -
+
{process.env.NODE_ENV === 'development' ? (

Notice: You are currently running React in diff --git a/examples/solid/basic/index.html b/examples/solid/basic/index.html index 48c59fc124..7d9b4f7c51 100644 --- a/examples/solid/basic/index.html +++ b/examples/solid/basic/index.html @@ -1,4 +1,4 @@ - + diff --git a/examples/solid/bootstrap/index.html b/examples/solid/bootstrap/index.html index 48c59fc124..7d9b4f7c51 100644 --- a/examples/solid/bootstrap/index.html +++ b/examples/solid/bootstrap/index.html @@ -1,4 +1,4 @@ - + diff --git a/examples/solid/column-groups/index.html b/examples/solid/column-groups/index.html index 48c59fc124..7d9b4f7c51 100644 --- a/examples/solid/column-groups/index.html +++ b/examples/solid/column-groups/index.html @@ -1,4 +1,4 @@ - + diff --git a/examples/solid/column-ordering/index.html b/examples/solid/column-ordering/index.html index 48c59fc124..7d9b4f7c51 100644 --- a/examples/solid/column-ordering/index.html +++ b/examples/solid/column-ordering/index.html @@ -1,4 +1,4 @@ - + diff --git a/examples/solid/column-visibility/index.html b/examples/solid/column-visibility/index.html index 48c59fc124..7d9b4f7c51 100644 --- a/examples/solid/column-visibility/index.html +++ b/examples/solid/column-visibility/index.html @@ -1,4 +1,4 @@ - + diff --git a/examples/solid/sorting/index.html b/examples/solid/sorting/index.html index 48c59fc124..7d9b4f7c51 100644 --- a/examples/solid/sorting/index.html +++ b/examples/solid/sorting/index.html @@ -1,4 +1,4 @@ - + diff --git a/examples/svelte/basic/index.html b/examples/svelte/basic/index.html index f0b6e4d767..6ab1dd7e51 100644 --- a/examples/svelte/basic/index.html +++ b/examples/svelte/basic/index.html @@ -1,4 +1,4 @@ - + diff --git a/examples/svelte/basic/src/App.svelte b/examples/svelte/basic/src/App.svelte index f2a9dd6a80..6b0c5e2aec 100644 --- a/examples/svelte/basic/src/App.svelte +++ b/examples/svelte/basic/src/App.svelte @@ -5,7 +5,7 @@ flexRender, getCoreRowModel, } from '@tanstack/svelte-table' - import type { ColumnDef, TableOptions } from '@tanstack/table-core/src/types'; + import type { ColumnDef, TableOptions } from '@tanstack/table-core/src/types' import './index.css' type Person = { diff --git a/examples/svelte/column-groups/index.html b/examples/svelte/column-groups/index.html index f0b6e4d767..6ab1dd7e51 100644 --- a/examples/svelte/column-groups/index.html +++ b/examples/svelte/column-groups/index.html @@ -1,4 +1,4 @@ - + diff --git a/examples/svelte/column-ordering/index.html b/examples/svelte/column-ordering/index.html index f0b6e4d767..6ab1dd7e51 100644 --- a/examples/svelte/column-ordering/index.html +++ b/examples/svelte/column-ordering/index.html @@ -1,4 +1,4 @@ - + diff --git a/examples/svelte/column-pinning/index.html b/examples/svelte/column-pinning/index.html index f0b6e4d767..6ab1dd7e51 100644 --- a/examples/svelte/column-pinning/index.html +++ b/examples/svelte/column-pinning/index.html @@ -1,4 +1,4 @@ - + diff --git a/examples/svelte/column-visibility/index.html b/examples/svelte/column-visibility/index.html index f0b6e4d767..6ab1dd7e51 100644 --- a/examples/svelte/column-visibility/index.html +++ b/examples/svelte/column-visibility/index.html @@ -1,4 +1,4 @@ - + diff --git a/examples/svelte/sorting/index.html b/examples/svelte/sorting/index.html index f0b6e4d767..6ab1dd7e51 100644 --- a/examples/svelte/sorting/index.html +++ b/examples/svelte/sorting/index.html @@ -1,4 +1,4 @@ - + diff --git a/examples/svelte/sorting/src/App.svelte b/examples/svelte/sorting/src/App.svelte index f8ed580808..a3094a9bfe 100644 --- a/examples/svelte/sorting/src/App.svelte +++ b/examples/svelte/sorting/src/App.svelte @@ -6,7 +6,7 @@ getSortedRowModel, ColumnDef, TableOptions, - flexRender + flexRender, } from '@tanstack/svelte-table' import { makeData, Person } from './makeData' import './index.css' @@ -21,7 +21,7 @@ cell: info => info.getValue(), footer: props => props.column.id, }, - { + { accessorFn: row => row.lastName, id: 'lastName', cell: info => info.getValue(), @@ -82,19 +82,17 @@ })) } - const options = writable>( - { - data, - columns, - state: { - sorting, - }, - onSortingChange: setSorting, - getCoreRowModel: getCoreRowModel(), - getSortedRowModel: getSortedRowModel(), - debugTable: true, - } - ) + const options = writable>({ + data, + columns, + state: { + sorting, + }, + onSortingChange: setSorting, + getCoreRowModel: getCoreRowModel(), + getSortedRowModel: getSortedRowModel(), + debugTable: true, + }) const refreshData = () => { console.info('refresh') @@ -128,7 +126,12 @@ class:select-none={header.column.getCanSort()} on:click={header.column.getToggleSortingHandler()} > - + {{ asc: ' 🔼', desc: ' 🔽', @@ -145,7 +148,9 @@ {#each row.getVisibleCells() as cell} - + {/each} @@ -157,7 +162,12 @@ {#each footerGroup.headers as header} {#if !header.isPlaceholder} - + {/if} {/each} diff --git a/examples/vue/basic/index.html b/examples/vue/basic/index.html index 0cb97a7031..e160e46247 100644 --- a/examples/vue/basic/index.html +++ b/examples/vue/basic/index.html @@ -1,4 +1,4 @@ - + diff --git a/examples/vue/basic/tsconfig.dev.json b/examples/vue/basic/tsconfig.dev.json index 9c31af8933..8199439883 100644 --- a/examples/vue/basic/tsconfig.dev.json +++ b/examples/vue/basic/tsconfig.dev.json @@ -30,4 +30,5 @@ // "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"], // "references": [{ "path": "./tsconfig.node.json" }] + // } \ No newline at end of file diff --git a/examples/vue/column-ordering/index.html b/examples/vue/column-ordering/index.html index 0cb97a7031..e160e46247 100644 --- a/examples/vue/column-ordering/index.html +++ b/examples/vue/column-ordering/index.html @@ -1,4 +1,4 @@ - + diff --git a/examples/vue/column-pinning/index.html b/examples/vue/column-pinning/index.html index 0cb97a7031..e160e46247 100644 --- a/examples/vue/column-pinning/index.html +++ b/examples/vue/column-pinning/index.html @@ -1,4 +1,4 @@ - + diff --git a/examples/vue/pagination-controlled/index.html b/examples/vue/pagination-controlled/index.html index 0cb97a7031..e160e46247 100644 --- a/examples/vue/pagination-controlled/index.html +++ b/examples/vue/pagination-controlled/index.html @@ -1,4 +1,4 @@ - + diff --git a/examples/vue/pagination-controlled/src/useService.ts b/examples/vue/pagination-controlled/src/useService.ts index 1ed22862dc..2fcce0b199 100644 --- a/examples/vue/pagination-controlled/src/useService.ts +++ b/examples/vue/pagination-controlled/src/useService.ts @@ -1,66 +1,66 @@ -import { ref, computed, watchEffect, Ref } from "vue"; -import { type PaginationState } from "@tanstack/vue-table"; +import { ref, computed, watchEffect, Ref } from 'vue' +import { type PaginationState } from '@tanstack/vue-table' -const DEFAULT_PAGE_COUNT = -1; -const DEFAULT_RESULT_COUNT = -1; +const DEFAULT_PAGE_COUNT = -1 +const DEFAULT_RESULT_COUNT = -1 -const endpoint = "https://jsonplaceholder.typicode.com/posts"; +const endpoint = 'https://jsonplaceholder.typicode.com/posts' export default function useService(pagination: Ref) { - const data = ref(null); - const totalResultCount = ref(DEFAULT_RESULT_COUNT); - const error = ref(null); - const isLoading = ref(false); - const request = ref | null>(null); + const data = ref(null) + const totalResultCount = ref(DEFAULT_RESULT_COUNT) + const error = ref(null) + const isLoading = ref(false) + const request = ref | null>(null) const requestParams = computed(() => { - const { pageSize, pageIndex } = pagination.value; - const currentPage = pageIndex + 1; + const { pageSize, pageIndex } = pagination.value + const currentPage = pageIndex + 1 return { _limit: pageSize.toString(), _page: currentPage.toString(), - }; - }); + } + }) const url = computed(() => { - const searchParams = new URLSearchParams(requestParams.value); - return `${endpoint}?${searchParams}`; - }); + const searchParams = new URLSearchParams(requestParams.value) + return `${endpoint}?${searchParams}` + }) const pageCount = computed(() => { - const { pageSize } = pagination.value; + const { pageSize } = pagination.value - return Math.ceil(totalResultCount.value / pageSize); + return Math.ceil(totalResultCount.value / pageSize) }) watchEffect(() => { - isLoading.value = true; + isLoading.value = true request.value = fetch(url.value) - .then(async (response) => { - const responseData = await response.json(); + .then(async response => { + const responseData = await response.json() if (response.ok) { - data.value = responseData; - error.value = null; + data.value = responseData + error.value = null totalResultCount.value = - Number(response.headers.get("x-total-count")) ?? DEFAULT_PAGE_COUNT; + Number(response.headers.get('x-total-count')) ?? DEFAULT_PAGE_COUNT } else { - throw new Error("Network response was not OK"); + throw new Error('Network response was not OK') } }) - .catch((error) => { - error.value = error; - data.value = null; - totalResultCount.value = DEFAULT_PAGE_COUNT; + .catch(error => { + error.value = error + data.value = null + totalResultCount.value = DEFAULT_PAGE_COUNT - console.log("error!", error); + console.log('error!', error) }) .finally(() => { - isLoading.value = false; - }); - }); + isLoading.value = false + }) + }) return { data, @@ -68,5 +68,5 @@ export default function useService(pagination: Ref) { pageCount, error, isLoading, - }; + } } diff --git a/examples/vue/pagination-controlled/tsconfig.dev.json b/examples/vue/pagination-controlled/tsconfig.dev.json index c9f1d86519..bef5571c5d 100644 --- a/examples/vue/pagination-controlled/tsconfig.dev.json +++ b/examples/vue/pagination-controlled/tsconfig.dev.json @@ -29,4 +29,5 @@ // "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"], // "references": [{ "path": "./tsconfig.node.json" }] + // } \ No newline at end of file diff --git a/examples/vue/pagination/index.html b/examples/vue/pagination/index.html index 0cb97a7031..e160e46247 100644 --- a/examples/vue/pagination/index.html +++ b/examples/vue/pagination/index.html @@ -1,4 +1,4 @@ - + diff --git a/examples/vue/pagination/src/App.vue b/examples/vue/pagination/src/App.vue index 634ca7d230..c5b73ee4f6 100644 --- a/examples/vue/pagination/src/App.vue +++ b/examples/vue/pagination/src/App.vue @@ -5,85 +5,85 @@ import { getPaginationRowModel, useVueTable, createColumnHelper, -} from "@tanstack/vue-table"; -import { ref } from "vue"; -import { makeData, Person } from "./makeData"; +} from '@tanstack/vue-table' +import { ref } from 'vue' +import { makeData, Person } from './makeData' -const INITIAL_PAGE_INDEX = 0; +const INITIAL_PAGE_INDEX = 0 -const defaultData = makeData(100); -const columnHelper = createColumnHelper(); -const goToPageNumber = ref(INITIAL_PAGE_INDEX + 1); -const pageSizes = [10, 20, 30, 40, 50]; -const data = ref(defaultData); +const defaultData = makeData(100) +const columnHelper = createColumnHelper() +const goToPageNumber = ref(INITIAL_PAGE_INDEX + 1) +const pageSizes = [10, 20, 30, 40, 50] +const data = ref(defaultData) const columns = [ columnHelper.group({ - header: "Name", - footer: (props) => props.column.id, + header: 'Name', + footer: props => props.column.id, columns: [ - columnHelper.accessor("firstName", { - cell: (info) => info.getValue(), - footer: (props) => props.column.id, + columnHelper.accessor('firstName', { + cell: info => info.getValue(), + footer: props => props.column.id, }), - columnHelper.accessor((row) => row.lastName, { - id: "lastName", - cell: (info) => info.getValue(), - header: () => "Last Name", - footer: (props) => props.column.id, + columnHelper.accessor(row => row.lastName, { + id: 'lastName', + cell: info => info.getValue(), + header: () => 'Last Name', + footer: props => props.column.id, }), ], }), columnHelper.group({ - header: "Info", - footer: (props) => props.column.id, + header: 'Info', + footer: props => props.column.id, columns: [ - columnHelper.accessor("age", { - header: () => "Age", - footer: (props) => props.column.id, + columnHelper.accessor('age', { + header: () => 'Age', + footer: props => props.column.id, }), columnHelper.group({ - header: "More Info", + header: 'More Info', columns: [ - columnHelper.accessor("visits", { - header: () => "Visits", - footer: (props) => props.column.id, + columnHelper.accessor('visits', { + header: () => 'Visits', + footer: props => props.column.id, }), - columnHelper.accessor("status", { - header: "Status", - footer: (props) => props.column.id, + columnHelper.accessor('status', { + header: 'Status', + footer: props => props.column.id, }), - columnHelper.accessor("progress", { - header: "Profile Progress", - footer: (props) => props.column.id, + columnHelper.accessor('progress', { + header: 'Profile Progress', + footer: props => props.column.id, }), ], }), ], }), -]; +] const table = useVueTable({ get data() { - return data.value; + return data.value }, columns, getCoreRowModel: getCoreRowModel(), getPaginationRowModel: getPaginationRowModel(), -}); +}) function rerender() { - data.value = defaultData; + data.value = defaultData } function handleGoToPage(e) { - const page = e.target.value ? Number(e.target.value) - 1 : 0; - goToPageNumber.value = page + 1; - table.setPageIndex(page); + const page = e.target.value ? Number(e.target.value) - 1 : 0 + goToPageNumber.value = page + 1 + table.setPageIndex(page) } function handlePageSizeChange(e) { - table.setPageSize(Number(e.target.value)); + table.setPageSize(Number(e.target.value)) } diff --git a/examples/vue/pagination/src/makeData.ts b/examples/vue/pagination/src/makeData.ts index 6b9b9b6f61..0a22b0d4fd 100644 --- a/examples/vue/pagination/src/makeData.ts +++ b/examples/vue/pagination/src/makeData.ts @@ -1,22 +1,22 @@ -import { faker } from "@faker-js/faker"; +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[]; -}; + firstName: string + lastName: string + age: number + visits: number + progress: number + status: 'relationship' | 'complicated' | 'single' + subRows?: Person[] +} const range = (len: number) => { - const arr = []; + const arr = [] for (let i = 0; i < len; i++) { - arr.push(i); + arr.push(i) } - return arr; -}; + return arr +} const newPerson = (): Person => { return { @@ -25,26 +25,24 @@ const newPerson = (): Person => { age: faker.number.int(40), visits: faker.number.int(1000), progress: faker.number.int(100), - status: faker.helpers.shuffle([ - "relationship", - "complicated", - "single" - ])[0]! - }; -}; + 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 - }; + const len = lens[depth]! + return range(len).map((d): Person => { + return { + ...newPerson(), + subRows: lens[depth + 1] ? makeDataLevel(depth + 1) : undefined, } - ); - }; + }) + } - return makeDataLevel(); + return makeDataLevel() } diff --git a/examples/vue/row-selection/index.html b/examples/vue/row-selection/index.html index 0cb97a7031..e160e46247 100644 --- a/examples/vue/row-selection/index.html +++ b/examples/vue/row-selection/index.html @@ -1,4 +1,4 @@ - + diff --git a/examples/vue/row-selection/src/App.vue b/examples/vue/row-selection/src/App.vue index dde2c71d14..11e6aed38c 100644 --- a/examples/vue/row-selection/src/App.vue +++ b/examples/vue/row-selection/src/App.vue @@ -9,31 +9,34 @@ import { } from '@tanstack/vue-table' import { ref } from 'vue' -import IndeterminateCheckbox from './IndeterminateCheckbox.vue'; +import IndeterminateCheckbox from './IndeterminateCheckbox.vue' import { makeData, Person } from './makeData' - const columnHelper = createColumnHelper() const columns = [ { id: 'select', header: ({ table }: { table: any }) => { - return - }, - cell: ({ row }: { row: any }) => { - return

+ return ( -
- } + ) + }, + cell: ({ row }: { row: any }) => { + return ( +
+ +
+ ) + }, }, columnHelper.group({ header: 'Name', @@ -103,7 +106,7 @@ const table = useVueTable({ rowSelection.value = typeof updateOrValue === 'function' ? updateOrValue(rowSelection.value) - : updateOrValue; + : updateOrValue }, getCoreRowModel: getCoreRowModel(), }) diff --git a/examples/vue/row-selection/src/IndeterminateCheckbox.vue b/examples/vue/row-selection/src/IndeterminateCheckbox.vue index ef31be1ea8..9c7763182d 100644 --- a/examples/vue/row-selection/src/IndeterminateCheckbox.vue +++ b/examples/vue/row-selection/src/IndeterminateCheckbox.vue @@ -1,14 +1,14 @@