Skip to content

BTable: Unable to sort by child object property with sortByFormatted #2227

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
6 tasks done
hackel opened this issue Sep 23, 2024 · 2 comments · Fixed by #2240
Closed
6 tasks done

BTable: Unable to sort by child object property with sortByFormatted #2227

hackel opened this issue Sep 23, 2024 · 2 comments · Fixed by #2240
Labels
bug Something isn't working

Comments

@hackel
Copy link

hackel commented Sep 23, 2024 •
edited
Loading

Describe the bug

When sorting by a column that is an object using a formatter function, I get the exception "aValue.localeCompare is not a function". In trying to debug, it looks like an integer is being returned from the realVal function instead of a string, though I'm not sure how that's possible from looking at it.

My data looks like this: { id: 1, charges: { total: 100 } } and my formatter: charges => charges.total. See StackBlitz for simplified example.

Edit: A workaround is to cast the total charges as a string in the formatter. It would be very nice if I didn't have to do that everywhere, though.

Reproduction

https://stackblitz.com/edit/github-fwer37?file=src%2Fcomponents%2FComp.vue,src%2FApp.vue

Used Package Manager

npm

Validations

  • Have tested with the latest version. This is still alpha version and sometime things change rapidly.
  • Follow our Code of Conduct
  • Read the Contributing Guide.
  • Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
  • Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
  • The provided reproduction is a minimal reproducible of the bug.
@hackel hackel added the bug Something isn't working label Sep 23, 2024
@stackblitz StackBlitz
Copy link

stackblitz bot commented Sep 23, 2024

Fix this issue in StackBlitz Codeflow Start a new pull request in StackBlitz Codeflow.

@VividLemon
Copy link
Member

Considering the formatter function is always suppose to return a string (export type TableFieldFormatter<T> = (value: unknown, key: string, item: T) => string) it's a bit silly. But I suppose there's no harm to cast to a string again. Realistically those that would be disaffected would be doing things wrong already anyways

VividLemon added a commit to VividLemon/bootstrap-vue-next that referenced this issue Oct 6, 2024
@VividLemon
fix(BTable): cast formatted items to string fixes bootstrap-vue-next#…
54fbe75 
…2227
@github-actions github-actions bot mentioned this issue Oct 4, 2024
Merged
xvaara added a commit to xvaara/bootstrap-vue-next that referenced this issue Oct 10, 2024
@xvaara
Merge remote-tracking branch 'upstream/main'
Loading
Loading status checks…
ee17d63 
* upstream/main: (27 commits)
  fix(vBPopover): revert bootstrap-vue-next#2234 (bootstrap-vue-next#2256)
  fix(BModal): fix backdrop, fade and reduced animation (bootstrap-vue-next#2250)
  fix(BTable): busy slot behavior to match bootstrap-vue fixes bootstrap-vue-next#1636  (bootstrap-vue-next#2249)
  fix(BTable): cast formatted items to string fixes bootstrap-vue-next#2227 (bootstrap-vue-next#2247)
  doc(BDropdown): Parity pass on component and helpers (bootstrap-vue-next#2243)
  fix(BTable): use watcher to compare changes with selectedItems fixes bootstrap-vue-next#2245 (bootstrap-vue-next#2246)
  fix(BTable)!: rename event row-dbl-clicked to row-dblclicked (bootstrap-vue-next#2239)
  docs: Work around unplugin bug (bootstrap-vue-next#2226)
  docs(BCollapse): Parity pass (bootstrap-vue-next#2237)
  fix directives in vite template
  chore: release main (bootstrap-vue-next#2235)
  fix(vBPopover): add position absolute to floating directives (bootstrap-vue-next#2234)
  chore: release main (bootstrap-vue-next#2231)
  fix(BTable): select mode range when table is sorted fixes bootstrap-vue-next#2229 (bootstrap-vue-next#2230)
  Update migration-guide.md
  chore: release main (bootstrap-vue-next#2223)
  refactor(useColorVariantClasses): add border variants into its resolver (bootstrap-vue-next#2224)
  feat(colorvariant): add subtle and emphasis variant fixes bootstrap-vue-next#2079
  chore: release main (bootstrap-vue-next#2220)
  fix(BModal): fix jumping when scrollbars are present (bootstrap-vue-next#2211)
  ...
VividLemon added a commit that referenced this issue Oct 11, 2024
@VividLemon
feat(useToast)!: rename useToast to useToastController fixes #2155
Loading
Loading status checks…
e6749a3 
fix(BTable): cast formatted items to string fixes #2227

fix(BTable): busy slot behavior to match bootstrap-vue fixes #1636

feat(BDropdown)!: remove props center, dropend, dropstart, dropup, & end -- use single prop placement -- has same rules as popover. placement=top-start placement=bottom-start placement=right-start etc etc fixes #1752

feat(BTable): add emptyText and emptyFilteredText functionality fixes #664

feat(usePopoverController): create usePopoverController composable (not fully complete)

refactor(bvnPrefix): rename to withBvnPrefix

refactor(ConditonalWrapper): require skip prop

feat(BProgress)!: fix markup for BProgress to match bootstrap 5.3 recommended fixes #2221 . Manual intervention may not be needed, double check your aria markup (if manually configured), may be automatic

feat(PluginControllers): Allow for using the prop.id for the items key. Ie if you supply modalController.show({props: {id: 'foo' }}) You can reference it leave('foo')

fix(BDropdown): bdropdown when in button group has class btn-group fixes #2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

chore: release main bootstrap-vue-next/bootstrap-vue-next
2 participants
@hackel @VividLemon