diff --git a/apps/docs/.vitepress/config.ts b/apps/docs/.vitepress/config.mts similarity index 100% rename from apps/docs/.vitepress/config.ts rename to apps/docs/.vitepress/config.mts diff --git a/apps/docs/.vitepress/theme/Layout.vue b/apps/docs/.vitepress/theme/Layout.vue index e34fb4e00..7cdc29206 100644 --- a/apps/docs/.vitepress/theme/Layout.vue +++ b/apps/docs/.vitepress/theme/Layout.vue @@ -89,7 +89,7 @@ `. Clicking on a sortable column header will sort the column in ascending +direction (smallest first), while clicking on it again will switch the direction of sorting to +descending (largest first). Clicking on it a third time will stop sorting on the column. For +single column sorting (e.g. `multisort===false`) clicking on a differnt sortable column header will +sort that column in ascending order and clear the sort order for the previously sorted column. + +You can control which column is pre-sorted and the order of sorting (ascending or descending). To +pre-specify the column to be sorted use the `sortBy` model. For single column sorting (e.g. `multisort===false`) +`sortBy` should be an array containing a single `BTableSortBy` object. + +```ts + BTableSortBy = { + order: BTableSortByOrder // Sort order can by 'asc', 'desc' or undefined + key: string // The field name to sort by + comparer?: (a: string, b: string) => number +} +``` + +- **Ascending**: Items are sorted lowest to highest (i.e. `A` to `Z`) and will be displayed with the + lowest value in the first row with progressively higher values in the following rows. +- **Descending**: Items are sorted highest to lowest (i.e. `Z` to `A`) and will be displayed with + the highest value in the first row with progressively lower values in the following rows. + + + + + + +`sorbBy` is a [named model](https://vuejs.org/guide/components/v-model.html#multiple-v-model-bindings) +so it can be bound to an object that will be updated with the current sort state when the user changes +sorting by clicking the headers. + + + +
singleSortBy = {{ JSON.stringify(singleSortBy) }}
+ +
+ +Tables can be sorted by multiple columns. Programmaticly, this can be done by adding more entries +to the `sortBy` array. From the user inteface, multi-sort works as follows: + +- Clicking on a sortable header that isn't currently sorted adds it as `ascending` to the end of the sortBy list +- Clicking on a sortable header that is currently sorted as ascending makes it **descending**, but leaves it in the same order in the `sortBy` list +- Clicking on a sortable header that is currently sorted as descending removes it from the list + + + +
multiSortBy = {{ JSON.stringify(multiSortBy) }}
+ +
+ +## Complete Example + + + + + + + + Add Sort... + + + + + + + + + + + + + + + + + Clear + + + + + + +
+ Name + Age + Active +
+
+
+ + + + + + + + +
+ + + + + + + + +
{{ infoModal.content }}
+
+
+ +
+ diff --git a/apps/playground/package.json b/apps/playground/package.json index 3f1d71a46..18e65bf68 100644 --- a/apps/playground/package.json +++ b/apps/playground/package.json @@ -5,23 +5,25 @@ "type": "module", "scripts": { "dev": "vite --port 5173", - "build": "vue-tsc --noEmit && vite build", + "type-check": "vue-tsc --noEmit -p tsconfig.app.json", + "build-only": "vite build", + "build": "pnpm run type-check && pnpm run build-only", "preview": "vite preview" }, "dependencies": { "bootstrap-vue-next": "workspace:^", - "vue": "^3.4.18", - "vue-router": "^4.2.5" + "vue": "^3.4.21", + "vue-router": "^4.3.0" }, "devDependencies": { - "@tsconfig/node20": "^20.1.2", - "@types/node": "^20.11.17", + "@tsconfig/node20": "^20.1.4", + "@types/node": "^20.11.30", "@vitejs/plugin-vue": "^5.0.4", "@vue/tsconfig": "^0.5.1", - "bootstrap": "^5.3.2", - "typescript": "^5.3.3", - "vite": "^5.1.1", - "vue-tsc": "^1.8.27" + "bootstrap": "^5.3.3", + "typescript": "^5.4.3", + "vite": "^5.2.7", + "vue-tsc": "^2.0.7" }, "lint-staged": { "*.{js,ts,vue}": "eslint --cache --fix", diff --git a/apps/playground/src/components/Comps/TBLink.vue b/apps/playground/src/components/Comps/TBLink.vue index cfc7b5f60..601994304 100644 --- a/apps/playground/src/components/Comps/TBLink.vue +++ b/apps/playground/src/components/Comps/TBLink.vue @@ -2,22 +2,12 @@ - Home + Home - About + About @@ -30,3 +20,25 @@ --> + + diff --git a/apps/playground/src/components/Comps/TPopover.vue b/apps/playground/src/components/Comps/TPopover.vue index bf40072eb..9641d8326 100644 --- a/apps/playground/src/components/Comps/TPopover.vue +++ b/apps/playground/src/components/Comps/TPopover.vue @@ -150,14 +150,7 @@ - + @@ -206,7 +199,7 @@ - + -